Flutter如何实现图片居上加文字标签的等间距三列布局？

核心布局逻辑 #

三列横向均匀分布、列内垂直排列图片+文本的效果，通过Row+Expanded+Column组合即可实现，和MaterialApp组件嵌套层级无关。原有代码的布局问题是将所有内容放在Stack的绝对定位组件中，没有给横向排列的组件预留正常的布局约束。

完整可运行代码 #

class LogIn extends StatefulWidget {
  const LogIn({Key? key}) : super(key: key);

  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  bool isAPIcallProcess = false;
  bool hidePassword = true;
  GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
  String? username;
  String? password;

  // 抽离单列表项，无需单独新建StatefulWidget
  Widget _buildNavItem(String iconPath, String label) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Image.asset(
          iconPath,
          width: 60,
          height: 60,
          color: Colors.white,
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 14,
            fontWeight: FontWeight.w500
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color(0xffF24004),
        body: SafeArea(
          child: Column(
            children: [
              // 顶部原有logo区域
              Padding(
                padding: const EdgeInsets.only(top: 100),
                child: Image.asset(
                  "lib/img/pomodoro.png",
                  width: 250,
                  height: 250,
                ),
              ),
              const Spacer(),
              // 三列导航区域
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 60),
                child: Row(
                  children: [
                    Expanded(child: _buildNavItem("lib/img/focus.png", "专注")),
                    Expanded(child: _buildNavItem("lib/img/stats.png", "统计")),
                    Expanded(child: _buildNavItem("lib/img/setting.png", "设置")),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

关键实现说明 #

• 横向等宽：三列的父组件使用Row，每个列项用Expanded包裹，会自动按等比分配横向宽度，无需手动计算尺寸
• 列内排版：每个列项使用Column，设置居中对齐属性，图片和文本之间用SizedBox设置固定间距
• 屏幕适配：外层用SafeArea避开状态栏、刘海屏区域，垂直方向用Spacer填充空白，适配不同高度的设备
• 性能优化：单个列项直接用方法抽离即可，不需要新建独立的StatefulWidget，减少不必要的状态管理开销

内容的提问来源于stack exchange，提问作者pomoworko.com