Flutter中如何将数组列表值传入ListView.builder并完整显示

核心问题原因 #

1. 循环中错误替换列表而非添加元素：在leadCalculation函数里，每次循环都执行firstListItem = [firstNumber.toString()]，这会把整个列表替换成仅包含当前循环值的新列表，最终列表里只剩最后一次循环的数值。
2. ListView.builder写法错误：当前写法中每个列表项都重复调用getList()，且itemCount硬写为101，和实际列表长度不匹配。

步骤1：修复循环添加逻辑 #

修改leadCalculation函数，先清空列表，再用add方法逐个添加元素：

void leadCalculation(){
  // 先清空原有数据，避免重复添加
  firstListItem.clear();
  secondListItem.clear();
  
  for(double i =2; i<101; i++){
    double firstNumber = i;
    // 使用add添加元素，而非替换整个列表
    firstListItem.add(firstNumber.toString());
    double loopField = finalPitchDia * firstNumber;
    secondListItem.add(loopField.toStringAsFixed(3));
    print('$firstListItem : $secondListItem');
  }
  Navigator.push(context, MaterialPageRoute(builder: (_)=>ItemList()));
}

步骤2：修复ListView.builder的实现 #

修改ItemList页面的代码，直接利用列表长度作为itemCount，并在itemBuilder中根据索引获取对应元素：

import 'package:flutter/material.dart';
import 'package:milling_machine_calculator/layout/const_sizes.dart';
import 'package:milling_machine_calculator/views/pages/global.dart';

class ItemList extends StatefulWidget {
  const ItemList({Key? key}) : 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(
        // 使用firstListItem的实际长度作为itemCount
        itemCount: firstListItem.length,
        itemBuilder:(BuildContext context, int index){
          return Container(
            height: size.height / 10,
            width: size.width/1.36,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: const Offset(0,3),
                ),
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(firstListItem[index],style: fieldsText,),
                const SizedBox(width: 10.0,),
                // 对应显示secondListItem的元素
                Text(secondListItem[index],style: fieldsText,),
              ],
            ),
          );
        },
      ),
    );
  }
}

额外优化建议 #

尽量避免使用全局变量传递数据，推荐通过页面跳转参数传递：

1. 在leadCalculation中传递列表参数：

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

2. 修改ItemList接收并使用参数：

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

  const ItemList({Key? key, required this.firstList, required this.secondList}) : 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(
        itemCount: widget.firstList.length,
        itemBuilder:(context, index){
          return Container(
            height: size.height / 10,
            width: size.width/1.36,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: const Offset(0,3),
                ),
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(widget.firstList[index],style: fieldsText,),
                const SizedBox(width: 10.0,),
                Text(widget.secondList[index],style: fieldsText,),
              ],
            ),
          );
        },
      ),
    );
  }
}

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