flutter - BottomNavigationBar 页面更改导致 StreamBuilder 数据重新加载

Question

内底部导航 我有 2 页。第一页从网络加载数据并显示在 SliverList 和显示静态列表数据的另一个页面中。

从第 1 页移动到第 2 页然后第 1 页后，所有网络数据都消失了。我已经使用了 PageStorageKey，但仍然无法正常工作。但第二页从未重新加载。

为什么第一页没有保存其具有 StreamBuilder 的状态？

我的代码:

底部导航页面:

class MainActivity extends StatefulWidget {
  @override
  _MainActivityState createState() => _MainActivityState();
}

class _MainActivityState extends State<MainActivity> {

  final Key keyHome = PageStorageKey('pageHome');
  final Key keyChat = PageStorageKey('pageChat');

  int currentTab = 0;

  HomePage home;
  Chat chat;
  List<Widget> pages;
  Widget currentPage;

  final PageStorageBucket bucket = PageStorageBucket();
  @override
  void initState(){
    home = HomePage(

      key: keyHome,
    );
    chat = Chat(
      key: keyChat,
    );
    pages = [home, chat];
    currentPage = home;

    super.initState();
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(
        child: currentPage,
        bucket: bucket,),
      //Bottom Navigation Bar added
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentTab,
        onTap: (int index){
          setState(() {
            currentTab = index;
            currentPage = pages[index];
          });
        },
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('Chat')),
          BottomNavigationBarItem(
              icon: Icon(Icons.payment), title: Text('Pay')),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), title: Text('Me')),
        ],
        //currentIndex: _selectedIndex,
        fixedColor: Colors.deepPurple,
      ),
    );
  }
}

首页:

class HomePage 扩展了 StatefulWidget {
主页({
key key ，
}) : super(key: key);
@覆盖
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>{
  @override
  Widget build(BuildContext context) {

    final NewsCatalogBlog newsBloc = BlocProvider.of<NewsCatalogBlog>(context);

    //bloc.fetchAllNews();
    return Scaffold(
      appBar: PreferredSize(child: HomePageGradientAppBar(),
        preferredSize: const Size.fromHeight(100.0),),

      body: StreamBuilder(
        stream: newsBloc.outNewsList,
        builder: (context, AsyncSnapshot<List<Data>> snapshot) {
          Widget newsList;

          newsList = new SliverList(
            delegate: new SliverChildBuilderDelegate((context,index){
              print("$index");
              return NewsListRow(snapshot.data, newsBloc, index);
            },
                childCount: (snapshot.data == null ? 0 : snapshot.data.length) + 30),
          );

          return new CustomScrollView(
            slivers: <Widget>[
              SliverToBoxAdapter(child: TabPanel(),),
              SliverToBoxAdapter(child: UrlButtonPanel(),),
              SliverToBoxAdapter(child: ChatNowAd(),),
              newsList,
            ],
          );
        },
      ),
    );
  }
}

聊天页面:

class Chat 扩展 StatelessWidget {
聊天({
key key ，
}): super (键:键)；

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 250.0,
      itemCount: 20,
      itemBuilder: (context, index) => Container(
        padding: EdgeInsets.all(10.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(5.0),
          color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
          child: Center(
            child: Text('Mir{$index}'),
          ),
        ),
      ),
    );
  }


}

Answer 1

更好的方法是使用 索引堆栈 而不是 PageStorage 或 AutomaticKeepAliveClientMixin。

 class _MainActivityState extends State<MainActivity> {

  int _selectedPage = 0;
  List<Widget> pageList = List<Widget>();

  @override
  void initState() {
    pageList.add(HomePage());
    pageList.add(ChatPage());
    super.initState();
  }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: IndexedStack(
        index: _selectedPage,
        children: pageList,
      ),
      //Bottom Navigation Bar added
      bottomNavigationBar: BottomNavigationBar(
    .....

** IndexedStack Widget 是 Stack Widget 的子类
它显示了提供的 Childs 列表中的单个 child 。
它的大小和最大的 child 一样大。
它保持所有 child 的状态。 **