如何为Flutter Toggle Buttons仅设置底部边框？

方法一：直接配置ToggleButtons的border属性 #

通过Border类仅定义底部边框，其余边框宽度设为0，就能实现只显示底部边框的效果：

ToggleButtons(
  isSelected: [true, false, false],
  // 仅设置底部边框，其余边隐藏
  border: Border(
    bottom: BorderSide(
      color: Colors.grey.shade300,
      width: 1.0,
    ),
    top: BorderSide(width: 0),
    left: BorderSide(width: 0),
    right: BorderSide(width: 0),
  ),
  // 选中时的底部边框颜色
  selectedBorderColor: Colors.blue,
  children: const [
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Text('选项A'),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Text('选项B'),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Text('选项C'),
    ),
  ],
  onPressed: (int index) {
    // 处理选中状态切换逻辑
  },
)

方法二：用Container包裹实现统一底部边框 #

如果需要给整个ToggleButtons组添加一条统一的底部边框，可将组件放入Container中，通过容器的decoration设置边框，同时去掉ToggleButtons自带的边框：

Container(
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(
        color: Colors.grey.shade200,
        width: 1.0,
      ),
    ),
  ),
  child: ToggleButtons(
    isSelected: [true, false, false],
    border: InputBorder.none, // 移除自带边框
    selectedColor: Colors.blue,
    children: const [
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        child: Text('全部'),
      ),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        child: Text('未完成'),
      ),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        child: Text('已完成'),
      ),
    ],
    onPressed: (int index) {
      // 处理选中状态切换逻辑
    },
  ),
)

方法三：实现选中按钮的底部高亮效果 #

如果需要选中的按钮底部有更突出的样式（比如更粗的颜色边框），可以结合selectedBorderWidth和selectedBorderColor来实现：

// 先定义选中状态列表
List<bool> _selected = [true, false, false];

// 组件代码
ToggleButtons(
  isSelected: _selected,
  border: Border(
    bottom: BorderSide(
      color: Colors.grey.shade300,
      width: 1.0,
    ),
    top: BorderSide.none,
    left: BorderSide.none,
    right: BorderSide.none,
  ),
  selectedBorderColor: Colors.blue,
  selectedBorderWidth: 2.0, // 选中时底部边框加粗
  children: const [
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Text('首页'),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Text('分类'),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Text('我的'),
    ),
  ],
  onPressed: (int index) {
    setState(() {
      _selected = List.generate(3, (i) => i == index);
    });
  },
)

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