Flutter中如何将Column内的Row子组件移动到屏幕顶部

问题原因 #

你当前代码中Row被Expanded组件包裹，Expanded会自动填充Column的全部剩余可用高度，Row默认内容垂直居中，因此无法贴到屏幕顶部。

解决方法 #

方法1：移除Row外层的Expanded（最常用） #

如果Column中当前只有这一个Row，或者后续还要加其他占满剩余空间的组件，直接去掉包裹Row的Expanded即可，同时可给Column补充参数保证布局符合预期：

return Scaffold(
  body: Column(
    // 子组件默认从顶部开始排列
    mainAxisAlignment: MainAxisAlignment.start,
    // 子组件填满横向宽度
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      // 移除Expanded包裹
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {});
            },
            child: Container(
              padding: const EdgeInsets.all(8),
              child: Image.network(
                'https://picsum.photos/250?image=9', 
                height: 70, 
                width: 70
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {});
            },
            child: Image.network(
              'https://picsum.photos/250?image=9', 
              height: 70, 
              width: 70
            ),
          ),
        ],
      ),
      // 如果后续有其他需要占满剩余空间的组件，再给该组件套Expanded即可
      // Expanded(child: 其他组件)
    ],
  ),
);

方法2：保留Expanded的前提下调整对齐 #

如果因为布局结构必须保留Row外层的Expanded，给Expanded内的组件设置顶部对齐即可：

Expanded(
  // 套Align组件设置顶部对齐
  child: Align(
    alignment: Alignment.topCenter,
    child: Row(
      // 原有Row的属性不变
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [/* 原有子组件 */],
    ),
  )
)

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