ListView两次显示项目

Question

我正在尝试使用以下方法构建一个列表视图：

预期功能是列表视图一次应显示1个项目。

class SimpleContentScreen extends StatefulWidget {
  @override
  _SimpleContentScreenState createState() => _SimpleContentScreenState();
}

class _SimpleContentScreenState extends BaseState<SimpleContentScreen> {

  List<SimpleContent> simpleContentList;
  List<SimpleContent> displayList = List();
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {

    simpleContentList = getOOFirstContent();
    displayList.add(simpleContentList[_currentIndex]);

    return Scaffold(
      appBar: buildAppBar("Introduction"),
      body: _buildListView(),
      floatingActionButton: _buildFab(),
    );
  }

  FloatingActionButton _buildFab() => FloatingActionButton(
    onPressed: () {
      if( _currentIndex < simpleContentList.length - 1 ) {
        setState(() {
          _currentIndex = _currentIndex + 1;
          displayList.add(simpleContentList[_currentIndex]);
        });
      }
    },
    child: Icon(Icons.navigate_next),
    foregroundColor: Colors.white,
    backgroundColor: Colors.blueGrey,
  );

  ListView _buildListView() => ListView.builder(
      key: Key("_simple_content_list"),
      itemCount: displayList.length,
      itemBuilder: (context, position) {
        return _buildItemView( displayList[position] );
      }
  );

  _buildItemView(SimpleContent displayList) => Container(
      padding: const EdgeInsets.all(12),
      margin: EdgeInsets.fromLTRB(0, 8, 32, 8),
      decoration: BoxDecoration(color: Colors.blueAccent),
      child : new Text(
          displayList.contentString,
          style: buildTextSimpleContent(20))
  );


}

按FAB键时-它会两次添加项目。为什么是这样？我已经解决了这个问题，方法是清除displayList并将所有项目从0添加到当前索引。

我尝试将键设置为列表视图，但这并不能解决问题。

任何帮助或见识表示赞赏。

Answer 1

setState调用Widget的build方法进行构建

这就是正在发生的事情

点击FAB时会调用

onPressed方法

_currentIndex = _currentIndex + 1;
displayList.add(simpleContentList[_currentIndex]);

这将添加一个新项目

但是随后再次调用build方法 因此，您再次将元素添加到构建方法displayList.add(simpleContentList[_currentIndex]);的列表中

解决方案1 ​​

删除

simpleContentList = getOOFirstContent();
displayList.add(simpleContentList[_currentIndex]);

来自build，并将其添加到initState

解决方案2

删除

displayList.add(simpleContentList[_currentIndex]);

来自setState，因此该元素只能添加一次

有关StateFul小部件生命周期方法的更多详细信息，请参见here