0

我有一个应用程序屏幕，顶部有一个标题，底部有几个按钮，中间的其余部分有一个输入表单。

我想要实现的目标：我希望输入表单子项（即不同的输入字段）在垂直轴上展开以填充可用空间。当键盘打开并占据大约 40% 的屏幕时，我希望输入字段之间的所有灵活空间都缩小，如果这还不足以显示所有内容，我希望“中心”部分可以滚动，所以用户可以找到其余的输入字段，现在隐藏在“下方”。

我正在使用SingleChildScrollViewwith a child的组合Column。小部件树（简化..）如下所示：

return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Text('Title',style: TextStyle(fontSize: 32),),
            Expanded(
              child: Container(
                color: Colors.redAccent,
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                      TextFormField(decoration: InputDecoration(labelText: 'Firstname'),),
                    ],),),),),
            ElevatedButton(onPressed: () => null, child: Text('Next')),
          ],),),);

当键盘打开时，上面的代码导致了这个，它缩小了Expanded红色容器，并且是可滚动的，所以它是想要的结果：

带键盘

但是，当键盘关闭时，我得到了这个：

无键盘

所以在非键盘布局中，我希望输入字段均匀分布并占据整个红色空间。我已经尝试了各种组合，用Expandedand包裹孩子，在输入字段之间Flexible添加孩子，等等。Flexible无法达到所需的状态。只会出现布局错误。

4

1 回答 1

1

我想建议你使用一个AppBar，这样你已经有了要减去的高度！

您的错误源于未设置Container固定高度的 a 。

这就是我的解决方案：

@override
  Widget build(BuildContext context) {
    var deviceHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        backgroundColor: Colors.white,
        title: Text(
          'Title',
          style: TextStyle(fontSize: 32, color: Colors.black87),
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          height: deviceHeight - (kToolbarHeight + 32), // 32 => Button height
          child: Column(
            children: [
              Expanded(
                child: Container(
                  color: Colors.redAccent,
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                        TextFormField(
                          decoration: InputDecoration(labelText: 'Firstname'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              ElevatedButton(onPressed: () => null, child: Text('Next')),
            ],
          ),
        ),
      ),
    );
  }
于 2021-03-13T14:52:34.573 回答