動態

詳情 返回 返回

flutter,checkbox例子,三狀態的checkbox,選中、未選中、半選 - 動態 詳情

代碼如下:

import 'package:flutter/material.dart';

class TestPageCheckboxDemo extends StatefulWidget {
  const TestPageCheckboxDemo({super.key});

  @override
  State<TestPageCheckboxDemo> createState() => _TestPageCheckboxDemoState();
}

class _TestPageCheckboxDemoState extends State<TestPageCheckboxDemo> {
  final Klass aaa = Klass(
    id: 1,
    isChecked: null,
    items: [
      Klass(id: 2, isChecked: true),
      Klass(id: 3, isChecked: true),
      Klass(id: 4, isChecked: false),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
          key: ValueKey(aaa.id),
          tristate: true,
          value: aaa.isChecked,
          onChanged: (value) {
            bool isChecked = aaa.isChecked == true ? false : true;
            _handleCheckedGroup(aaa, isChecked);
          },
        ),
        Text('全選'),
        SizedBox(width: 20),
        for (var c in aaa.children)
          Checkbox(
            key: ValueKey(c.id),
            value: c.isChecked,
            onChanged: (val) {
              setState(() {
                c.isChecked = val!;
                _updateGroupChecked(aaa);
              });
            },
          ),
      ],
    );
  }

  // 點擊選中組(分組權限)
  void _handleCheckedGroup(Klass group, bool isChecked) {
    setState(() {
      group.isChecked = isChecked;
      for (var item in group.children) {
        item.isChecked = isChecked;
      }
    });
  }

  /// 被動設置分組選中狀態
  void _updateGroupChecked(Klass group) {
    bool? isAllChecked = false;
    var items = group.children;
    if (items.isNotEmpty) {
      if (items.every((i) => i.isChecked!)) {
        isAllChecked = true;
      } else if (items.every((i) => !i.isChecked!)) {
        isAllChecked = false;
      } else {
        isAllChecked = null;
      }
    }
    group.isChecked = isAllChecked;
  }
}

class Klass {
  int id;
  bool? isChecked;

  List<Klass> children;

  Klass({required this.id, this.isChecked, List<Klass>? items}) : children = items ?? [];
}

user avatar hhsk 頭像 mybj123 頭像 ducafecat 頭像
點贊 3 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.