ラジオボタンやチェックボックス
材料コンポーネントライブラリは、それらがStatefulWidgetから継承されますが、彼ら自身が現在選択されている状態の保存、選択された状態は、親コンポーネントによって管理されていませんが、材料スタイルスイッチは、ラジオやチェックボックスチェックボックスを切り替えています。スイッチまたはチェックボックスをクリックすると、そのonChangedイベントコールバックをトリガし、我々は、このコールバックでロジックを変更するために選択処理することができます。
一般的な属性
のラジオチェックボックスを
| プロパティ | 説明 |
|---|---|
| 値 | ラジオの値 |
| onChangedイベント | トリガーを変更する場合 |
| activeColor | 選択した色、背景色 |
| groupValue | 値のグループを選択します |
コード例：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "Radio",
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int sex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Radio")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("大："),
Radio(
value: 1,
groupValue: this.sex,
onChanged: (value) {
setState(() {
this.sex = value;
});
},
),
SizedBox(width: 20),
Text("小："),
Radio(
value: 2,
groupValue: this.sex,
onChanged: (value) {
setState(() {
this.sex = value;
});
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("你选择的是${this.sex == 1 ? "大" : "小"}")
],
)
],
),
);
}
}
RadioListTileラジオボタン
| プロパティ | 説明 |
|---|---|
| 値 | trueまたはfalse |
| onChangedイベント | イベントによってトリガーさ変化の時 |
| activeColor | 選択した色、背景色 |
| 題名 | 見出し |
| 字幕 | 小見出し |
| 二次 | 設定したアイコンや画像 |
| groupValue | 値のグループを選択します |
コードは以下の通りであります：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: "RadioListTile",
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int sex = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("我的app")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RadioListTile(
value: 1,
onChanged: (value) {
setState(() {
this.sex = value;
});
},
groupValue: this.sex,
title: Text("一级标题"),
subtitle: Text("二级标题"),
secondary: Icon(Icons.camera),
selected: this.sex == 1,
),
],
),
);
}
}
チェックボックスのチェックボックス
| プロパティ | 説明 |
|---|---|
| 値 | 場合は、このボックスをチェックしてください |
| onChangedイベント | チェックボックスの値を変更する必要があるとき、コールの監視 |
| トライステート | デフォルトはfalse、trueの場合、チェックボックスの値が真、偽、またはnullの場合もあります |
| activeColor | あなたは色を使用するには、このチェックボックスを選択した場合 |
| checkColor | 色のアイコンを確認する場合は、このチェックボックス |
| materialTapTargetSize | 最小サイズの設定]をタップターゲット |
コード：
Checkbox(
value: this.valueb,
onChanged: (bool value) {
setState(() {
this.valueb = value;
});
},
CheckboxListTileボックス
| プロパティ | 説明 |
|---|---|
| 値 | 場合は、このボックスをチェックしてください |
| onChangedイベント | チェックボックスの値を変更する必要があるとき、コールの監視 |
| activeColor | あなたは色を使用するには、このチェックボックスを選択した場合 |
| 題名 | メインタイトルのリスト |
| 字幕 | サブタイトル一覧 |
| isThreeLine | デフォルトはfalse |
| 密集 | このリストは、リストのタイル垂直集約型の一部かどうかであります |
| 二次 | チェックボックスの前面に表示ウィジェット |
| 選択 | 選択したテキストの強調表示した後、デフォルトはfalse |
| controlAffinity | テキストの位置に対してコントロール、デフォルトListTileControlAffinity.platform |
コード：
CheckboxListTile(
secondary: const Icon(Icons.alarm_on),
title: const Text('每天6：10 响铃'),
subtitle: Text('12小时58分钟后响铃'),
value: this.valued,
onChanged: (bool value) {
setState(() {
this.valued = value;
});
},
下面以一个例子说明状态的维护：
以下代码中，由于需要维护Switch和Checkbox的选中状态，所以SwitchAndCheckBoxTestRoute继承自StatefulWidget 。在其build方法中分别构建了一个Switch和Checkbox，初始状态都为选中状态，当用户点击时，会将状态置反，然后回调用setState()通知Flutter framework重新构建UI
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
@override
_SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}
class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
bool _switchSelected=true; //维护单选开关状态
bool _checkboxSelected=true;//维护复选框状态
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Switch(
value: _switchSelected,//当前状态
onChanged:(value){
//重新构建页面
setState(() {
_switchSelected=value;
});
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //选中时的颜色
onChanged:(value){
setState(() {
_checkboxSelected=value;
});
} ,
)
],
);
}
}
总结
通过Switch和Checkbox我们可以看到，虽然它们本身是与状态（是否选中）关联的，但它们却不是自己来维护状态，而是需要父组件来管理状态，然后当用户点击时，再通过事件通知给父组件，这样是合理的，因为Switch和Checkbox是否选中本就和用户数据关联，而这些用户数据也不可能是它们的私有状态。我们在自定义组件时也应该思考一下哪种状态的管理方式最为合理。
