创建文本输入栏始终固定在底部 [英] Create text input bar always pinned to bottom

问题描述

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

I'm trying to create a Row widget that will be pinned to the bottom always like the below screenshot. I currently have a large container containing text (open to changing this to a card) followed by smaller cards which are scrollable. I would like to pin a bar to the bottom so a user can enter text and add a card. I'm not sure how to pin this to the bottom of the UI without interfering with the cards causing a pixel overflow. What is the best way to achieve this? I'd ideally like to achieve a bottom row that is similar to 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(),
                  )
                ]
              )
              );
  }
}

推荐答案

使用 Stack 包裹父窗口小部件，并使用 Align 小部件将文本框始终置于底部.

Wrap your parent Widget With Stack and Use Align widget to place your textBox always bottom.

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(),
                    )
                  ]
              )
          ),
        )
      ],)

这篇关于创建文本输入栏始终固定在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！