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

Posted 2023-02-23

【中文标题】当我向列表视图添加元素时，如何在 Flutter 中更新列表视图？

【英文标题】：When I add elements to listview, how to update listview in 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。

【参考方案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();