Flutter&Dart中如何实现6个RaisedButton行列排列并在按钮上方添加文字

要实现你需要的行列按钮布局+每个按钮上方带文字的效果，按以下思路修改即可：

• 首先封装一个可复用的带文字说明的按钮组件，避免重复写大量按钮代码
• 改用GridView.count组件实现双列网格布局，直接指定crossAxisCount为2就能自动排列成行，不用手动嵌套Row和Column
• 原有按钮的样式逻辑可以完全保留，只需要调整外层布局结构，同时把文字放到按钮上层即可

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  // 封装带顶部文字的按钮组件，可传入按钮文字、顶部说明文字、点击回调
  Widget _buildButtonWithLabel(String label, String buttonText, VoidCallback onTap) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 按钮上方的文字
        Text(
          label,
          style: const TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w500,
          ),
        ),
        const SizedBox(height: 12),
        // 适配新版本Flutter的按钮组件，保留你原有样式逻辑
        ElevatedButton(
          onPressed: onTap,
          style: ElevatedButton.styleFrom(
            padding: EdgeInsets.zero,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          child: Ink(
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [
                  Color.fromRGBO(34, 46, 62, 1),
                  Color.fromRGBO(34, 46, 62, 1),
                ],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              borderRadius: BorderRadius.circular(5),
            ),
            child: Container(
              constraints: const BoxConstraints(
                maxWidth: 183,
                minHeight: 70,
              ),
              alignment: Alignment.center,
              child: Text(
                buttonText,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 17,
                  fontFamily: 'Montserrat-Arabic',
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Theme.of(context).backgroundColor,
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
          // 双列网格布局
          child: GridView.count(
            crossAxisCount: 2,
            crossAxisSpacing: 20, // 列间距
            mainAxisSpacing: 30, // 行间距
            childAspectRatio: 0.85, // 调整每个item的宽高比，适配文字+按钮的高度
            children: [
              // 按需添加按钮项，第一个参数是按钮上方文字，第二个是按钮文字
              _buildButtonWithLabel("上方文字1", "English", () {}),
              _buildButtonWithLabel("上方文字2", "English", () {}),
              _buildButtonWithLabel("上方文字3", "English", () {}),
              _buildButtonWithLabel("上方文字4", "English", () {}),
              _buildButtonWithLabel("上方文字5", "English", () {}),
              _buildButtonWithLabel("上方文字6", "English", () {}),
            ],
          ),
        ),
      ),
    );
  }
}

如果你不想用GridView，也可以手动嵌套实现：外层放Column，每一行对应一个Row组件，每个Row内放两个封装好的带文字按钮组件，效果完全一致。如果需要调整布局间距、文字样式，直接修改对应参数即可。

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