动态向ListView添加项目

Question

我刚接触 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更新的正确方式吗？

- Daniel Stephens

Answer 1

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

来自文档:

调用 setState 会通知框架该对象内部状态已更改，可能会影响此子树中的用户界面， 这将导致框架为此State对象安排一次重建。

如果您直接更改状态而不调用 setState，则框架可能不会安排重建，因此此子树的用户界面可能无法更新以反映新状态。

这是一个带有Button的小例子，可以向其中添加项目的ListView：

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());
  }
}

- Mans

---

太棒了！非常感谢提供示例！运行得非常好。 - Daniel Stephens

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

这也会重建已添加的行，对吗？有没有办法避免这种情况，只在ListView中构建新的行，以保持其轻量级？ - aceBox