flutter ValueNotifier()

import 'package:flutter/material.dart';
import 'package:flutter_app/widget/app_bar.dart';

import '../SlideRightRoute.dart';
import 'dressing_by_screening_list.dart';

class DressingByScreening extends StatefulWidget {
  final String title;

  const DressingByScreening(
    this.title, {
    Key? key,
  }) : super(key: key);

  @override
  State<DressingByScreening> createState() => _DressingByScreeningState();
}

class _DressingByScreeningState extends State<DressingByScreening> {
   final  numDefault = 9999;
   late ValueNotifier<int> warpMyIndex , warpStateIndex , warpDiseaseIndex ,warpMethodIndex ;
  int buttonContainer = 2;
  var list1 = ["a", "b是滴是时滴", "c", "d的方式方法都是"];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //这里初始化ValueNotifier
    warpMyIndex = ValueNotifier(numDefault);
    warpStateIndex = ValueNotifier(numDefault);
    warpDiseaseIndex = ValueNotifier(numDefault);
    warpMethodIndex = ValueNotifier(numDefault);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    //离开页面时关闭ValueNotifier，
    warpMyIndex.dispose();
    warpStateIndex.dispose();
    warpDiseaseIndex.dispose();
    warpMethodIndex.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: myAppBar(widget.title, () {
        Navigator.pop(context);
      },
      backgroundColor: Color(0xffEFF3F8),
      ),
      body: Stack(
        children: [
          ListView(
            children: [
              GestureDetector(
                child: Container(
                  alignment: Alignment.center,
                  width: screenWidth,
                  height: 70,
                  color: Color(0xffEFF3F8),
                  child: Container(
                    padding: EdgeInsets.only(left: 20),
                    alignment: Alignment.centerLeft,
                    height: 50,
                    width: screenWidth - 40,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    margin: EdgeInsets.only(right: 20,left: 20),
                    child: Text("标段、检查名称、项目、检查",style: TextStyle(color: Color(0xffBFBFBF)),),

                  ),
                ),
                onTap: (){
                  Navigator.push(
                    context,
                    SlideRightRoute(
                      page: const DressingByScreeningList(
                          "title"
                      ),
                    ),
                  );
                },
              ),
              GridViewContainer("我的",list1,warpMyIndex),
              GridViewContainer("状态",list1,warpStateIndex),
              GridViewContainer("来源",list1,warpDiseaseIndex),
              GridViewContainer("处理",list1,warpMethodIndex),


              const SizedBox(
                height: 80,
              )
            ],
          ),
          Positioned(
            bottom: 0,
            right: 0,
            left: 0,
            child: Container(
              decoration: const BoxDecoration(boxShadow: [
                BoxShadow(
                    color: Colors.black12,
                    offset: Offset(0, 1), //阴影y轴偏移量
                    blurRadius: 15, //阴影模糊程度
                    spreadRadius: 2 //阴影扩散程度
                    ),
                BoxShadow(
                    color: Colors.white,
                    offset: Offset(-1, 0), //阴影y轴偏移量
                    blurRadius: 2, //阴影模糊程度
                    spreadRadius: 0 //阴影扩散程度
                    ),
              ]),
              width: screenWidth,
              height: 80,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  GestureDetector(
                    child: Container(
                      child: Text(
                        "重置",
                        style: TextStyle(
                            color: buttonContainer == 0
                                ? Colors.white
                                : Color(0XFF0075FF)),
                      ),
                      width: (screenWidth - 40 - 20) / 2,
                      height: 50,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: buttonContainer == 0 ? Color(0XFF0075FF):Colors.white,
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color: Color(0XFF0075FF), width: 1),
                      ),
                    ),
                    onTap: (){
                      warpMyIndex.value = 9999;
                      warpStateIndex.value = 9999;
                      warpDiseaseIndex.value = 9999;
                      warpMethodIndex.value = 9999;
                      setState(() {
                        buttonContainer = 0;
                      });
                    },
                  ),
                  GestureDetector(
                    child: Container(
                      child: Text(
                        "完成",
                        style: TextStyle(
                            color: buttonContainer == 1
                                ? Colors.white
                                : Color(0XFF0075FF)),
                      ),
                      width: (screenWidth - 40 - 20) / 2,
                      height: 50,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: buttonContainer == 1 ?Color(0XFF0075FF):Colors.white,
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color: Color(0XFF0075FF), width: 1),
                      ),
                    ),
                    onTap: (){
                      setState(() {
                        buttonContainer = 1;
                      });
                    },
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

//这是Widget的简单封装，
  Widget GridViewContainer(String containerTitle,List list,ValueNotifier<int> warpIndexValue) {
    var screenWidth = MediaQuery.of(context).size.width;
    return ValueListenableBuilder(valueListenable: warpIndexValue, builder: (c,warpIndex,child){
      return Column(
        children: [
          Container(
            alignment: Alignment.bottomLeft,
            margin: const EdgeInsets.only(top: 10, left: 20, bottom: 3),
            child: Text(
              containerTitle,
              style: const TextStyle(color: Color(0xff999999)),
            ),
          ),
          GridView.builder(
            padding: const EdgeInsets.only(right: 20, left: 20),
            itemCount: list.length,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            scrollDirection: Axis.vertical,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              mainAxisExtent: 50,
            ),
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                child: Container(
                  margin: EdgeInsets.only(bottom: 10),
                  height: 40,
                  width: (screenWidth - 40 - 20) / 3,
                  child: Stack(
                    children: [
                      Container(
                        height: 40,
                        alignment: Alignment.center,
                        width: (screenWidth - 40 - 20) / 3,
                        child: Text(
                          list[index],
                          textAlign: TextAlign.center,
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              height: 1.3,
                              fontSize: list[index].length > 5 ? 13 : 17,
                              color: warpIndex == index
                                  ? Colors.white
                                  : Color(0xff1A1A1A),
                              fontWeight: FontWeight.w400),
                        ),
                        decoration: BoxDecoration(
                          color: warpIndex == index
                              ? Color(0XFF0075FF)
                              : Colors.white,
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                              color: warpIndex == index
                                  ? Color(0XFF0075FF)
                                  : Color.fromARGB(255, 217, 217, 217),
                              width: 1),
                        ),
                      ),
                      warpIndex == index
                          ? Positioned(
                        child: Container(
                          width: 12,
                          height: 12,
                          child: const Icon(
                            Icons.check,
                            size: 12,
                            color: Colors.white,
                          ),
                          decoration: const BoxDecoration(
                            color: Color(0xff24B383),
                            borderRadius: BorderRadius.only(
                                bottomRight: Radius.circular(4),
                                topLeft: Radius.circular(4)),
                          ),
                        ),
                        left: (screenWidth - 40 - 20) / 3 - 12,
                        bottom: 0,
                      )
                          : Container()
                    ],
                  ),
                ),
                onTap: () {
                  // setState(() {
                  //   warpIndex = index;
                  // });
                  warpIndexValue.value = index;
                },
              );
            },
          )
        ],
      );
    });
  }



}