Flutter中如何在图片按钮下方添加对齐的文本？

直接把每个图标按钮和对应的文本包装成Column组件，放在同一个Row中，就能保证按钮和文本精准对齐。修改后的代码如下：

import 'package:flutter/material.dart';
import 'package:medreminder/Reminder/ui/home_reminder.dart';

void main() {
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Image.asset(
              'images/MenuImg.jpg',
              width: double.infinity, // 改为自适应屏幕宽度，适配不同设备
              height: 170,
              fit: BoxFit.cover,
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                // 第一个按钮+文本组合
                Column(
                  mainAxisSize: MainAxisSize.min, // 仅占用自身内容高度
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    IconButton(
                      icon: Image.asset('images/reminder.png'),
                      iconSize: 50,
                      onPressed: () {
                        Navigator.of(context, rootNavigator: true).push(
                          MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                        );
                      },
                    ),
                    const Text("Reminder"),
                  ],
                ),
                // 第二个按钮+文本组合
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    IconButton(
                      icon: Image.asset('images/news.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    const Text("News"),
                  ],
                ),
                // 第三个按钮+文本组合
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    IconButton(
                      icon: Image.asset('images/recipe.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    const Text("Recipe"),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

关键说明： #

• 用Column将按钮和文本绑定为一个布局单元，彻底解决两个独立Row导致的对齐偏差问题。
• mainAxisSize: MainAxisSize.min限制Column仅占用内容所需高度，避免垂直方向过度拉伸。
• 顶部图片宽度改为double.infinity，适配不同屏幕尺寸，比固定数值更合理。

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