ListView Builder 在初始化器中只能访问静态成员

Question

嗨，我是 Flutter 的新手

我使用 ListView.Builder 来做这样的事情：

我使用两个小部件，一个用于地址信息，一个用于将新地址项添加到 ListView

我使用回调通知添加 IconButton 被按下但我收到错误：只有静态成员可以在初始化程序中访问。当我调用 addItemToList() 方法时

这是代码：

class TestPage2 extends StatefulWidget {
  @override
  _TestPage2State createState() => _TestPage2State();
}

class _TestPage2State extends State<TestPage2> {
  List<Widget> lwidgets = [
    _Adresses(),
    _HorizontalDivider(),
    _AddElement(() {
      addItemToList();
    })
  ];

  void addItemToList() {
    setState(() {
      lwidgets.insert(lwidgets.length - 1, _Adresses());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contacts'),
      ),
      backgroundColor: Color(0xFFE5E5EA),
      body: Column(
        children: <Widget>[
          Text('ADRESS'),
          Container(
            height: 200,
            child: ListView.builder(
              itemCount: lwidgets.length,
              itemBuilder: (BuildContext context, int index) {
                return (lwidgets[index]);
              },
              physics: NeverScrollableScrollPhysics(),
            ),
          ),
        ],
      ),
    );
  }
}

这是 _AddElement 小部件：

class _AddElement extends StatelessWidget {
  final Function() onAddItem;

  const _AddElement(this.onAddItem);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Container(
            height: 40,
            color: Colors.white,
            child: IconButton(
              icon: Icon(Icons.add_circle),
              iconSize: 24,
              color: Color(0xFF34C759),
              onPressed: () {
                onAddItem();
              },
            ),
          ),
        ],
      ),
    );
  }
}

我希望当我点击绿色按钮时，一个新项目将被添加到 ListView 中，如下所示：

我将不胜感激。

何塞·罗德里格斯

Answer 1

我根据您的代码做了一些修改。您没有包含其他小部件，例如 _Address，所以我添加了一个简单的小部件用于演示

您可以在列表视图构建器上执行 if 语句来检查它是否是最后一个索引，而不是将您的 addelement 小部件附加到列表中。在最后一个索引上，返回一个由 _Address 和 addelement 小部件组成的 Column。 参考附图和代码。

如果这有帮助，请告诉我

     List<Widget lwidgets = [_Address()]

      void addItemToList() {
        setState(() {
          lwidgets.add(_Address());
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Contacts'),
          ),
          backgroundColor: Color(0xFFE5E5EA),
          body: Container(child: Column(
            children: <Widget>[
              Text('ADDRESS'),
              Container(
                height: 200,
                child: ListView.builder(
                  // separatorBuilder: (context, index) => Divider(
                  //   indent: 0,
                  //   endIndent: 0,


                  // ),
                  itemCount: lwidgets.length,
                  itemBuilder: (BuildContext context, int index) {
                    //If its the last index of the lwidget list, append _AddElement under the _addresswidget
                    return index == lwidgets.length - 1
                        ? Column(
                            children: <Widget>[
                              _Address(),
                              _AddElement(addItemToList),
                            ],
                          )
                        : _Address();
                  },
                  physics: NeverScrollableScrollPhysics(),
                ),
              ),
            ],
          ),)
        );
      }
    }

    class _AddElement extends StatelessWidget {
      final Function() onAddItem;

      const _AddElement(this.onAddItem);

      @override
      Widget build(BuildContext context) {
        return Container(
          height: 40,
          color: Colors.white,
          child: Row(
            children: <Widget>[
              Container(
                height: 40,
                color: Colors.white,
                child: IconButton(
                  icon: Icon(Icons.add_circle),
                  iconSize: 24,
                  color: Color(0xFF34C759),
                  onPressed: () {
                    onAddItem();
                  },
                ),
              ),
            ],
          ),
        );
      }
    }

    class _Address extends StatelessWidget {
      const _Address();

      @override
      Widget build(BuildContext context) {
        return Container(
          height: 40,
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Icon(Icons.delete),
              Text('Street Name'),
              Text("postal code"),
            ],
          ),
        );
      }
    }

Initiate phase

1 item added

More Item added

Answer 2

这是另一种方法：

我只将一个 _Adress 小部件放入 lwidgets 并使用 initState 放入 AddElement 小部件

之前

List<Widget> lwidgets = [
    _Adresses(),
    _HorizontalDivider(),
    _AddElement(() {
      addItemToList();
    })
  ];

  void addItemToList() {
    setState(() {
      lwidgets.insert(lwidgets.length - 1, _Adresses());
    });
  }

之后

 List<Widget> lwidgets = [
    _Adress(),
  ];

  @override
  void initState() {
    lwidgets.insert(lwidgets.length, _AddElement(() => {addItemToList()}));
    super.initState();
  }

  void addItemToList() {
    setState(() {
      lwidgets.insert(lwidgets.length - 1, _Adress());
    });
  }

我将 _Horizo​​ntalDivider() 放入 _Adress 小部件