当您在颤动中单击选项卡时，如何在屏幕底部显示文本字段答案

【问题标题】：how to show textfield at the bottom of the screen, when you click the tab in flutter当您在颤动中单击选项卡时，如何在屏幕底部显示文本字段
【发布时间】：2021-10-05 16:24:50
【问题描述】：

在我的情况下，我有两个选项卡，所以我想在用户单击第二个选项卡时显示文本字段（应该看起来像这样）

【问题讨论】：

标签： flutter dart mobile frontend

【解决方案1】：

在第二个选项卡中，您应该使用 Column() 小部件并应用 mainAxixAlignment:MainAxisAlignment.end

或者您可以执行以下代码，

Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Header(),//optional if you have anything show above messages 
            Expanded(
              child: SingleChildScrollView(
                reverse: true,
                padding: EdgeInsets.only(bottom: 10),
                child: Column(
                  children: messages, //here is the messaging part
                ), //
              ),
            ),
            Bottom(),//here the key board part goes
          ],)

在这段代码中，我们用扩展包装消息，因此它将占据所有可用空间并推到底部，即使expanded 使用的空间比屏幕少，spacebetween 也会推到底部。

【讨论】：

【解决方案2】：

你可以像这样使用Scaffold的bottomSheet参数

Scaffold(
      backgroundColor: Colors.white,
      bottomSheet: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: MediaQuery.of(context).size.width - 120,
            height: 45,
            child: TextField(
              decoration: InputDecoration(
                isDense: true,
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(color: Colors.grey),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(color: Colors.grey),
                ),
              ),
            ),
          ),
          TextButton(
            onPressed: () {},
            child: Text('press'),
          ),
        ],
      ),
      body: Container(),
    );

您可以通过单击选项卡来隐藏和显示此 bottomSheet 小部件

【讨论】：

非常感谢，但我能问一下，我应该将手势检测器放在标签的哪个位置！？
如果我的页面中没有脚手架怎么办
你可以通过TabController找到标签栏的当前索引或者你会找到onTap方法来获取索引，你不需要这个手势检测器
如果您不使用脚手架，那么您必须使用非常复杂的 UI，其中包含 Column 和子列