如何根據用戶單擊的項目返回不同的 Sliver 而無需重建整個 StatefullWidget

Question

正如我在標題中所說的那樣，我遇到了一個問題，主要是關於條子並根據單擊的菜單項（SliverListView）顯示不同的條子。

ListMenu.dart

class _ListMenuState extends State<ListMenu> {


  final List<Widget> _menuItemsReturn =
  [
    MyApp(),
    AnimeListPage(),
    LastEpisodes(), 
    Announces(), 
    MostRated(), 
    Newest(), 
    Favourite(),
    ToWatch(), 
    Settings()
  ];

  Widget _gestureClickMenuItem(int index, String menuItemName , IconData ico)
  {
    return       
      GestureDetector(
        onTap: () => null,
        // Navigator.of(widget.context).push(MaterialPageRoute( builder: (b) => _menuItemsReturn[index])),
        child: mostWatched(widget.screenWidth, ico , Colors.white, menuItemName),
      );
  }



  @override
  Widget build(BuildContext context) {

  List<Widget> _menuItems = 
  [
      SizedBox(width: 2,),

      _gestureClickMenuItem(0, 'Home' ,       Icons.home),
      _gestureClickMenuItem(1, 'Animes' ,     Icons.video_library),
      _gestureClickMenuItem(2, 'Last Eps' ,   Icons.poll),
      _gestureClickMenuItem(3, 'Announces' ,  Icons.announcement),
      _gestureClickMenuItem(4, 'M. Rated' ,   Icons.star_border),
      _gestureClickMenuItem(5, 'Newest' ,     Icons.fiber_new),
      _gestureClickMenuItem(6, 'Favourite' ,  Icons.favorite),
      _gestureClickMenuItem(7, 'To Watch' ,   Icons.schedule),
      _gestureClickMenuItem(8, 'Settings' ,   Icons.settings),

      SizedBox(width: 2,),

  ];

    return SliverPersistentHeader
    (
      pinned: true,
      //floating: true,

      delegate: SliverAppBarDelegate(
        maxHeight: 60,
        minHeight: 60,
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: mainBgColor ,
          ),

          child: ScrollablePositionedList.builder(
            itemCount: 11,
            initialScrollIndex: widget.scrollTo,
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.all(5),
            itemBuilder: (b, ind)
            {
              return _menuItems[ind];
            },

          ),
        )
      ),
    );
  }
}

ListMenu 基本上返回一個包含 [Home... AnimeList...etc] 的水平 listView..

我的MainScrollView.dart

  return CustomScrollView(
                slivers: <Widget>
                [
                  MySliverAppBar(height: widget.sc_height / 3), // this is a persistent SliverAppBar
                  ListMenu(widget.sc_width, context, 0),

                  // What i want to achieve is returning either MyDynamicSliver() or MyDynamicSliver2().. etc
                  // depending on which _gestureClickMenuItem() the user clicked and ofcours without the need to rebuild everything from 0 ..
                  // because rebuilding everything is same as just doing Navigator.of(cntx).push .. which is not my goal .
                  MyDynamicSliver(),
                ],
              );

任何可能的解決方案，無論是否與 Slivers 相關，都可以接受，謝謝。

Answer 1

嘗試使用 StatefulBuilder 小部件：

在 builder 參數中，傳入一個上下文和一個 StateSetter。 你可以隨意命名它。

當需要重建小部件時，只需調用您的 StateSetter。

前任：

return: StatefulBuilder(

//You can name the StateSetter anything you want. In this case, it's setState
        builder: (BuildContext context, StateSetter setState) {
          return FlatButton(
            child: Text("Set Your State"),
            onPressed: () => setState();
          );
        }),