重新設計了 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