Flutter StatefulWidget下ListView重复输出两次数据如何修复？

问题原因 #

• build方法是Flutter用于构建页面视图的方法，会在页面需要刷新时被框架多次触发，你将批量添加数据的a()方法放在build中，每次触发build都会向已有的data列表后追加1000条数据，自然会出现内容重复的问题。
• StatefulWidget的初始化数据逻辑需要放在initState生命周期方法中执行，该方法仅会在State被首次挂载到组件树时调用一次，不会重复执行。

修复后代码 #

import 'package:cctracker/CCData.dart';
import 'package:flutter/material.dart';

class CCList extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return CCListState();
  }
}

class CCListState extends State<CCList> {

  List<CCData> data = [];
  void a() {
    for (var i = 0; i < 1000; i++) {
      data.add(CCData(name: 'Name', symbol: i.toString(), rank: 1, price: 600000));
    }
  }

  // 新增initState方法，在这里执行初始化逻辑
  @override
  void initState() {
    super.initState();
    a();
  }

  @override
  Widget build(BuildContext context) {
    // 移除build中的a()调用
    return Scaffold(
      appBar: AppBar(
        title: Text('CC Tracker'),
      ),
      body:Container(
          child: ListView(
            children: _buildList(),
          )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => {},
        child: Icon(Icons.refresh),
      ),
    );
  }

  List<Widget> _buildList() {
    return data.map((e) => ListTile(
      subtitle: Text(e.symbol),
      title: Text(e.name),
      leading: CircleAvatar(child: Text(e.rank.toString()),),
      trailing: Text('\$${e.price.toString()}'),
    )).toList();
  }
}

补充注意点 #

如果你后续要实现浮动按钮的刷新功能，调用a()前需要先清空原有数据，避免重复：

void a() {
  // 先清空原有数据
  data.clear();
  for (var i = 0; i < 1000; i++) {
    data.add(CCData(name: 'Name', symbol: i.toString(), rank: 1, price: 600000));
  }
}

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