Flutter 创建底部导航的三种方式

Flutter创建底部导航的方式:推荐第三种

一、BottomNavigationBar + BottomNavigationBarItem

  • 优缺点:
    • 实现简单,代码量很少基本就能完成
    • 不能调整item的文字和图片间距
    • 每次切换页面会重绘,不会保存之前的页面状态
具体实现:
///根页面
class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MainPageState();
  }
}

class MainPageState extends State <MainPage> {
  int currentIndex = 0;
  final items = [
    BottomNavigationBarItem(icon: Image(image: AssetImage('images/Home.png')), title: Text
      ('首页'),activeIcon: Image(image:
    AssetImage
      ('images/HomeSelect'
        '.png'))),
    BottomNavigationBarItem(icon: Image(image: AssetImage('images/market_normal.png')),
        title:
    Text("行情"),activeIcon: Image(image: AssetImage('images/market_selected.png'))),
    BottomNavigationBarItem(icon: Image(image: AssetImage('images/transcation_normal.png')),
        title: Text
      ("交易"),activeIcon: Image
          (image:
        AssetImage('images/transcation_selected.png'),)),
    BottomNavigationBarItem(icon: Image(image: AssetImage('images/assets_normal.png')),
        title: Text
      ("资产"),activeIcon: Image(image:
        AssetImage('images/assets_selected.png'),)),
  ];
///4个tabbar页面
  final bodyLists = [
    HomepageWidget(),
    MarketpageWidget(),
    TranscationpageWidget(),
    AssetspageWidget()
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold (
      appBar: AppBar(title: Text("切换"),),
      bottomNavigationBar: BottomNavigationBar(
        items: items,
        currentIndex: currentIndex,
        onTap: onTap,
        unselectedItemColor: prefix1.Color(0xFF989D9D),
        selectedItemColor: prefix1.Color(0xFF333333),
        type: BottomNavigationBarType.fixed,
      ),
      body: bodyLists[currentIndex],
    );
  }
  void onTap(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

每个子页面代码都是一样的,主要是为了测试每个页面的状态

import 'package:flutter/material.dart';

class HomepageWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomepageWidgetState();
  }
}

class HomepageWidgetState extends State <HomepageWidget> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Text("首页 $count",style: TextStyle(color: Colors.blue),),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addButtonClick,
        child: Icon(Icons.add),
      ),
    );
  }
  void addButtonClick() {
    setState(() {
      count ++;
    });
  }
}
Oct-23-2019 13-59-00.gif

如上图,我们可以看到当切换界面的时候,之前的状态是被重置了的。那么下面介绍该如何保持状态。

二、BottomNavigationBar +Stack + OffStage

  • 优缺点
    • 能够保存页面的状态
    • 程序初始化的时候所有的child都会执行initState(有时候我们想要的效果是当点击tabbar的时候界面再去加载)
    • 使用BottomNavigationBarItem无法调整文字图片间距
body: Stack(
        children: [
          _stackOffstage(0),
          _stackOffstage(1),
          _stackOffstage(2),
          _stackOffstage(3)
        ],
      ),

 //根据点击的索引返回widget
  Widget _stackOffstage(int index) {
    return Offstage(
      //If false, the child is included in the tree as normal.
      offstage: currentIndex != index,
      child: TickerMode(
        child: bodyLists[index],
        //If true, then tickers in this subtree will tick.
        enabled: currentIndex == index,
      ),
    );
  }
Oct-23-2019 15-37-09.gif

三、使用PageView + AutomaticKeepAliveClientMixin

  • 优点
    • 可以保存页面状态
    • 每次点击才会初始化,而且只会初始化一次
    • push pop回来widgetState也不会重新initState
var pageController = PageController();

Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold (
      appBar: AppBar(title: Text("切换"),),
      bottomNavigationBar: BottomNavigationBar(
        items: items,
        currentIndex: currentIndex,
        onTap: onTap,
        unselectedItemColor: prefix1.Color(0xFF989D9D),
        selectedItemColor: prefix1.Color(0xFF333333),
        type: BottomNavigationBarType.fixed,
      ),
      body: PageView(
        controller: pageController,
        children: bodyLists,
        onPageChanged:pageControllerTap ,
        physics: NeverScrollableScrollPhysics(),
      ),
    );
  }

  void pageControllerTap(int index) {
    setState(() {
      currentIndex = index;
    });
  }
  void onTap(int index) {
    pageController.jumpToPage(index);
  }

其中子页面的代码,需要注意 AutomaticKeepAliveClientMixin, 重写方法
wantKeepAlive ,这样是让页面一直保存在内存中。还有一个要注意的点:super.build(context);,如果不写,当我们使用Navigator.push切换界面的时候,再pop回来,HomepageWidgetState还是会执行initState,加上super后就不会再有这个问题。

class HomepageWidgetState extends State <HomepageWidget> with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print('HomepageWidgetState initState');
  }
  int count = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    super.build(context); //注意:每个子页面要写`super`
    return Scaffold(
      body: Center(
        child: Text("首页 $count",style: TextStyle(color: Colors.blue),),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addButtonClick,
        child: Icon(Icons.add),
      ),
    );
  }
  void addButtonClick() {
    setState(() {
      count ++;
    });
  }
//一直保存在内存中
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

其中PageController是可以控制pageView中要显示的界面
physics //How the page view should respond to user input. 用户如何响应,具体行为可以查看源码,我们这里可以禁止滑动NeverScrollableScrollPhysics

 [ScrollPhysics], which can be used instead of this class when the default
///    behavior is desired instead.
///  * [BouncingScrollPhysics], which provides the bouncing overscroll behavior
///    found on iOS.
///  * [ClampingScrollPhysics], which provides the clamping overscroll behavior
///    found on Android.
pageView .gif
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容