Flutter 中的 ToggleButtons 小部件：全面指南

Flutter 中的 ToggleButtons 小部件：全面指南

在 Flutter 中，ToggleButtons 是一种允许用户在一组选项中进行切换选择的控件。它通常用于展示一组相关选项，让用户可以快速切换选择。ToggleButtons 是一种水平排列的按钮集合，其中只有一个按钮可以被选中。它们在设计上与 Material Design 中的开关按钮相似，适用于简单的是/否、开/关或真/假类型的选择。

基础用法

ToggleButtons 最基本的用法是定义一组按钮和一个选择回调：

ToggleButtons(
  children: Map<String, Widget>.fromIterable(
    ['Yes', 'No', 'Maybe'],
    key: (value) => value,
  ),
  isSelected: [true, false, false],
  onPressed: (index) {
    // 当按钮被按下时执行的操作
  },
)

在这个例子中，我们创建了三个按钮，其中第一个按钮（“Yes”）默认被选中。

自定义样式

ToggleButtons 提供了一些属性来定制按钮的外观和行为：

按钮样式

• children: 一个映射，键是按钮的标识符，值是按钮的 Widget。
• style: 定义未选中按钮的文本样式。
• selectedStyle: 定义选中按钮的文本样式。

ToggleButtons(
  children: <String, Widget>{
    'Yes': Text('Yes'),
    'No': Text('No'),
    'Maybe': Text('Maybe'),
  },
  style: TextStyle(color: Colors.blueGrey),
  selectedStyle: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
  // ... 其他属性
)

选中状态

• isSelected: 一个布尔值列表，表示每个按钮是否被选中。

ToggleButtons(
  isSelected: [true, false, false],
  // ... 其他属性
)

按钮回调

• onPressed: 当用户点击按钮时调用的回调，参数是被点击按钮的索引。

ToggleButtons(
  onPressed: (index) {
    // 根据索引处理按钮的选中逻辑
  },
  // ... 其他属性
)

实例：颜色选择器

ToggleButtons 可以用于实现颜色选择器，允许用户在一组颜色中选择：

ToggleButtons(
  children: <String, Widget>{
    'Red': Container(width: 20.0, height: 20.0, color: Colors.red),
    'Green': Container(width: 20.0, height: 20.0, color: Colors.green),
    'Blue': Container(width: 20.0, height: 20.0, color: Colors.blue),
  },
  isSelected: [true, false, false],
  onPressed: (index) {
    // 处理颜色选择逻辑
  },
)

实例：尺寸选择

使用 ToggleButtons 可以让用户选择不同的尺寸：

ToggleButtons(
  children: <String, Widget>{
    'S': Text('Small'),
    'M': Text('Medium'),
    'L': Text('Large'),
  },
  isSelected: [false, true, false],
  onPressed: (index) {
    // 根据索引更新当前选择的尺寸
  },
)

实例：动态更新选中状态

可以动态地更新 isSelected 列表来改变按钮的选中状态：

// 假设这是当前选中的尺寸索引
int selectedSizeIndex = 1;

// ... 在 Widget 中
ToggleButtons(
  children: <String, Widget>{
    'S': Text('Small'),
    'M': Text('Medium'),
    'L': Text('Large'),
  },
  isSelected: [false, true, false], // 根据 selectedSizeIndex 动态更新
  onPressed: (index) {
    setState(() {
      selectedSizeIndex = index;
    });
  },
)

#结语

ToggleButtons 是 Flutter 中一个简单而直观的小部件，它非常适合用于实现单选按钮组。通过掌握 ToggleButtons 的使用，你可以为用户提供清晰而一致的选择界面，从而提升应用的用户体验。