Flutter：如何更简洁地创建包含三个按钮的容器

给你两个更简洁的实现思路，比手动写三个GestureDetector加容器的方式清爽不少：

方案一：用ListView.separated自动生成分隔线 #

这个方法最省心，ListView.separated会自动在按钮之间插入分隔线，不用手动写Divider，而且以后要加/删按钮只需要改itemCount就行：

Container(
  width: double.infinity,
  child: ListView.separated(
    shrinkWrap: true, // 让列表自适应高度，避免滚动
    physics: const NeverScrollableScrollPhysics(), // 禁止滚动（因为是固定三个按钮）
    itemCount: 3,
    // 生成分隔线
    separatorBuilder: (context, index) => const Divider(height: 1, color: Colors.grey),
    // 生成每个按钮
    itemBuilder: (context, index) {
      final buttonTitles = ['按钮1', '按钮2', '按钮3'];
      return TextButton(
        style: TextButton.styleFrom(
          alignment: Alignment.centerLeft, // 左对齐，和示例图匹配
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        ),
        onPressed: () {
          // 这里写对应按钮的点击逻辑
          print('点击了${buttonTitles[index]}');
        },
        child: Text(buttonTitles[index]),
      );
    },
  ),
)

方案二：用Column配合循环生成按钮和分隔线 #

如果不想用列表，用Column加循环也能减少重复代码，避免写三次几乎一样的按钮代码：

Container(
  width: double.infinity,
  child: Column(
    children: [
      // 循环生成3个按钮，最后一个按钮不加分隔线
      for (int i = 0; i < 3; i++) ...[
        TextButton(
          style: TextButton.styleFrom(
            alignment: Alignment.centerLeft,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          ),
          onPressed: () => print('点击按钮${i+1}'),
          child: Text('按钮${i+1}'),
        ),
        if (i != 2) const Divider(height: 1, color: Colors.grey),
      ],
    ],
  ),
)

为什么这两个方案更优？ #

• 直接用Flutter内置的TextButton，自带点击反馈（水波纹），不用自己写GestureDetector的点击逻辑，省代码还更符合Material设计规范
• 用循环或列表生成的方式，避免重复写三次相同的按钮结构，以后改样式/数量只需要改一处，维护起来更方便

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