Question

以下代码几乎是来自底部导航栏的官方flutter github示例的复制粘贴。问题是，在包含视图的窗口小部件打开时，所有内容都被预加载。每次按下底栏元素时，我都会重新加载所有视图。换句话说，当我按下第一个项目时，日志显示其他人（第二个和第三个）正在进行网络呼叫。当我按下第二个时，日志显示即使是第一个正在进行网络呼叫。当我调试时，我发现每次从底栏选择一个小部件时，包含它的小部件都会重建（有一个方法调用buid）。这是正常的行为吗？这是包含小部件的代码

class MainScreen extends StatefulWidget{

    @override
      State<StatefulWidget> createState()=> MainScreenState();

}


class MainScreenState extends State<MainScreen> with TickerProviderStateMixin{
      GlobalKey<ScaffoldState> scaffoldState = new GlobalKey();
      int _currentSelection = 0;
      BottomNavigationBarType _navigationBarType = BottomNavigationBarType.fixed;
      Li

    st<NavigationIconView> _navigationIcons;


    @override
      void initState() {


    super.initState();
        _navigationIcons = <NavigationIconView>[
          new NavigationIconView(


    icon: const Icon(Icons.home),
        title: 'Главная',
        vsync: this

      ),
      new NavigationIconView(
        icon: const Icon(Icons.map),
        title: 'Квесты',
        vsync: this
      ),
      new NavigationIconView(
        icon: const Icon(Icons.dehaze),
        title: 'Профиль',
        vsync: this
      )
    ];

    for(NavigationIconView v in _navigationIcons)
      v.controller.addListener(_rebuild);

    _navigationIcons[_currentSelection].controller.value = 1.0;
      }


    @override
      void dispose() {
        for(NavigationIconView v in _navigationIcons)
          v.controller.dispose();
        super.dispose();
    }

     @override
      Widget build(BuildContext context) {
        final BottomNavigationBar botNavBar = new BottomNavigationBar(
          items: _navigationIcons
              .map((NavigationIconView navigationView) => navigationView.item)
              .toList(),
          currentIndex: _currentSelection,
          fixedColor: Colors.green,
          type: _navigationBarType,
          onTap: (int index) {
            setState(() {
              _navigationIcons[_currentSelection].controller.reverse();
              _currentSelection = index;
              _navigationIcons[_currentSelection].controller.forward();
              print('pressed : $_currentSelection');
            });
          },
        );
        return new Scaffold(
          key: scaffoldState,
          body: new  Center(
            key: new Key('Main view container'),
            child: new FutureBuilder<Widget>(
                future: _buildTransitionsStack(),
                builder: (BuildContext context, AsyncSnapshot<Widget> snapshot){
                  if(!snapshot.hasError) return snapshot.data;
                  else{
                    print('sh3t happened in main : ${snapshot.error}');
                  }
                }
            ),
          ),
      bottomNavigationBar: botNavBar,

    );
  }


    Future<Widget> _buildTransitionsStack() {
        final List<FadeTransition> transitions = <FadeTransition>[];

        return _showMain().then((mainWidget){
          transitions.add(_navigationIcons[0]


    .transition(_navigationBarType,mainWidget, context));
          print('size ${transitions.length}');
        }).then((_){
          transitions.add(_navigationIcons[1].transition(_navigationBarType,
              _showQuest(), context));

          transitions.add(_navigationIcons[2].transition(_navigationBarType,
              _showProfile(), context));

          transitions.sort((FadeTransition a, FadeTransition b) {
          final Animation<double> aAnimation = a.opacity;
          final Animation<double> bAnimation = b.opacity;
          final double aValue = aAnimation.value;
          final double bValue = bAnimation.value;
          return aValue.compareTo(bValue);
        });

          return new Stack(children: transitions);
        });
        }

  Future<Widget> _showMain(){
     return _getToken().then((token){
      return new FeedView(token);
    });
  }

  Widget _showQuest(){
//    return DetailableListScreen(ViewModelType.QUEST);

    return new QuestScreen();

  }

  Widget _showProfile(){
    return new Text('profile');
//    TODO
  }


  void _rebuild() {
    setState(() {

    });
  }

  Future<String> _getToken() async{
    return await SharedPreferences.getInstance()
        .then((SharedPreferences sp)=> sp.getString(TOKEN)
    );
  }
}}

Answer 1

切换选项卡时使页面保持活动状态的解决方案是将页面包装在 IndexedStack 中。

class Tabbar extends StatefulWidget {
  Tabbar({this.screens});

  static const Tag = "Tabbar";
  final List<Widget> screens;
  @override
  State<StatefulWidget> createState() {
  return _TabbarState();
  }
}

class _TabbarState extends State<Tabbar> {
  int _currentIndex = 0;
  Widget currentScreen;

  @override
  Widget build(BuildContext context) {
    var _l10n = PackedLocalizations.of(context);

    return Scaffold(
  body: IndexedStack(
    index: _currentIndex,
    children: widget.screens,
  ),
  bottomNavigationBar: BottomNavigationBar(
    fixedColor: Colors.black,
    type: BottomNavigationBarType.fixed,
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    items: [
      BottomNavigationBarItem(
        icon: new Icon(Icons.format_list_bulleted),
        title: new Text(_l10n.tripsTitle),
      ),
      BottomNavigationBarItem(
        icon: new Icon(Icons.settings),
        title: new Text(_l10n.settingsTitle),
      )
    ],
  ),
);
  }

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

Answer 2

我绝对建议您观看 @amrnt 视频。但是对于那些想要直接答案的人，您需要为底部小节的每一页实例化一个PageStorageKey，然后使每一页通过构造函数接收其PageStorageKey。

Answer 3

更好的方法是使用IndexedStack而不是PageStorage或AutomaticKeepAliveClientMixin。

[4, -9, -1, 9, -1, -3, 8, 8, 0, -9, -8, 7, 6, 5, -6, 5, -4, 2, 1, -1, -6, 0, 3, -7, 9, 9, 6, -5, -8, 1, -8, -1, -1]

IndexedStack Widget是Stack Widget的子类它显示了所提供的“孩子”列表中的一个孩子。它的大小和最大的孩子一样大。它会保留所有孩子的状态。

每次按导航项时，底部导航栏都会重新加载所有小部件

3 个答案: