100 行代码实现 Flutter 自定义 TabBar

solocoder

发布于 2022-03-31 19:21:34

1K0

发布于 2022-03-31 19:21:34

文章被收录于专栏：大前端客栈大前端客栈

Flutter 的确很强大，但美中不足的是生态还有待完善，没有出现像前端的 Antd 或 Element 那样全能的基础 UI 库。

由此带来的直接影响是开发效率提不上去，需要耗费大量的时间精力在基础组件的封装上。

官方的 TabBar 不满足需求，又没有合适的轮子，只好自己造轮子啦。接下来带你一步步实现自定义 TabBar……

一、目标和效果

需求目标是：

这个页面不要 material 左侧统一的返回键和 Title
在右侧有取消按钮，点取消即返回
点击 Tab 可以实现 content 切换并带有动画效果
滑动内容区域也可以切换 Tab

效果如下图：

二、实现思路

将整个页面分为两部分，上面的 Tab 按钮和下面的内容区域。

为了保持通用性，上面的 Tab 和下面的内容区域都需要让调用者传入，它们都是 Widget 数组

class STab extends StatefulWidget {
  // tab 集合
  final List<Widget> tabs;
  // 页面集合
  final List<Widget> pages;

  STab({this.tabs, this.pages});

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

页面整体的布局是一个 Column ，上面是 Tab 区域，下面的 Content 区域用 Expand 包裹，达到撑满整个屏幕的效果。

上面的 Tab 布局，最外层是 Stack 布局，因为需要取消按钮一直在最右边且不能影响 tab 按钮的排版。多个 tab 按钮用横向布局 Row 来排列，并设置居中对齐。

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        TabLayout(widget.tabs, selectedIndex, onTabChange, onCancelClick),
        ContentLayout(widget.pages, swipeControl, onPageChange)
      ],
    ));
  }

下面的内容区域，要实现左右滑动切换的效果，用了一个第三方库 flutter_swiper 。当点击 Tab 的时候，设置 swiper 的下标切换显示的内容；当左右滑动 swiper，设置 tab 的选中状态，达到 tab 选中状态跟 swiper 滑动的联动。

三、组件封装

/// tab 切换组件
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class STab extends StatefulWidget {
  // tab 集合
  final List<Widget> tabs;

  // 页面集合
  final List<Widget> pages;

  STab({this.tabs, this.pages});

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

class _STabState extends State<STab> {
  int selectedIndex = 0;
  SwiperController swipeControl = new SwiperController();

  // tab 索引变化回调
  void onTabChange(index) {
    setState(() {
      selectedIndex = index;
    });
    swipeControl.move(index);
  }

  void onCancelClick() {
    print('cancel');
  }

  void onPageChange(index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        TabLayout(widget.tabs, selectedIndex, onTabChange, onCancelClick),
        ContentLayout(widget.pages, swipeControl, onPageChange)
      ],
    ));
  }
}

/// 上面 Tab 的布局
Widget TabLayout(tabs, selectedIndex, onTabChange, onRightButtonClick) {
  List<Widget> getItem() {
    List<Widget> children = [];
    for (var i = 0; i < tabs.length; i++) {
      children.add(
        GestureDetector(
            onTap: () {
              onTabChange(i);
            },
            child: Container(
              padding: EdgeInsets.only(left: 20, right: 20, bottom: 10),
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(
                          color: selectedIndex == i
                              ? Color(0xff595959)
                              : Colors.transparent,
                          width: 3))),
              child: tabs[i],
            )),
      );
    }
    return children;
  }

  return Stack(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: getItem(),
      ),
      Positioned(
          top: 0,
          right: 0,
          child: GestureDetector(
            child: Container(
              height: 40,
              padding: EdgeInsets.only(left: 10, right: 10, bottom: 10),
              child: Text(
                '取消',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            onTap: () {
              onRightButtonClick();
            },
          ))
    ],
  );
}

/// 下面页面内容布局
Widget ContentLayout(pages, swipeControl, onIndexChanged) {
  return Expanded(
    child: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: Swiper(
          itemCount: pages.length,
          itemBuilder: (BuildContext context, int index) {
            return pages[index];
          },
          loop: false,
          onIndexChanged: (index) {
            onIndexChanged(index);
          },
          controller: swipeControl,
        )),
  );
}

四、如何使用

传入 tabs 和页面 pages 即可

class Demo extends StatelessWidget {

  final List<Widget> tabBodies = [
    ExpensePage(),
    IncomePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          padding: EdgeInsets.only(top: 30),
          decoration: BoxDecoration(
              color: Color(0xffF9DC62)
          ),
          child: STab(
            tabs: [
              Text('支出', style: TextStyle(fontSize: 18, color: Colors.black),),
              Text('收入', style: TextStyle(fontSize: 18, color: Colors.black)),
            ],
            pages: tabBodies,
          ),
      ),
    );
  }
}