Flutter：如何使聊天页面底部文本栏答案

【问题标题】：Flutter: How to make chat page bottom text barFlutter：如何使聊天页面底部文本栏
【发布时间】：2023-01-16 17:31:46
【问题描述】：

我正在尝试在 flutter 上创建一个如下所示的聊天页面：top bar + bottom textField and send button。我已经能够使用发送按钮制作顶部应用栏和文本字段，但我无法成功地将文本字段定位在页面底部。我尝试过对齐和展开、页脚、BottomNavigationBar 之类的东西。

我粘贴的代码的当前版本仅显示顶部的 Appbar。如果我取出子行和发送按钮，我在页面底部有一个文本字段。出于某种原因，一旦我添加子行以便能够添加发送按钮，整个文本字段就不会显示在屏幕上。我将不胜感激任何帮助。

注意：因为我正在尝试制作一个聊天屏幕，所以我希望中间部分可以滚动（同时保留顶部和底部），稍后我可以在其中添加聊天气泡。

Screenshot of code because of the bad editing of code snippet Continuation of code snippet

“”“ @覆盖小部件构建（BuildContext 上下文）{ 返回脚手架（背景颜色：ColorConstant.whiteA700， // 顶栏应用栏：应用栏（
背景颜色：ColorConstant.deepOrange300， title: Text("匹配名称",style: AppStyle.textstyleinterregular15.copyWith( 字体大小：getFontSize(15))), ),

  body: Column(
    children: [
      Expanded(child: SingleChildScrollView(
          child: Column(
            children: [
              // Bubbles
            ],
          ),
        ),
      ),
      Container(    
        height: 45,
        width: double.infinity,
        color: ColorConstant.whiteA700,
        child: Row(children: <Widget>[
          TextField(
            decoration: InputDecoration(
              hintText: "Message...",
              hintStyle: TextStyle(color: ColorConstant.bluegray100),
              border: OutlineInputBorder(
                borderSide: BorderSide(color: ColorConstant.bluegray100)
              ),
            )
          ),
          SizedBox(width: 15,),
          // Send Button
          FloatingActionButton(  
            onPressed: (){},
            child: Icon(Icons.send,color: ColorConstant.whiteA700,size: 18,),
            backgroundColor: ColorConstant.lightBlueA100,
            elevation: 0,
          ),
        ]),
      );
    ],
  ),
);

“”“

【问题讨论】：

标签： flutter chat

【解决方案1】：

试试这个...

     bottomNavigationBar: Padding(
            padding:
                EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
              height: 45,
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: Row(
                children: [
                  Expanded(
                    child: const TextField(
                      decoration: InputDecoration(
                        hintText: "Message...",
                        hintStyle: TextStyle(color: Colors.blue),
                        border: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue)),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  // Send Button
                  MaterialButton(
                    color: Colors.red,
                    onPressed: () {},
                    child: Icon(
                      Icons.send,
                      color: Colors.white,
                      size: 18,
                    ),
                    // backgroundColor: ColorConstant.lightBlueA100,
                    elevation: 0,
                   ),
                ],
              ),
            ),
          ),

【讨论】：

我小时候不能添加底部导航栏。此外，这允许我做文本字段，但我仍然无法添加发送图标。如果我误解了，你能在整个代码片段中举个例子吗？
签出编辑后的代码

【解决方案2】：

用 Expanded widget 包装 TextField 它会为你工作。

【讨论】：