Flutter 中的 ToggleButtons 小部件:全面指南
在 Flutter 中,ToggleButtons
是一种允许用户在一组选项中进行切换选择的控件。它通常用于展示一组相关选项,让用户可以快速切换选择。ToggleButtons
是一种水平排列的按钮集合,其中只有一个按钮可以被选中。它们在设计上与 Material Design 中的开关按钮相似,适用于简单的是/否、开/关或真/假类型的选择。
基础用法
ToggleButtons
最基本的用法是定义一组按钮和一个选择回调:
dart
ToggleButtons(
children: Map<String, Widget>.fromIterable(
['Yes', 'No', 'Maybe'],
key: (value) => value,
),
isSelected: [true, false, false],
onPressed: (index) {
// 当按钮被按下时执行的操作
},
)
在这个例子中,我们创建了三个按钮,其中第一个按钮("Yes")默认被选中。
自定义样式
ToggleButtons
提供了一些属性来定制按钮的外观和行为:
按钮样式
children
: 一个映射,键是按钮的标识符,值是按钮的 Widget。style
: 定义未选中按钮的文本样式。selectedStyle
: 定义选中按钮的文本样式。
dart
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
: 一个布尔值列表,表示每个按钮是否被选中。
dart
ToggleButtons(
isSelected: [true, false, false],
// ... 其他属性
)
按钮回调
onPressed
: 当用户点击按钮时调用的回调,参数是被点击按钮的索引。
dart
ToggleButtons(
onPressed: (index) {
// 根据索引处理按钮的选中逻辑
},
// ... 其他属性
)
实例:颜色选择器
ToggleButtons
可以用于实现颜色选择器,允许用户在一组颜色中选择:
dart
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
可以让用户选择不同的尺寸:
dart
ToggleButtons(
children: <String, Widget>{
'S': Text('Small'),
'M': Text('Medium'),
'L': Text('Large'),
},
isSelected: [false, true, false],
onPressed: (index) {
// 根据索引更新当前选择的尺寸
},
)
实例:动态更新选中状态
可以动态地更新 isSelected
列表来改变按钮的选中状态:
dart
// 假设这是当前选中的尺寸索引
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
的使用,你可以为用户提供清晰而一致的选择界面,从而提升应用的用户体验。