Flutter快速上手1.5：基础控件之Radio和Checkb

一、Radio

属性名	类型	简介
value	动态类型	此单选按钮表示的值
groupValue	动态类型	该组单选按钮当前选定的值
onChanged	ValueChanged<T>	状态变化回调
activeColor	Color	选中时的颜色
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小。
focusNode	FocusNode	用于焦点管理和监听
autofocus	bool	是否自动获得焦点

  int _sex = 0;

Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('男'),
                Radio(
                    value: 1,
                    groupValue: _sex,
                    activeColor: Colors.pink,
                    onChanged: <int>(val) {
                      print('--男--$val');
                      setState(() {
                        _sex = val;
                      });
                    }),
                const Text('女'),
                Radio(
                    value: 2,
                    groupValue: _sex,
                    onChanged: <int>(val) {
                      print('--女--$val');
                      setState(() {
                        _sex = val;
                      });
                    }),
                const Text('保密'),
                Radio(
                    value: 0,
                    groupValue: _sex,
                    onChanged: <int>(val) {
                      print('--保密--$val');
                      setState(() {
                        _sex = val;
                      });
                    }),
              ],
            ),

20220419153308.jpg

二、Checkbox

属性名	类型	简介
value	bool	是否选中此复选框
onChanged	ValueChanged<bool>	该组单选按钮当前选定的值
tristate	bool	默认false，如果为true，复选框的值可以为true、false或null
activeColor	Color	选中时的颜色
checkColor	Color	选中时复选框图标的颜色
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小
focusNode	FocusNode	用于焦点管理和监听
autofocus	bool	是否自动获得焦点

 bool _selectSing = false;
 bool _selectDouce = false;
 bool _selectShoped = false;
 bool _selectHiking = false;

Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('唱歌'),
                Checkbox(
                    value: _selectSing,
                    onChanged: (val) {
                      setState(() {
                        _selectSing = !_selectSing;
                      });
                      print('唱歌');
                    }),
                const Text('跳舞'),
                Checkbox(
                    value: _selectDouce,
                    onChanged: (val) {
                      setState(() {
                        _selectDouce = !_selectDouce;
                      });
                      print('跳舞$val');
                    }),
                const Text('逛街'),
                Checkbox(
                    value: _selectShoped,
                    onChanged: (val) {
                      setState(() {
                        _selectShoped = !_selectShoped;
                      });
                      print('逛街');
                    }),
                const Text('爬山'),
                Checkbox(
                    value: _selectHiking,
                    onChanged: (val) {
                      setState(() {
                        _selectHiking = !_selectHiking;
                      });
                      print('爬山');
                    }),
              ],
            ),

20220419155717.jpg

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~