玖叶教程网

BottomNavigationBar作为底部导航栏架构，一般会遇到底部状态不保存和子widget重新刷新数据的问题，这两个问题虽然不大，但影响体验。

1.从其它界面返回BottomNavigationBar时，底部状态无法保持。

2.底部切换子widget时，需要保持子widget数据，不需要切换一次，刷新一次数据。

不但在响应体验感觉不好，最好是 BottomNavigationBar的子widget切换一次后，不在请求新数据。

一般刚写BottomNavigationBar时，都是这样写的。

? ?List<Widget>?listViews?=?[

????Page01(),

????Page02(),

????Page03(),

??];

??int?_index?=?0;

Widget?bottomNavigationBarView(){

rerurn listViews[_index],

      bottomNavigationBar: BottomNavigationBar(

        items: [

          BottomNavigationBarItem(

            icon: Icon(

              Icons.home,

              color: _index == 0 ? Colours.main_01 : Colors.grey,

              size: 24,

            ),

            title: WidgetUtils.getTextColorView(

                'Page01',

                _index == 0 ? Colours.main_01 : Colors.grey,

                Dimens.FONT_SIZE_16),

          ),

          BottomNavigationBarItem(

            icon: Icon(

              Icons.broken_image,

              color: _index == 1 ? Colours.main_01 : Colors.grey,

              size: 24,

            ),

            title: WidgetUtils.getTextColorView(

                'Page02',

                _index == 1 ? Colours.main_01 : Colors.grey,

                Dimens.FONT_SIZE_16),

          ),

          BottomNavigationBarItem(

            icon: Icon(

              Icons.apps,

              color: _index == 2 ? Colours.main_01 : Colors.grey,

              size: 24,

            ),

            title: WidgetUtils.getTextColorView(

                'Page03',

                _index == 2 ? Colours.main_01 : Colors.grey,

                Dimens.FONT_SIZE_16),

          ),

        ],

        currentIndex: _index,

        type: BottomNavigationBarType.fixed,

        onTap: (int index) {

          setState(() {

            _index = index;

          });

        },

      ),}

解决第一个问题：需要用到BottomNavigationBar + IndexedStack来解决，当然还有其他解决方案，这里就不在阐述。

具体代码如下

Widget?bottomNavigationBarView(){

rerurn IndexedStack(

??????????index:?_index,

??????????children:?listViews,

????????),

      bottomNavigationBar: BottomNavigationBar(

        items: [

          BottomNavigationBarItem(

            icon: Icon(

              Icons.home,

              color: _index == 0 ? Colours.main_01 : Colors.grey,

              size: 24,

            ),

            title: WidgetUtils.getTextColorView(

                'Page01',

                _index == 0 ? Colours.main_01 : Colors.grey,

                Dimens.FONT_SIZE_16),

          ),

          BottomNavigationBarItem(

            icon: Icon(

              Icons.broken_image,

              color: _index == 1 ? Colours.main_01 : Colors.grey,

              size: 24,

            ),

            title: WidgetUtils.getTextColorView(

                'Page02',

                _index == 1 ? Colours.main_01 : Colors.grey,

                Dimens.FONT_SIZE_16),

          ),

          BottomNavigationBarItem(

            icon: Icon(

              Icons.apps,

              color: _index == 2 ? Colours.main_01 : Colors.grey,

              size: 24,

            ),

            title: WidgetUtils.getTextColorView(

                'Page03',

                _index == 2 ? Colours.main_01 : Colors.grey,

                Dimens.FONT_SIZE_16),

          ),

        ],

        currentIndex: _index,

        type: BottomNavigationBarType.fixed,

        onTap: (int index) {

          setState(() {

            _index = index;

          });

        },

      ),}

第2个解决方案 AutomaticKeepAliveClientMixin

解决widget切换刷新的问题

class?_Page01State?extends?State<Page01> with?AutomaticKeepAliveClientMixin?{

?@override

??bool?get?wantKeepAlive?=>?true;

}

Flutter中为了节约内存而不去保存widget的状态。另外AutomaticKeepAliveClientMixin对BottomNavigationBar是无效的。