将项目动态附加到 ListView

Posted 2023-02-23

【中文标题】将项目动态附加到 ListView

【英文标题】：Append items dynamically to ListView

【发布时间】：2018-12-22 22:10:00

【问题描述】：

我是 Dart 和 Flutter 的新手，并尝试将新项目附加到我的 ListView。我创建了一个递增this.value 的按钮，但没有任何反应。我是否错过了 UI 上的更新调用，这甚至是正确的方法吗？ 由于我将ListView.builder 的值直接返回给build 的调用者，因此我不确定如何获取列表以添加更多项目。非常感谢！

class MyList extends State<MyList> 

... 
int value = 2;

@override
Widget build(BuildContext context) 
return ListView.builder(
    itemCount: this.value,
    itemBuilder: (context, index) => this._buildRow(index)
);

TL;DR：调用setState 是触发UI 更新的正确方法吗？

【参考方案1】：

调用setState 是触发UI 更新的正确方法。

来自docs：

调用 setState 通知框架内部状态 此对象的更改方式可能会影响用户界面 在这个子树中，这会导致框架为 这个 State 对象。

如果你只是直接改变状态而不调用 setState， 框架可能不会为此安排构建和用户界面 子树可能不会更新以反映新状态。

这是一个 ListView 的小示例，其中有一个 Button 附加项目。

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(home: MyList()));

class MyList extends StatefulWidget 
  @override
  _MyListState createState() => _MyListState();


class _MyListState extends State<MyList> 
  int value = 2;

  _addItem() 
    setState(() 
      value = value + 1;
    );
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: AppBar(
        title: Text("MyApp"),
      ),
      body: ListView.builder(
          itemCount: this.value,
          itemBuilder: (context, index) => this._buildRow(index)),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: Icon(Icons.add),
      ),
    );
  

  _buildRow(int index) 
    return Text("Item " + index.toString());
  

【讨论】：

太棒了！非常感谢这个例子！像魅力一样工作

但是如果 floatingActionButton 不在 _MyListState 类之外呢？