Flutter中如何让列内按钮统一尺寸并占满最长列空间？

你需要让一行内的所有按钮都和最长按钮的宽度保持一致，占满对应空间，之前尝试的IntrinsicHeight、Table、Row+Column都没达到效果，HTML/CSS用Flex能实现，这里给你Flutter的解决方案：

用IntrinsicWidth+Row+Expanded组合就能实现：

• IntrinsicWidth会让Row的宽度自动适配其中最宽的子元素（也就是文本最长的按钮）
• CrossAxisAlignment.stretch保证所有按钮高度统一
• 每个按钮外层套Expanded，强制按钮占满所在列的全部宽度

修改后的完整代码：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: IntrinsicWidth(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text('Button with Long Text 1 text text text text text text text text text text text text text'),
                  ),
                ),
                Expanded(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text('Button 2'),
                  ),
                ),
                Expanded(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text('Button 3'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果非要用Table组件，可以设置defaultColumnWidth: FlexColumnWidth(1)让所有列平分总宽度，但这种方式无法让列宽匹配最长按钮的宽度，不如Row方案直接。

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