當我向列表視圖添加元素時，如何更新 Flutter 中的列表視圖？

Question

我是 flutter 的新手，我想每 5 秒在我的列表視圖中添加一次元素。 我有列表視圖，我認為我有真正的添加方法。 但是，我不知道如何每 5 秒更新一次列表視圖。

void randomCity(){

  List <int> colors = [yellow,green,blue,red,black,white];
  List <String> countryNames = ["Gdańsk","Warszawa","Poznań","Białystok","Wrocław","Katowice","Kraków"];
  List <String> countryImages = [gdanskPic,warszawaPic,poznanPic,bialystokPic,wroclawPic,katowicePic,krakowPic];

  Random random = new Random();
  DateTime now = new DateTime.now();

  Future.delayed(Duration(seconds: 5), (){
    setState(() {
      int randomCity = random.nextInt(countryNames.length);
      int randomColor = random.nextInt(colors.length);

      countrylist.add(Country(
          countryNames[randomCity], countryImages[randomCity],
          colors[randomColor], now.toString()));

    });
    });
}

在這段代碼中，我將新元素添加到我的列表視圖中。

randomCity();
return Scaffold(
    backgroundColor: Colors.grey[100],
    appBar: AppBar(
      backgroundColor: Colors.grey[100],
      elevation: 0.0,
      title: Text(
        "Random City App",
        style: TextStyle(fontSize: 20.0, color: Colors.black),
      ),
      centerTitle: true,
      actions: <Widget>[
        IconButton(
            icon: Icon(
              Icons.add,
              color: Colors.black,
              size: 32,
            ),
            onPressed: () {})
      ],
    ),
    body: ListView.builder(
      itemCount: countrylist.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => CountryDetails(countryName: countrylist[index].name,
                    appBarColor: countrylist[index].color, date: countrylist[index].date, image: countrylist[index].image,))
              );
            },
            title: Text(countrylist[index].name + "   ${countrylist[index].date}"),
            tileColor: Color(countrylist[index].color),
          ),
        );
      },
    ));

}

這是我的 ListView.Builder。

Answer 1

您必須將小部件轉換為 StatefulWidget，然后使用 setState 重建它（有關管理 state https 的方法的更多信息：//flutter.dev/docs/development/data-and-backend/state-mgmt/options ）

class MyApp extends StatelessWidget { // your main widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}


class MyWidget extends StatefulWidget { // create new StatefulWidget widget
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<Country> countrylist = []; // mover other variables in here
  ...
  void randomCity(){
    ...
    setState(() {}); // this will rebuild your widget again and again
  }

  @override
  Widget build(BuildContext context) {
  Future.delayed(Duration(seconds: 5), (){
    randomCity();
    }); 
     
    return ListView.builder(
      itemCount: countrylist.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            onTap: () {},
            title: Text(countrylist[index]),
          ),
        );
      },
    );
  }
}

Answer 2

您必須告訴 ListView 重建您可以使用 setState 方法執行的操作（如果您使用的是 StefulWidget）。 另外，我會使用 Timer 而不是 Future.delayed 進行定期更新。 這將是您的用例的簡化示例：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer timer;

  final countryNames = ['Germany', 'Croatia', 'Turkey', 'USA'];
  List<String> countryList = [];

  @override
  void initState() {

      Timer.periodic(Duration(seconds: 5), (timer) {
        int randomCity = Random().nextInt(countryNames.length);
        countryList.add(countryNames[randomCity]);
        setState(() {});
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Updater'),
      ),
      body: ListView.builder(
          itemBuilder: (context, index) {
        return Card(
          child: Text(countryList[index]),
        );
      },
      itemCount: countryList.length,
      ),
    );
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }
}