如何不使用padding为每行TextButton.icon按钮添加行间距

实现方案（不使用Padding） #

1. 插入SizedBox分隔（最通用方案） #

如果你的两个按钮是垂直排列在Column组件中，直接在两个按钮中间插入指定高度的SizedBox即可自定义间距：

Column(
  children: const [
    Button1(),
    SizedBox(height: 12), // 可自定义间距大小，这里设置为12逻辑像素
    Button2(),
  ]
)

如果是水平排列的按钮，设置SizedBox(width: 对应间距值)即可。

2. 利用布局组件内置间距属性 #

如果有多个同方向排列的按钮，Flutter 3.10及以上版本可以直接使用Column/Row的mainAxisSpacing属性统一设置间距，无需逐个添加分隔组件：

// 垂直排列多按钮统一设置间距
Column(
  mainAxisSpacing: 12, // 所有子组件之间的垂直间距统一为12
  children: const [
    Button1(),
    Button2(),
    // 可继续添加其他按钮
  ],
)

// 水平排列多按钮统一设置间距
Row(
  mainAxisSpacing: 12, // 所有子组件之间的水平间距统一为12
  children: const [
    Button1(),
    Button2(),
    // 可继续添加其他按钮
  ],
)

3. 可滚动列表场景使用ListView.separated #

如果按钮放在可滚动列表中，可通过ListView.separated的分隔项构造器统一设置间距：

ListView.separated(
  itemCount: 2, // 按钮总数
  separatorBuilder: (context, index) => const SizedBox(height: 12), // 每个按钮之间的间距
  itemBuilder: (context, index) {
    if(index == 0) return const Button1();
    return const Button2();
  },
)

4. 自适应换行排列用Wrap的间距属性 #

如果按钮是自动换行排列的，直接设置Wrap的runSpacing（行间距）和spacing（同行按钮间距）即可：

Wrap(
  spacing: 12, // 同一行内按钮的水平间距
  runSpacing: 12, // 行与行之间的垂直间距
  children: const [
    Button1(),
    Button2(),
    // 可继续添加其他按钮
  ],
)

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