Flutter中如何让FAB固定在底部？输入框文本变长致移位问题

你的问题出在布局的垂直对齐设置上：默认Row的crossAxisAlignment是居中对齐，当输入框文本变多行、高度增加时，FAB会跟着在Row里居中，自然就偏离底部了。按下面的方式修改代码就能固定FAB在底部：

Padding(
  padding: const EdgeInsets.all(10.0),
  child: Container(
    padding: EdgeInsets.only(right: 6, left: 10),
    decoration: BoxDecoration(
      color: Colors.grey.shade700,
      borderRadius: BorderRadius.circular(16),
    ),
    child: Row(
      // 关键：设置垂直对齐为底部
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Expanded(
          child: TextField(
            controller: _textController,
            keyboardType: TextInputType.multiline,
            minLines: 1,
            maxLines: 20,
            decoration: InputDecoration(
              hintText: "Message...",
              border: InputBorder.none,
            ),
          ),
        ),
        SizedBox(width: 8), // 加个间距优化视觉效果
        FloatingActionButton(
          mini: true,
          elevation: 0,
          onPressed: () {},
          child: const Icon(
            Icons.send,
            color: Colors.white,
          ),
        )
      ],
    ),
  ),
)

关键改动说明： #

• 移除了外层多余的Expanded（如果父布局是Column，这个Expanded会让输入框区域占满剩余空间，但对FAB对齐无帮助，没必要嵌套在这里）
• 给Row添加crossAxisAlignment: CrossAxisAlignment.end，强制让Row内的子组件都靠底部对齐，不管输入框变多高，FAB始终贴在底部
• 新增SizedBox(width: 8)给输入框和FAB之间增加间距，优化界面美观度

另外你原来给Container设置的alignment: AlignmentDirectional.bottomEnd其实没起作用，因为Row会占满Container的宽度，直接给Row设置垂直对齐就足够了。

内容的提问来源于stack exchange，提问作者Zaid khalid