Flutter复选框组管理插件reactive_checkbox_group的使用

Flutter 复选框组管理插件 reactive_checkbox_group 的使用

reactive_checkbox_group 是一个用于在 Flutter 中使用多个复选框的 Widget。它与 reactive_forms 包结合使用，可以方便地管理和验证复选框组的状态。

示例代码

以下是使用 reactive_checkbox_group 插件的一个完整示例：

import 'package:flutter/material.dart';
import 'package:reactive_checkbox_group/reactive_checkbox_group.dart';
import 'package:reactive_forms/reactive_forms.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 应用的主题。
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.black,
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(title: 'React Checkbox Group Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的主页。它是有状态的，意味着它有一个包含影响其外观字段的状态对象。
  // 这个类是状态的配置。它保留了由父级（在这个例子中是App小部件）提供的值（在这个例子中是标题）并由状态的构建方法使用。小部件子类中的字段总是被标记为"final"。

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 构建标题
  Widget _buildTitle(String title) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 这个方法每次调用setState时都会重新运行，例如上面的_incrementCounter方法。
    // Flutter框架已经被优化以使重建方法快速运行，因此你可以只需重建任何需要更新的东西而不是个别改变小部件实例。
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: ReactiveForm(
        formGroup: FormGroup({
          'hobbies': FormControl<List<String>>(
            value: ['Reading'],
            validators: [Validators.required, Validators.minLength(1)],
          ),
        }),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildTitle('默认行为'),
            ReactiveCheckboxGroupListTile<String, String>(
              controlAffinity: ListTileControlAffinity.leading,
              formControlName: 'hobbies',
              titleBuilder: (context, value) => Text(value),
              options: const ['Reading', 'Running', 'Traveling'],
              minimumOptions: 1,
            ),
            _buildTitle('自定义列表'),
            ListTileTheme(
              horizontalTitleGap: 0,
              child: ReactiveCheckboxGroupListTile<String, String>(
                controlAffinity: ListTileControlAffinity.leading,
                formControlName: 'hobbies',
                titleBuilder: (context, value) => Text(
                  value,
                  style: const TextStyle(fontSize: 12),
                ),
                options: const ['Reading', 'Running', 'Traveling'],
                listBuilder: (context, values) {
                  return Row(
                    children: values
                        .map(
                          (e) => Expanded(
                            child: e,
                          ),
                        )
                        .toList(),
                  );
                },
              ),
            ),
            _buildTitle('带有最小选项数量'),
            ReactiveCheckboxGroupListTile<String, String>(
              controlAffinity: ListTileControlAffinity.leading,
              formControlName: 'hobbies',
              titleBuilder: (context, value) => Text(value),
              options: const ['Reading', 'Running', 'Traveling'],
              minimumOptions: 1,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入包：

   import 'package:flutter/material.dart';
   import 'package:reactive_checkbox_group/reactive_checkbox_group.dart';
   import 'package:reactive_forms/reactive_forms.dart';
   

2. 主应用：

   void main() {
     runApp(const MyApp());
   }
   

3. 应用主题：

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(
             seedColor: Colors.black,
             brightness: Brightness.dark,
           ),
           useMaterial3: true,
           brightness: Brightness.dark,
         ),
         home: const MyHomePage(title: 'React Checkbox Group Example'),
       );
     }
   }
   

4. 主页状态：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 构建标题：

   Widget _buildTitle(String title) {
     return Padding(
       padding: const EdgeInsets.all(8.0),
       child: Text(
         title,
         style: const TextStyle(
           fontSize: 20,
           fontWeight: FontWeight.bold,
         ),
       ),
     );
   }
   

6. 构建页面主体：

   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text(widget.title)),
         body: ReactiveForm(
           formGroup: FormGroup({
             'hobbies': FormControl<List<String>>(
               value: ['Reading'],
               validators: [Validators.required, Validators.minLength(1)],
             ),
           }),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               _buildTitle('默认行为'),
               ReactiveCheckboxGroupListTile<String, String>(
                 controlAffinity: ListTileControlAffinity.leading,
                 formControlName: 'hobbies',
                 titleBuilder: (context, value) => Text(value),
                 options: const ['Reading', 'Running', 'Traveling'],
                 minimumOptions: 1,
               ),
               // 其他部分省略...
             ],
           ),
         ),
       );
     }
   }