重新设计了 Radio 小部件
概述
#引入了 RadioGroup 小部件,用于集中管理一组 Radio 小部件的 groupValue 和 onChanged 回调。因此,单独的 Radio.groupValue 和 Radio.onChanged 属性已被弃用。
背景
#为了满足 APG (ARIA Practices Guide) 关于键盘导航和单选按钮组语义属性的要求,Flutter 需要一个专用的单选按钮组概念。引入一个包装器小部件 RadioGroup,可以开箱即用地提供此支持。此更改也提供了一个机会来简化单个 Radio 小部件的 API。
变更说明
#以下 API 已弃用
Radio.onChangedRadio.groupValueCupertinoRadio.onChangedCupertinoRadio.groupValueRadioListTile.groupValueRadioListTile.onChanged.
迁移指南
#如果您正在使用这些属性,可以使用 RadioGroup 进行重构。
情况 1:微小情况
#迁移前的代码
dart
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Radio<int>(
value: 0,
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
},
),
Radio<int>(
value: 2,
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
},
),
],
);
}迁移后的代码
dart
Widget build(BuildContext context) {
return RadioGroup<int>(
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
},
child: Column(
children: <Widget>[
Radio<int>(value: 0),
Radio<int>(value: 2),
],
),
);
}情况 2:禁用的单选按钮
#迁移前的代码
dart
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Radio<int>(
value: 0,
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
},
),
Radio<int>(
value: 2,
groupValue: _groupValue,
onChanged: null, // disabled
),
],
);
}迁移后的代码
dart
Widget build(BuildContext context) {
return RadioGroup<int>(
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
},
child: Column(
children: <Widget>[
Radio<int>(value: 0),
Radio<int>(value: 2, enabled: false),
],
),
);
}情况 3:混合组或多选
#迁移前的代码
dart
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Radio<int>(
value: 1,
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
}, // disabled
),
Radio<String>(
value: 'a',
groupValue: _stringValue,
onChanged: (String? value) {
setState(() {
_stringValue = value;
});
},
),
Radio<String>(
value: 'b',
groupValue: _stringValue,
onChanged: (String? value) {
setState(() {
_stringValue = value;
});
},
),
Radio<int>(
value: 2,
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
}, // disabled
),
],
);
}迁移后的代码
dart
Widget build(BuildContext context) {
return RadioGroup<int>(
groupValue: _groupValue,
onChanged: (int? value) {
setState(() {
_groupValue = value;
});
},
child: Column(
children: <Widget>[
Radio<int>(value: 1),
RadioGroup<String>(
child: Column(
children: <Widget>[
Radio<String>(value: 'a'),
Radio<String>(value: 'b'),
]
),
),
Radio<int>(value: 2),
],
),
);
}时间线
#已发布版本:3.34.0-0.0.pre
稳定版发布:3.35
参考资料
#API 文档
相关议题
相关 PR