亲宝软件园·资讯

展开

Flutter自定义TabBar 100 行代码实现Flutter自定义TabBar的代码实例

solocoder 人气:3
想了解100 行代码实现Flutter自定义TabBar的代码实例的相关内容吗,solocoder在本文为您仔细讲解Flutter自定义TabBar的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Flutter,TabBar,下面大家一起来学习吧。

Flutter 的确很强大,但美中不足的是生态还有待完善,没有出现像前端的 Antd 或 Element 那样全能的基础 UI 库。
由此带来的直接影响是开发效率提不上去,需要耗费大量的时间精力在基础组件的封装上。

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

一、目标和效果

需求目标是:

效果如下图:

二、实现思路

将整个页面分为两部分,上面的 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,
     ),
   ),
  );
 }
}

五、结语

组件的封装只是根据业务简单的封装了一下,没有考虑到更多的情况,比如右侧的取消按钮也应该由外部传入,颜色也应该由外部传入,还有没校验传入的数据是否合法……大家可以根据自己的实际业务需求调整源码。

至于封装到什么程度才算好,适合、够用就好。

如果只是给自己的业务用,那封装到这样就够了,只需考虑业务内的场景。如果要开源出去给别人共用,那最好给予更高的定制化能力。

加载全部内容

相关教程
猜你喜欢
用户评论