同一个 Statefulwidget 的多个实例似乎共享相同的 State 对象？

Question

我正在尝试使用Flutter构建应用程序，遇到了一个小问题。我正在尝试使用BottomNavigaionBar样式的应用程序，其中包含三个页面。（见第一个片段）布局使用三个“ChorePage”类型的对象。似乎应用程序创建了三个ChorePage实例，但是只创建了_ChorePageState的一个实例。

这导致_dataRows变量在三个选项卡之间共享，这意味着我不能将不同的信息放入不同的选项卡中。为什么会发生这种情况，我该如何防止它?

我已经在createState()函数中放置了print语句，并在每次重建ChorePage时打印PopulateRows函数中的“this”变量。下面的打印输出确认了确实三个组件使用相同的State对象。(createState仅对对象A调用一次且this变量引用相同的对象)

class AppLayout extends StatefulWidget {
  @override
  _AppLayoutState createState() => _AppLayoutState();
}

class _AppLayoutState extends State<AppLayout> {
  int _currentIndex = 0;
  String title = 'Test';

  List<Widget> _children = [
    new ChorePage(Title:'A'),
    new ChorePage(Title:'B'),
    new ChorePage(Title:'C')
  ];

  @override
  Widget build(BuildContext context) {


    //STUFF BEFORE INIT
    return Scaffold(
      appBar: AppBar(
        title: Text('$title'),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items:[
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.sprayBottle),
            title:Text('Menu1'),
          ),
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.glassMugVariant),
            title:Text('Menu2'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.event_note),
            title:Text('Menu3'),
          )
      ]
      ),
    );
  }

  void onTabTapped(int index){
    setState(() {
      _currentIndex = index;
    });
  }
}

任务页面

class ChorePage extends StatefulWidget {
  final String Title;
  const ChorePage({Key key, this.Title}): super(key: key);

  @override
  _ChorePageState createState() {
    print('Creating: '+this.Title);
    return new _ChorePageState();
  }
}

class _ChorePageState extends State<ChorePage> {
  List<DataRow> _dataRows = [];

  @override
  Widget build(BuildContext context) {
    PopulateRows();
    return SingleChildScrollView(
      child:Center(
          child: DataTable(
            columns: [
              DataColumn(label: Text(widget.Title.toString())),
              DataColumn(label: Text('Col1')),
              DataColumn(label: Text('Col2')),
            ],
            rows: _dataRows,
          ),
        ),
    );
  }

  void PopulateRows(){
    print(this);
    print(widget.Title.toString());

    //_dataRows = [];
    for(int i=0;i<1;i++) {
      DataRow R = DataRow(cells:[]);
      R.cells.add(DataCell(Text(widget.Title)));
      R.cells.add(DataCell(Text(i.toString())));
      R.cells.add(DataCell(Text((i + 1).toString())));
      _dataRows.add(R);
    }
  }

}

输出结果:

Installing build\app\outputs\apk\app.apk...
Debug service listening on ws://127.0.0.1:59033/TvJtQ-PN3a8=/ws
Syncing files to device Mi 9T Pro...
I/flutter (28856): Creating: A
I/flutter (28856): _ChorePageState#d1d35
I/flutter (28856): A
I/xxxxxxx.tms_ap(28856): ProcessProfilingInfo new_methods=403 is saved saved_to_disk=1 resolve_classes_delay=8000
I/flutter (28856): _ChorePageState#d1d35
I/flutter (28856): B
I/flutter (28856): _ChorePageState#d1d35
I/flutter (28856): C

- Amdixer

Answer 1

今天我遇到了一个我认为是相同的问题，解决方法是向StatefulWidget构造函数传递一个字符串键值。 因此，在你的例子中：

  List<Widget> _children = [
    new ChorePage(key: Key('A'), Title:'A'),
    new ChorePage(key: Key('B'), Title:'B'),
    new ChorePage(key: Key('C'), Title:'C')
  ];

- Pjotr Gainullin