美文网首页
flutter BottomNavigationBar切换页面保

flutter BottomNavigationBar切换页面保

作者: tongyuling | 来源:发表于2021-07-29 14:59 被阅读0次
BottomNavigationBar+List<Widget>无法实现,BottomNavigationBar+PageView可以。写法如下:
///BottomNavigationBar+PageView切换页面保持状态不变
class TabbarPage extends StatefulWidget {
  const TabbarPage({Key? key}) : super(key: key);

  @override
  _TabbarPageState createState() => _TabbarPageState();
}

class _TabbarPageState extends State<TabbarPage> {

  late int _currentIndex;
  late List<Widget> _pages;
  late PageController _controller;

  List<BottomNavigationBarItem> getItems(){
    return [
      BottomNavigationBarItem(
        icon: Image.asset(R.assetsImgXingxing, width: 20, height: 20, color: Colors.grey,),
        activeIcon: Image.asset(R.assetsImgXingxing, width: 20, height: 20, color: Colors.blue,),
        label: 'tabbar1',
      ),
      BottomNavigationBarItem(
        icon: Image.asset(R.assetsImgDun, width: 20, height: 20, color: Colors.grey,),
        activeIcon: Image.asset(R.assetsImgDun, width: 20, height: 20, color: Colors.blue,),
        label: 'tabbar2',
      ),
      BottomNavigationBarItem(
        icon: Image.asset(R.assetsImgTalk, width: 20, height: 20, color: Colors.grey,),
        activeIcon: Image.asset(R.assetsImgTalk, width: 20, height: 20, color: Colors.blue,),
        label: 'tabbar3',
      ),
    ];
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _currentIndex = 0;
    _pages = [
      ///widget
      FultterStart1(),
      FultterStart2(),
      FultterStart3(),
    ];
    _controller = PageController(initialPage: 0);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();

    _controller.dispose();
  }

  void _onTap(int index){
    _controller.jumpToPage(index);
  }

  void _onPageChange(int index){
    if (index != _currentIndex) {
      setState(() {
        _currentIndex = index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        physics: NeverScrollableScrollPhysics(),
        controller: _controller,
        itemCount: _pages.length,
        itemBuilder: (BuildContext context, int index){
          return _pages[index];
        },
        onPageChanged: _onPageChange,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: getItems(),
        currentIndex: _currentIndex,
        onTap: _onTap,
      ),
    );
  }
}
完成BottomNavigationBar+PageView后还差一步:
1、在子widget中state方法混入 with AutomaticKeepAliveClientMixin
class FultterStart1 extends State<FultterStart> with AutomaticKeepAliveClientMixin 
2、在state方法中的build方法中添加super.build(context);
@override
  Widget build(BuildContext context) {
   super.build(context); ///
    return Scaffold(
      appBar: AppBar(
3、在state方法中添加
@override
  bool get wantKeepAlive => true; ///保持当前页面状态

相关文章

网友评论

      本文标题:flutter BottomNavigationBar切换页面保

      本文链接:https://www.haomeiwen.com/subject/rpoxvltx.html