Checkbox

選擇控件

class _MyHomePageState extends State<MyHomePage> {
  bool _isCheck = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: const Text('首頁')),
      body: new Center(
          child: new Checkbox(
        //默認是否選中，tristate 為 false 的時候吟榴，value 不能為 null
        value: _isCheck,
        //不能為null魁蒜，如果為 true，value 為 null 的時候顯示禁用標識
        tristate: false,
        onChanged: (isCheck) => {
              this._isCheck = isCheck,
              setState(() {
                print("isChcek=====$_isCheck");
              })
            },
        //選中框的背景顏色
        activeColor: Colors.red,
        //選中勾的顏色
        checkColor: Colors.blue,
      )),
    );
  }
}

image.png

CheckboxListTile

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: const Text('首頁')),
        body: ListView(
          children: <Widget>[
            CheckboxListTile(
                value:false,
                onChanged:(isCheck) => {
                  print("isCheck===$isCheck")
                },
                activeColor: Colors.red,
                title:Text('這是title'),
                subtitle:Text('這是描述'),
                //是否要撐滿3行
                isThreeLine:false,
                //是否密集
                dense:false,
                secondary:CircleAvatar(child: Icon(Icons.android),),
                selected:true,
                //選擇控件放的位置
                controlAffinity:ListTileControlAffinity.platform,
            ),
          ],
        ));
  }
}
  

image.png

ChoiceChip

ChoiceChip 控件也可以做選擇操作

new Container(
          alignment: Alignment.center,
         
          child: ChoiceChip(
            //對應(yīng)的圖標
            avatar: CircleAvatar(child: Icon(Icons.android)),
            //對應(yīng)的標簽名稱
            label: Text('label'),
            //對應(yīng)的標簽樣式
            labelStyle: TextStyle(
              fontSize: 22,
            ),
            //圖標和標簽間距
            labelPadding: EdgeInsets.all(10),
            //是否選中監(jiān)聽事件
            onSelected: (isSelect) => {print("isSelect====$isSelect")},
            //按下陰影的寬度
            pressElevation: 0.5,
            //是否選中
            selected: true,
            //選中的背景顏色
            selectedColor: Colors.green,
            //禁用的背景顏色
            disabledColor: Colors.red,
            tooltip: 'tooltip',
            //背景框的形狀
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
            ),
            //圖標或者文字超出ChoiceChip 范圍的部分剪切方式吩翻，默認不剪切 Clip.none
            clipBehavior: Clip.none,
            //未選中的背景顏色
            backgroundColor: Colors.grey,
            //內(nèi)容距離邊框的間距
            padding: EdgeInsets.all(10.0),
            materialTapTargetSize: MaterialTapTargetSize.padded,
            //陰影寬度
            elevation: 5.0,
            //陰影顏色
            shadowColor: Colors.yellow,
            //選中陰影顏色
            selectedShadowColor: Colors.blue,
            //圖標的邊框
            avatarBorder: const CircleBorder(),
          ),
        )