Flutter开发：如何使顶部Row组件滚动时保持固定？

要让包含关闭图标和"Publish"文本的Row固定在页面顶部，只需调整组件结构，将固定的Row从ListView中移出，作为独立的顶部元素，下方放置可滚动的内容区域即可。

修改后的代码示例 #

Column(
  children: <Widget>[
    // 固定在顶部的操作栏
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        InkWell(
          child: Icon(Icons.close_sharp),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        Text("Publish"),
      ],
    ),
    // 可滚动的输入内容区域
    Expanded(
      child: SingleChildScrollView(
        child: TextField(
          autofocus: true,
          decoration: InputDecoration(
            border: InputBorder.none,
          ),
          keyboardType: TextInputType.multiline,
          maxLines: null,
          cursorColor: Color(0xff057009),
          cursorHeight: 30,
        ),
      ),
    ),
  ],
)

关键说明 #

• 用Column组合顶部固定组件与下方滚动区域，确保顶部Row始终停留在页面顶部，不会随内容滚动。
• Expanded用于让滚动区域占满页面剩余空间，避免布局溢出问题。这里用SingleChildScrollView替代原ListView更简洁，因为仅需滚动TextField内容；如果后续要添加其他滚动元素，换回ListView并包裹Expanded即可。
• 若需要优化顶部栏的视觉效果，可给Row添加Padding调整边距：

Padding(
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  child: Row(/* 原有Row内容 */),
)

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