[Flutter] [widget] Checkbox と CheckboxListTile のチェック ボックスをすばやく学習する

---

序文

---

1. チェックボックス、CheckboxListTileとは？

チェックボックス チェック ボックス、
CheckboxListTile: チェックボックスが追加された ListTile ウィジェット

2.ステップを使用する

1.チェックボックス

コードは次のとおりです (例)。

  Checkbox(
        activeColor: Colors.amberAccent, //选中的颜色
        fillColor: MaterialStateProperty.all(Colors.pink), //边框的颜色
        checkColor: Colors.green, //打钩的颜色
        focusColor: Colors.indigo,
        hoverColor: Colors.blue, //鼠标在上面，整个波纹显示的颜色
        value: checkS1,
        onChanged: (bool? value1) {
    
    
          checkS1 = value1!;
          setState(() {
    
    });
        }),

2.CheckboxListTile

Add a rounded corner to CheckboxListTile through Container, which takes better. タイトル
全体をクリックすると、
次のように onChanged コードをトリガーできます (例)。

Container(
     //给CheckboxListTile加个圆角比较好看
     decoration: const BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(15)),
         color: Colors.redAccent),
     child: CheckboxListTile(
         // shape: const RoundedRectangleBorder(
         //     borderRadius: BorderRadius.all(
         //         Radius.circular(15))), //整个CheckboxListTile的相撞
         title: const Text('标识内容'),
         subtitle: const Text('详细的内容'),
         secondary: const Icon(Icons.near_me),
         checkboxShape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(
                 Radius.circular(15))), //CheckBox的形状也可以设置
         value: checkS1,
         onChanged: (bool? value1) {
    
    
           //点击整个title 都可以触发该方法
           checkS1 = value1!;
           setState(() {
    
    });
         }),
   )

3.トライステート

チェックボックスには、実際には、常に選択されている、チェックされていない、および null の 3 つの状態があります。これは、操作されていないプロンプトに相当します。
tristate: true、後で実装されるため、onchanged の値が null である可能性があります: 下図に示すスタイルが表示されます

  bool? checkS1 = false;


 Container(
     //给CheckboxListTile加个圆角比较好看
     decoration: const BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(15)),
         color: Colors.redAccent),
     child: CheckboxListTile(
         // shape: const RoundedRectangleBorder(
         //     borderRadius: BorderRadius.all(
         //         Radius.circular(15))), //整个CheckboxListTile的相撞
         title: const Text('标识内容'),
         subtitle: const Text('详细的内容'),
         secondary: const Icon(Icons.near_me),
         checkboxShape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(
                 Radius.circular(15))), //CheckBox的形状也可以设置
         value: checkS1,
         tristate: true,
         onChanged: (bool? value1) {
    
    
           //点击整个title 都可以触发该方法
           checkS1 = value1;
           setState(() {
    
    });
         }),
   )

---

要約する

注意を払い、メッセージを残し、相談し、コミュニケーションすることを歓迎します！