Flutter齿轮计算器第二页数据不更新问题求助

问题根源 #

1. 全局列表firstListItem/secondListItem/thirdListItem仅做追加操作，未清空历史数据，导致新结果叠加在旧数据后
2. 第二页直接依赖全局变量，无状态监听机制，无法感知数据更新
3. 第一页leadCalculation中的setState仅作用于当前页面，对第二页无刷新效果

修复步骤 #

1. 计算前清空历史数据 #

在leadCalculation方法的循环逻辑前，添加列表清空操作，确保每次计算都是全新数据：

void leadCalculation(int index) {
 setState(() {
   // 清空历史数据
   firstListItem.clear();
   secondListItem.clear();
   thirdListItem.clear();
   
   print('final dia$finalPitchDia');
   for(double i =2; i<101; i++){
     // 原有循环计算代码保持不变
     double driver = i;
     firstListItem.add(driver.toString());
     double loopField = finalPitchDia * driver;
     double driven = loopField.roundToDouble();
     secondListItem.add (loopField.toStringAsFixed(3));
     double cal1 = (driven / driver) * 10;
     double cal2 = (finalPitchDia2 * pi) / cal1;
     String cal2parse = cal2.toStringAsFixed(3);
     double cal2parse2 = double.parse(cal2parse);
     double invT = (Angle.atan(cal2parse2).degrees);
     thirdListItem.add(invT.toStringAsFixed(3));
   }
   Navigator.push(context, MaterialPageRoute(builder: (_)=>itemList()));
 });
}

2. 通过构造函数传递数据（替代全局变量） #

修改第二页代码，通过构造函数接收计算结果，避免依赖全局状态：

class itemList extends StatefulWidget {
  final List<String> firstList;
  final List<String> secondList;
  final List<String> thirdList;

  const itemList({
    Key? key,
    required this.firstList,
    required this.secondList,
    required this.thirdList,
  }) : super(key: key);

  @override
  State<itemList> createState() => _itemListState();
}

class _itemListState extends State<itemList> {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('Lead gears list', style: appBarText),
        backgroundColor: Colors.blue,
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.all(5.0),
            child: Container(
              padding: EdgeInsets.all(5.0),
              margin: EdgeInsets.only(left: 5.0, right: 5.0),
              height: size.height / 8,
              width: size.width,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: const Offset(0,3),
                  ),
                ],
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        height: size.height / 27,
                        width: size.width / 6,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Center(child: Text('Driver',style: fieldsText2,)),
                      ),
                      const SizedBox(width: 75.0,),
                      Container(
                        height: size.height / 27,
                        width: size.width / 6,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Center(child: Text('Driven',style: fieldsText2,))),
                      const SizedBox(width: 75.0,),
                      Container(
                        height: size.height / 27,
                        width: size.width / 6,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Center(child: Text('Degree',style: fieldsText2,)),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10.0,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(widget.firstList[index],style: fieldsText,),
                      const SizedBox(width: 50.0,),
                      Text(widget.secondList[index],style: fieldsText,),
                      const SizedBox(width: 50.0,),
                      Text(widget.thirdList[index],style: fieldsText,),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
        itemCount: widget.firstList.length,
      ),
    );
  }
}

同时修改第一页的跳转代码，传递最新计算的列表：

Navigator.push(context, MaterialPageRoute(builder: (_)=>itemList(
  firstList: firstListItem,
  secondList: secondListItem,
  thirdList: thirdListItem,
)));

3. 可选优化：移除全局变量（推荐） #

将全局的firstListItem/secondListItem/thirdListItem移至第一页的_MillingState类中作为局部变量，避免全局状态污染：

class _MillingState extends State<Milling> {
  // 原有控制器和变量不变
  List<String> firstListItem = [];
  List<String> secondListItem = [];
  List<String> thirdListItem = [];

  // 后续代码中使用这些局部变量替代全局变量
}

内容的提问来源于stack exchange，提问作者Huzaifa Adil