Flutter：SingleChildScrollView中灵活的列子级

Question

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

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

我使用的是SingleChildScrollView与子列的组合。小部件树（简化..）看起来是这样的：

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和flext包装子字段，在输入字段之间添加flext子字段等等。无法达到所需状态。只获取布局错误。




Answer 1

我想建议您使用appbar，这样您就已经有可以减去的高度了！

您的错误源于没有将容器设置为固定高度。

这就是我的解决方案：

@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')),
            ],
          ),
        ),
      ),
    );
  }