Flutter技术问题：如何将TextField固定在Scaffold底部？

我尝试将TextField放置在屏幕底部，却一直遇到问题。我用Positioned组件包裹，代码如下：

return Scaffold(
  //set a textField to add a reply
  appBar: TopAppBar(title: 'bruh'),
  body: SingleChildScrollView(
    controller: _scrollController,
    child: Column(
      children: [
        FocalWaveTile(
          wave: widget.waveTile.wave,
          user: profileState.user,
          poster: widget.waveTile.poster,
        ),
        ListView.builder(
          shrinkWrap: true,
          itemCount: waves.length,
          itemBuilder: (BuildContext context, int index) {
            
          },
        ),
        //poisition on the bottom
        Positioned(
          bottom: MediaQuery.of(context).viewInsets.bottom,
          child: Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(left: 10),
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: 'Reply to this wave'),
                      onChanged: (value) {
                        if (value.length > 0) {
                          setState(() {
                            isTyping = true;
                          });
                        } else {
                          setState(() {
                            isTyping = false;
                          });
                        }
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    ),
  ));

实际效果是TextField并未固定在屏幕底部，而是跟随列表内容滚动。我还尝试过BottomNavigationBar和Spacer组件，但都无法达到预期效果，请问哪里出错了？

核心问题：Positioned的使用场景错误 #

Positioned组件必须在Stack组件内部才能生效，你现在把它放在Column里，所以Positioned的bottom属性完全不起作用，TextField会按照Column的布局规则排列在列表下方，而不是固定在屏幕底部。

正确实现方式：使用Scaffold的bottomNavigationBar属性 #

Scaffold自带的bottomNavigationBar可以直接将组件固定在屏幕底部，并且会自动处理键盘弹出时的上移逻辑，是最适合这种场景的方案：

return Scaffold(
  appBar: TopAppBar(title: 'bruh'),
  body: SingleChildScrollView(
    controller: _scrollController,
    child: Column(
      children: [
        FocalWaveTile(
          wave: widget.waveTile.wave,
          user: profileState.user,
          poster: widget.waveTile.poster,
        ),
        ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(), // 避免嵌套滚动冲突
          itemCount: waves.length,
          itemBuilder: (BuildContext context, int index) {
            // 你的列表项构建逻辑
          },
        ),
      ],
    ),
  ),
  // 将输入框放在bottomNavigationBar中
  bottomNavigationBar: Container(
    height: 50,
    color: Colors.white,
    child: Row(
      children: [
        Expanded(
          child: Container(
            margin: EdgeInsets.only(left: 10),
            child: TextField(
              decoration: InputDecoration(hintText: 'Reply to this wave'),
              onChanged: (value) {
                setState(() {
                  isTyping = value.isNotEmpty;
                });
              },
            ),
          ),
        ),
      ],
    ),
  ),
);

其他注意事项 #

• 嵌套ListView时，添加physics: NeverScrollableScrollPhysics()，避免和外层的SingleChildScrollView产生滚动冲突。
• 如果需要输入框随键盘上移，bottomNavigationBar会自动处理，不需要额外设置viewInsets。

内容的提问来源于stack exchange，提问作者Ruder Buster