flutter - 来自同一StatefulWidget的新实例的行为

Question

我对同一个类的实例的行为感到困扰。

我制作了StatefulWidget(BodyLayout)类的两个实例。
并通过BottomNavigationBar进行切换

但是，只有BodyLayout的initState()之一被调用。

我对此行为感到困惑，每个实例都共享State ？？？

我要每个initState()分别调用。

请帮忙一些提示。

这些是下面的完整源代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (_) => new MyHomePage(),
        "/browser": (_) => new Text("not use"),
      }
    );
  }
}
class Article{
  String title;
  String url;
  Article();
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title; 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _myLayouts = [];
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _myLayouts = [
      new BodyLayout("latest"),
      new BodyLayout("pop"),
    ];
  }
  void _onItemTapped(int index) {
    print("itemTapped :" +index.toString());
    setState(() {
      _currentIndex = index; 
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      //  title: Text(widget.title),
      ),
      body: _myLayouts[_currentIndex],

      bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('latest'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('pop'),
        ),
      ],
        currentIndex: _currentIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}


class BodyLayout extends StatefulWidget {
  final String mode;
  BodyLayout(this.mode);

  @override
  _BodyLayoutState createState() => _BodyLayoutState();
}
class _BodyLayoutState extends State<BodyLayout>{
  List<Article> articles = [];
  bool loading = true;
  int page = 1;
  @override 
  void initState(){
    super.initState();
    print ("init:" + widget.mode);// this called only one time.....
    _callApi(); // this called only one time.....
  }

  void _callApi() {
    var a = Article();
    a.title = widget.mode;
    a.url = widget.mode;
    articles.add(a);
    setState((){
      loading = false;
    });
  }
  @override
  Widget build(BuildContext context) {
    if(loading) {
      return CircularProgressIndicator();
    }
    return ListView.builder(
      itemCount: articles.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(articles[index].title),
        );
      },
    );
  }
}

Answer 1

I am confused by this behavior , State is shared each instances???

是的。您需要为窗口小部件提供唯一键:

class BodyLayout extends StatefulWidget {
  BodyLayout(this.mode, {Key key}) : super(key: key);

...
    _myLayouts = [
      new BodyLayout("latest", key: Key('1')),
      new BodyLayout("pop", key: Key('2')),
    ];

和BAM-它的工作原理:

I/flutter (12871): init:latest
I/flutter (12871): itemTapped :1
I/flutter (12871): init:pop

从文档:

A StatefulWidget keeps the same State object when moving from one location in the tree to another if its creator used a GlobalKey for its key.

因此，基本上，如果您的小部件具有相同的键(或没有键)，则它们将被解释为相同的小部件。