Flutter~自定义tabbar模块

项目中,遇到一个需求,需要自定义tabbar的高度,但是自带的tabbar组件都不支持修改高度.

所幸flutter的万物皆组件的概念,所以我们自己写一个tabbar即可.
需求:需要一个可以自行控制高度的tabbar.

大致效果如下:

其中,自定义Tabbar组件如下

bottom_bar.dart

/*
* 自定义tabbar
* */
import 'package:flutter/material.dart';

class BottomBarItem {
  BottomBarItem({this.imageIcon, this.imageSelectedIcon, this.text});

  Image imageIcon;
  Image imageSelectedIcon;
  String text;
}

class BottomBar extends StatefulWidget {
  BottomBar({
    this.items,
    this.centerItemText,
    this.height: 60.0,
    this.iconSize: 24.0,
    this.backgroundColor,
    this.color,
    this.selectedColor,
    this.notchedShape,
    this.onTabSelected,
  }) {
    assert(this.items.length == 2 || this.items.length == 4);
  }

  final List<BottomBarItem> items;
  final String centerItemText;
  final double height;
  final double iconSize;
  final Color backgroundColor;
  final Color color;
  final Color selectedColor;
  final NotchedShape notchedShape;
  final ValueChanged<int> onTabSelected;

  @override
  State<StatefulWidget> createState() => BottomBarState();
}

class BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0;

  _updateIndex(int index) {
    widget.onTabSelected(index);
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> items = List.generate(widget.items.length, (int index) {
      return _buildTabItem(
        item: widget.items[index],
        index: index,
        onPressed: _updateIndex,
      );
    });
    items.insert(items.length >> 1, _buildMiddleTabItem());

    return BottomAppBar(
      shape: widget.notchedShape,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: items,
      ),
      color: widget.backgroundColor,
    );
  }

  Widget _buildMiddleTabItem() {
    return Expanded(
      child: SizedBox(
        height: widget.height,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            SizedBox(height: widget.iconSize),
            Text(
              widget.centerItemText ?? '',
              style: TextStyle(color: widget.color),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTabItem({
    BottomBarItem item,
    int index,
    ValueChanged<int> onPressed,
  }) {
    Image icon =
        _selectedIndex == index ? item.imageSelectedIcon : item.imageIcon;

    Color resultColor =
        _selectedIndex == index ? widget.selectedColor : widget.color;

    return Expanded(
      child: SizedBox(
        height: widget.height,
        child: Material(
          type: MaterialType.transparency,
          child: InkWell(
            onTap: () => onPressed(index),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                icon,
                Text(
                  item.text,
                  style: TextStyle(color: resultColor),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以上就是自定义的tabbar组件.其中字段解释如下:
. items tabs数组,BottomBarItem类型
. centerItemText 中间Tab按钮文字
. height tab的高度
. backgroundColor 整体背景色
. color icon默认色
. selectedColor 选中icon色
. notchedShape icon的大小
. onTabSelected 选中tab事件,做的主要就是切换当前page
. notchedShape 设置notchedShape,和系统的NotchedShape一致

其他需要的属性,可以自行添加.

创建好自定义tabbar之后,使用即可.

main.dart

import 'package:flutter/material.dart';

import './bottom_bar.dart';

import './pages/one.dart';
import './pages/two.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: STTabBar(),
    );
  }
}

class STTabBar extends StatefulWidget {
  @override
  _STTabBarState createState() => _STTabBarState();
}

class _STTabBarState extends State<STTabBar> {
  int _tabIndex = 0;
  double _tab_H = 70.0; // tag 高度

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _tabIndex,
        children: <Widget>[
          One(
            // 滑块
            changeTabOne: (e) {
              setState(() {
                _tab_H = e;
              });
            },
            // 高度为0
            changeTabTwo: () {
              setState(() {
                _tab_H = 0;
              });
            },
            // 高度为70
            changeTabThree: () {
              setState(() {
                _tab_H = 70;
              });
            },
          ),
          Two(),
        ],
      ),
      bottomNavigationBar: BottomBar(
        height: _tab_H,
        color: Color(0xFF999999),
        selectedColor: Color.fromRGBO(255, 175, 76, 1),
//            backgroundColor: Colors.red,
        items: [
          BottomBarItem(
            imageIcon: Image.asset(
              'assets/one.png',
              width: 40,
              height: 40,
            ),
            imageSelectedIcon: Image.asset(
              'assets/one_select.png',
              width: 40,
              height: 40,
            ),
            text: '首页',
          ),
          BottomBarItem(
            imageIcon: Image.asset(
              'assets/two.png',
              width: 40,
              height: 40,
            ),
            imageSelectedIcon: Image.asset(
              'assets/two_select.png',
              width: 40,
              height: 40,
            ),
            text: '我的',
          )
        ],
        onTabSelected: (index) {
          setState(() {
            _tabIndex = index;
          });
        },
      ),
    );
  }
}

上面的BottomBar()这个就是之前自定义的tabbar,配置好参数即可.

完整源码

另：以上功能也可以采用PreferredSize 制作，如 PreferredSize 示例

ps:新年前最后一天,自己一个人在出租屋里写着博客,外面下着雨,路上没什么人,好好的年被着该该死的肺炎给搅和了,也不知道自己能不能度过这个灾难…..