创建文本输入栏始终固定在底部

Question

我正在尝试创建一个Row小部件，该小部件将始终固定在底部，如下面的屏幕截图所示。我目前有一个包含文本的大容器（可以将其更改为卡片），然后是可滚动的较小卡片。我想将栏固定到底部，以便用户可以输入文本并添加卡片。我不确定如何将其固定在UI的底部而不干扰卡而导致像素溢出。实现此目标的最佳方法是什么？理想情况下，我希望获得类似于Facebook Messengers'

的底行

代码：

class TextBarAtBottom extends StatelessWidget {
  TextEditingController commentController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return 
    Container(
              height: 20.0,
              padding: EdgeInsets.symmetric(vertical: 2.0),
              alignment: Alignment.bottomCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  // First child is enter comment text input
                  TextFormField(
                                  controller: commentController,
                                  autocorrect: false,
                                  decoration: new InputDecoration(
                                    labelText: "Some Text",
                                    labelStyle:
                                        TextStyle(fontSize: 20.0, color: Colors.white),
                                    fillColor: Colors.blue,
                                    border: OutlineInputBorder(
                                        // borderRadius:
                                        //     BorderRadius.all(Radius.zero(5.0)),
                                        borderSide:
                                            BorderSide(color: Colors.purpleAccent)),
                                  ),
                    ),
                    // Second child is button
                  IconButton(
                    icon: Icon(Icons.send),
                    iconSize: 20.0,
                    onPressed: _onPressedSend(),
                  )
                ]
              )
              );
  }
}

Answer 1

下面是示例代码：

body: Stack(
        children: <Widget>[
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
//Following container with row will always stay bottom and if keyboard opens it will be right above the keyboard
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            alignment: Alignment.bottomCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text('text 1'),
                Text('text 2'),
              ],
            ),
          )
        ],
      ),

希望这会有所帮助。

Answer 2

用Stack包装您的父窗口小部件，并使用Align小部件将您的文本框始终放在底部。

return 
      Stack(children: <Widget>[
        yourMainContent(),
        Align(
          alignment: Alignment.bottomCenter,
          ///Your TextBox Container
          child: Container(
              height: 20.0,
              padding: EdgeInsets.symmetric(vertical: 2.0),
              alignment: Alignment.bottomCenter,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    // First child is enter comment text input
                    TextFormField(
                      controller: commentController,
                      autocorrect: false,
                      decoration: new InputDecoration(
                        labelText: "Some Text",
                        labelStyle:
                        TextStyle(fontSize: 20.0, color: Colors.white),
                        fillColor: Colors.blue,
                        border: OutlineInputBorder(
                          // borderRadius:
                          //     BorderRadius.all(Radius.zero(5.0)),
                            borderSide:
                            BorderSide(color: Colors.purpleAccent)),
                      ),
                    ),
                    // Second child is button
                    IconButton(
                      icon: Icon(Icons.send),
                      iconSize: 20.0,
                      onPressed: _onPressedSend(),
                    )
                  ]
              )
          ),
        )
      ],)

Answer 3

正确和最佳的方法是将Expanded小部件与Column结合使用。

使用扩展的屏幕内容将占据屏幕上所有空白区域，然后在屏幕下方显示文本输入字段。您可以在下面看到输出。

---

    return Scaffold(
      appBar: AppBar(
        title: AppBarTitle(title: "Profile"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
              child: ListView(
            children: <Widget>[
              Text("Message1"),
              Text("Message2"),
              Text("Message3"),
              Text("Message4"),
              Text("Message5"),
            ],
          )),
          Container(
              padding: EdgeInsets.symmetric(vertical: 2.0),
              child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
                // First child is enter comment text input
                Expanded(
                  child: TextFormField(
                    autocorrect: false,
                    decoration: new InputDecoration(
                      labelText: "Some Text",
                      labelStyle:
                          TextStyle(fontSize: 20.0, color: Colors.white),
                      fillColor: Colors.blue,
                      border: OutlineInputBorder(
                          // borderRadius:
                          //     BorderRadius.all(Radius.zero(5.0)),
                          borderSide: BorderSide(color: Colors.purpleAccent)),
                    ),
                  ),
                ),
                // Second child is button
                IconButton(
                  icon: Icon(Icons.send),
                  iconSize: 20.0,
                  onPressed: () {},
                )
              ])),
        ],
      ),
);

---