User interface 如何在Flatter中使用锚定按钮创建灵活的列表布局？

我正在构建一个轮询表单，在该表单中，用户指定一个问题和灵活的选择数量。底部有一个“发送”按钮

但是，我在与表单交互时遇到问题。添加太多选项会导致ListView在“发送”按钮下方绘制。点击屏幕下半部分的文本字段会导致所选字段被键盘和发送按钮遮挡。代码如下：

@override
  Widget build(BuildContext context) {
     return Scaffold(
        //resizeToAvoidBottomPadding: false, // keyboard will cover floating elements
        appBar: AppBar(title: Text('Add Question')),
        body: Container(
           padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
           child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                 Expanded(
                    child: ListView(
                       //crossAxisAlignment: CrossAxisAlignment.stretch,
                       children: <Widget>[
                          TextFormField(
                             decoration: InputDecoration(labelText: 'Question'),
                             initialValue: _questionText,
                             validator: (value) {
                                if (value.isEmpty) {
                                   return 'Please enter some text';
                                }
                             },
                          ),
                          SizedBox(height: 16.0),
                          Center(
                             child: Text('Choices'),
                          ),
                          SizedBox(height: 16.0),

                          buildForm(),

                          SizedBox(height: 16.0),
                          RaisedButton.icon(
                             icon: Icon(Icons.add),
                             label: Text('Add Choice'),
                             onPressed: () {
                                final x = _questionChoices.length;
                                _addChoice("Test $x");
                             },
                          ),
                          SizedBox(height: 16.0),
                       ],
                    ),
                 ),
                 RaisedButton(
                    child: Text('SEND QUESTION'),
                    onPressed: () {
                       _sendQuestion();
                    },
                 )
              ],
           ),
        ),
     );
  }

  Widget buildForm() {
     List<Widget> list = new List();
     for (var index = 0; index < _questionChoices.length; index++) {
        list.add(Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: <Widget>[
              IconButton(
                 icon: Icon(Icons.remove_circle),
                 color: Colors.deepOrange,
                 tooltip: 'Remove Choice',
                 onPressed: () {
                    _removeChoice(index);
                 },
              ),
              Flexible(
                 child: TextFormField(
                    decoration: InputDecoration(hintText: 'Enter choice text.'),
                    initialValue: _questionChoices[index],
                    validator: (val) {
                       val.length == 0 ? 'Please enter a value.' : null;
                    },
                    onSaved: (val) => _questionChoices[index] = val,
                 ))
           ],
        ));
        list.add(SizedBox(
           height: 12.0,
        ));
     }
     return Column(children: list);
  }

@覆盖
小部件构建（构建上下文）{
返回脚手架(
//resizeToAvoidBottomPadding:false，//键盘将覆盖浮动元素
appBar:appBar（标题：文本（“添加问题”），
主体：容器(
填充：边缘组。对称（水平：16.0，垂直：24.0），
子：列(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
扩大(
子：ListView(
//crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
TextFormField(
装饰：输入装饰（labelText:“问题”），
初始值：\问题文本，
验证器：（值）{
if（value.isEmpty）{
返回“请输入一些文本”；
}
},
),
尺寸箱（高度：16.0），
居中(
child:Text（'Choices'），
),
尺寸箱（高度：16.0），
buildForm（），
尺寸箱（高度：16.0），
RaisedButton.icon(
图标：图标（Icons.add），
标签：文本（“添加选项”），
已按下：（）{
最终x=_.length；
_addChoice（“测试$x”）；
},
),
尺寸箱（高度：16.0），
],
),
),
升起的按钮(
子项：文本（“发送问题”），
已按下：（）{
_sendQuestion（）；
},
)
],
),
),
);
}
Widget buildForm（）{
列表=新列表（）；
对于（var index=0；index<\u.length；index++）{
列表。添加（第行）(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
图标按钮(
图标：图标（图标。删除圆圈），
颜色：颜色。深橙色，
工具提示：“删除选项”，
已按下：（）{
_移除选择（索引）；
},
),
灵活的(
子项：TextFormField(
装饰：输入装饰（hintText:“输入选择文本”。），
初始值：_[index]，
验证器：（val）{
val.length==0？“请输入一个值。”：null；
},
onSaved：（val）=>\u问题选择[索引]=val，
))
],
));
list.add（SizedBox(
身高：12.0，
));
}
返回列（子项：列表）；
}

在您的

脚手架中有一个名为
bottomNavigationBar
的属性，可用于放置按钮

   return Scaffold(
           bottomNavigationBar: BottomAppBar(
                      child: RaisedButton(
                         child: Text('SEND QUESTION'),
                         onPressed: () {
                         _sendQuestion();
                      },
                   ),
              ),
               ...

不要使用扩展的
和/或不要将按钮放在
列表视图的外部。在上面的示例中，您所做的是有效地定义一个不会扩展到屏幕高度以外的视图，使
Expanded
部分成为缩小其高度以符合要求的小部件

另外，我发现自己在很多情况下都会将提交按钮放在屏幕顶部。我认为它具有UI/UX的意义：用户天生就理解下面展开的可变高度内容，调用操作内容在第一个屏幕视图中显示，这样他们就不会在更改时进行保存，并且它减轻了许多模糊的键盘问题