如何在 Flutter 中使用锚定按钮制作灵活的列表布局？

Question

我正在构建一个投票表单，用户在其中指定一个问题和多个灵活的选择。底部有一个“发送”按钮。

但是，我在与表单交互时遇到了问题。添加太多选择会导致 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);
  }

Answer 1

Scaffold您的命名中有一个属性bottomNavigationBar可以用来放置按钮。

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