Flutter ListView组件不更新解决办法

方法思路：

通过子组件向父数组传参数方式实现，通过子组件引用父组件方法涵调用父组件的 setState来更新数据，使 ListView 再次渲染。

示例代码：

//主涵
class ListLottery extends StatefulWidget {
  const ListLottery({super.key});

  @override
  State<ListLottery> createState() => _ListLotteryState();
}

class _ListLotteryState extends State<ListLottery> {
  List ArrData = [];//数据列表

  //自定义方法涵 funUpdate 子组件向父组件通信 传参数
  void funUpdate(List arr) { 
    setState(() { //方法涵被调用 更新dom   <=================== 重要方法 由funUpdate驱动更新
      ArrData = arr;
    });
  }

  //生命周期
  @override
  void initState() {
    super.initState();
    //启动时业务请求 。。。。
  }

  @override
  Widget build(BuildContext context) {
    
    /* 独立页面 */
    return Scaffold(
      /* 顶部标题栏目 */
      appBar: AppBar(
        title: Text("列表"),
      ),

      /* body模块 */ //循环列表
      body: Stack(
        children: [

          Container(
            child: ListView.builder( //列表数据
              itemCount: ArrData.length,
              key: UniqueKey(),//随机key 必须
              itemBuilder: (context, i) {
                return Text("不刷新 $i")
              },
            ),
          ),
         
        ],
      ),
    );
  }

}

方法二：生命List时使用函数返回方式

List<Widget>_backDataList() {
    // 声明了一个数组，里面的数据类型是Widget
    List<Widget> list = []; 
    for (var i = 0; i < 10; i++) {
      list.add(ListTile(
        title: Text('我是标题$i'),
      ));
    }
    return list;
  }

方法三：使用List.generate()方法在组件中构建列表（最佳方法）

Container(
        padding: const EdgeInsets.all(15),
        child: Wrap(
          //在 children 中做数组列表循环，使用 List.generate()来实现dom更新
          children: List.generate(widget.Info['arrMax'].length, (i) {
            return Text("data == $i");
          }),
        ),
      ),

1,853 Views

Flutter ListView组件不更新解决办法

linwute

留下评论