flutter 自定义tab导航-顶部导航-底部导航

5,743 阅读2分钟

flutter_custom_bottom_tab_bar

和另外一个bottom_tab_bar的区别:github.com/LiuC520/flu… bottom_tab_bar是通过改变state来控制每一个tab的点击的点击事件,然后改变上面的显示内容,这样的方法比较慢比较卡,并不能满足我们的日常使用

本文的具体的用法参考了,顶部tab的切换来做的,比较快

screenshot.png

自定义底部导航tab

官方的tab导航,tabbar无法改变宽高,因此无法自定义

TabContainer

 * 自定义的TabBar
 * 这里是自定义的,实现了PreferredSizeWidget,因为在AppBar的bottom属性里,只支持PreferredSizeWidget这样的widget
同时是此控件还能设置padding

  • alignment, //对齐方式
  • padding,//内边距
  • Color color,// 背景颜色
  • Decoration decoration,//在child背后显示的装饰样式
  • foregroundDecoration,//在child之前显示的装饰样式
  • width,//宽度
  • height,// 高度
  • BoxConstraints constraints, //约束
  • margin,//外边距
  • transform,//矩阵转换,可以是用缩放,平移、旋转
  • child,//子view

EachTab

  TabBar 的tab
  就是 和 Tab 一样
  用途:可以用在顶部导航,也可以用在底部tab导航
  • text, //tab的文字
  • textStyle,//tab文字的样式
  • icon, // 图标
  • child,// 可以用不用text和child,可以自定义child
  • padding,//每个tab的内边距
  • width,//宽度
  • height,//高度
  • color,//背景颜色
  • iconPadding,// 图标 padding
  • badge, //未读消息的widget
  • badgeNo,//未读消息的数量
  • badgeColor //未读消息的背景颜色

Example

在pubspec.yaml中引入包

  flutter_custom_bottom_tab_bar:
    git: https://github.com/LiuC520/flutter_custom_bottom_tab_bar.git
在要使用的文件中导入文件

import 'package:flutter_custom_bottom_tab_bar/tabbar.dart';
import 'package:flutter_custom_bottom_tab_bar/eachtab.dart';

class Entry extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return EntryState();
  }
}

class EntryState extends State<Entry> with SingleTickerProviderStateMixin {
  TabController _tabController;
  int _selectedIndex = 0;
  var titles = ['首页', '西瓜视频', '找人', '小视频', '我的'];
  var icons = [
    Icons.home,
    Icons.play_arrow,
    Icons.child_friendly,
    Icons.fiber_new,
    Icons.mic_none
  ];
  @override
  void initState() {
    super.initState();
    _tabController =
        new TabController(vsync: this, initialIndex: 0, length: titles.length);
    _tabController.addListener(() {
      setState(() => _selectedIndex = _tabController.index);
      print("liucheng-> ${_tabController.indexIsChanging}");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Container(
        height: 46,
        child: Column(
          children: <Widget>[
            Divider(
              height: 2,
            ),
            new TabBar(
              isScrollable: false,
              controller: _tabController,
              indicatorColor: Colors.transparent,
              labelColor: Colors.red,
              labelPadding: EdgeInsets.all(0),
              unselectedLabelColor: Colors.black,
              tabs: <Widget>[
                EachTab(
                    width: 70,
                    badgeNo: '12',
                    badgeColor: Colors.red,
                    height: 40,
                    padding: EdgeInsets.all(0),
                    icon: _selectedIndex == 0
                        ? Image.asset(
                            'assets/imgs/tab_home_selected.png',
                            width: 20,
                            height: 20,
                          )
                        : Image.asset(
                            'assets/imgs/tab_home.png',
                            width: 20,
                            height: 20,
                          ),
                    text: titles[0],
                    iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
                    textStyle: TextStyle(fontSize: 10)),
                EachTab(
                    height: 40,
                    padding: EdgeInsets.all(0),
                    icon: _selectedIndex == 1
                        ? Image.asset(
                            'assets/imgs/tab_xigua_selected.png',
                            width: 20,
                            height: 20,
                          )
                        : Image.asset(
                            'assets/imgs/tab_xigua.png',
                            width: 20,
                            height: 20,
                          ),
                    text: titles[1],
                    iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
                    textStyle: TextStyle(fontSize: 10)),
                EachTab(
                    height: 40,
                    padding: EdgeInsets.all(0),
                    icon: _selectedIndex == 2
                        ? Image.asset(
                            'assets/imgs/tab_find_selected.png',
                            width: 20,
                            height: 20,
                          )
                        : Image.asset(
                            'assets/imgs/tab_find.png',
                            width: 20,
                            height: 20,
                          ),
                    text: titles[2],
                    iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
                    textStyle: TextStyle(fontSize: 10)),
                EachTab(
                    height: 40,
                    padding: EdgeInsets.all(0),
                    icon: _selectedIndex == 3
                        ? Image.asset(
                            'assets/imgs/tab_video_selected.png',
                            width: 20,
                            height: 20,
                          )
                        : Image.asset(
                            'assets/imgs/tab_video.png',
                            width: 20,
                            height: 20,
                          ),
                    text: titles[3],
                    iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
                    textStyle: TextStyle(fontSize: 10)),
                EachTab(
                    height: 40,
                    padding: EdgeInsets.all(0),
                    icon: _selectedIndex == 4
                        ? Image.asset(
                            'assets/imgs/tab_me_selected.png',
                            width: 20,
                            height: 20,
                          )
                        : Image.asset(
                            'assets/imgs/tab_me.png',
                            width: 20,
                            height: 20,
                          ),
                    text: titles[4],
                    iconPadding: EdgeInsets.fromLTRB(0, 0, 0, 2),
                    textStyle: TextStyle(fontSize: 10)),
              ],
            ),
          ],
        ),
      ),

      body: TabBarView(
        physics: NeverScrollableScrollPhysics(), //设置滑动的效果,这个禁用滑动
        controller: _tabController,
        children: <Widget>[
          Home(),
          Text(titles[1]),
          Text(titles[2]),
          Text(titles[3]),
          Text(titles[4]),
        ],
      ),
    );
  }
}