Flutter ListView组件不更新 解决办法

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");
          }),
        ),
      ),

551 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注