Flutter篇 TabBar顶部导航栏和底部导航栏

效果

 

tabbar属性

/**
    const TabBar({
    Key key,
    @required this.tabs,//显示的标签内容，一般使用Tab对象,也可以是其他的Widget
    this.controller,//TabController对象
    this.isScrollable = false,//是否可滚动
    this.indicatorColor,//指示器颜色
    this.indicatorWeight = 2.0,//指示器高度
    this.indicatorPadding = EdgeInsets.zero,//底部指示器的Padding
    this.indicator,//指示器decoration，例如边框等
    this.indicatorSize,//指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
    this.labelColor,//选中label颜色
    this.labelStyle,//选中label的Style
    this.labelPadding,//每个label的padding值
    this.unselectedLabelColor,//未选中label颜色
    this.unselectedLabelStyle,//未选中label的Style
    }) : assert(tabs != null),
    assert(isScrollable != null),
    assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
    assert(indicator != null || (indicatorPadding != null)),
    super(key: key);
 */

 特别提示：出现标题显示不全的问题，则可以添加如下代码，即可。

labelPadding:EdgeInsets.all(ScreenUtil().setSp(1)),

直接代码

class _IndexPageState extends State<IndexPage> with SingleTickerProviderStateMixin{
  var color_font = Colors.grey;
  TabController mController;// tab控制器
  final List<Tab> titleTabs = <Tab>[
    Tab(text: '我的',),
    Tab(text: '发现',),
    Tab(text: '云村',),
    Tab(text: '视频',),
  ];
  @override
  void initState() {
    super.initState();
color_font;
    mController = TabController(initialIndex: 1,length: 4,vsync: this);
    mController.addListener(() => _onTabChanged());
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        leading: Builder(
          builder: (context) =>  IconButton(
            iconSize: ScreenUtil().setWidth(50),
            icon:  Icon(Icons.menu,color: color_font,),
            onPressed: ()=> Scaffold.of(context).openDrawer(),
          ),
        ),

        title: new TabBar(
          controller: mController,// 设置控制器
          labelColor: Color.fromARGB(255, 51, 51, 51), //选中的颜色
          labelStyle: TextStyle(fontSize: ScreenUtil().setSp(44),fontWeight: FontWeight.bold), //选中的样式
          unselectedLabelColor: color_font, //未选中的颜色
          unselectedLabelStyle: TextStyle(fontSize:ScreenUtil().setSp(40)), //未选中的样式
          labelPadding:EdgeInsets.all(ScreenUtil().setSp(1)),
          indicatorColor: Colors.transparent, //下划线颜色
          indicatorSize: TabBarIndicatorSize.label,//指示器和题目等长，tab不等长。
          isScrollable: false, //是否可滑动，设置不可滑动，则是tab的宽度等长
          //tab标签
          tabs: titleTabs, // 设置标题
          //点击事件
          onTap: (int i) {},
        ),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), iconSize:ScreenUtil().setWidth(60),onPressed: null)
        ],
      ),
 
      body: Container(
        color: Colors.white,
        child: new TabBarView(
          controller: mController,
          children:  <Widget>[ // 每个空间对应的页面
            MinePage(),
            FindPage(),
            CommunityPage(),
            VideoPage(),
          ],
        ),
      ),
    );
  }

  // 点击监听函数
  _onTabChanged() {
    print(mController.index);
  }
}

 底部的导航栏

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bootomTabs =[
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home),
      title: Text('首页')
    ),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search),
        title: Text('分类')
    ),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.shopping_cart),
        title: Text('购物车')
    ),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled),
        title: Text('会员中心')
    ),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.loop),
        title: Text('屏幕适配')
    ),
  ];
  final List tabBodies = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage(),
    Screenutil(),
  ];
  int currentIndex = 0;
  var currentPage ;

  @override
  void initState() {
    // TODO: implement initState
    currentPage = tabBodies[currentIndex];
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,//Color.fromARGB(244,25,5,1),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items: bootomTabs,
        onTap: (index){
          setState(() {
            currentIndex = index;
            currentPage = tabBodies[currentIndex];

          });

        },
      ),
      // appBar: AppBar(
      //   title: Text('百姓生活+',textAlign: TextAlign.center,),
      // ),
     body: currentPage,
    );
  }
}