当我向列表视图添加元素时，如何在 Flutter 中更新列表视图？答案

【问题标题】：When I add elements to listview, how to update listview in Flutter?当我向列表视图添加元素时，如何在 Flutter 中更新列表视图？
【发布时间】：2021-07-17 17:09:39
【问题描述】：

我是 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。

【问题讨论】：

标签： flutter listview mobile

【解决方案1】：

您必须将您的小部件转换为 StatefulWidget，然后使用 setState 重建它（有关管理状态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]),
          ),
        );
      },
    );
  }
}

【讨论】：

您的回答可能是正确的，但我无法与我的合并。 android开发后对我来说真的很复杂。 :( 如果您能说一些对我非常好的东西，我将添加我的最后一个代码作为答案
更新了答案，祝你好运：）flutter真的很有趣！
你真的是救命稻草。谢谢！！

【解决方案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();
  }
}

【讨论】：