Flutter自定义TabBar 100 行代码实现Flutter自定义TabBar的代码实例
solocoder 人气:3Flutter 的确很强大,但美中不足的是生态还有待完善,没有出现像前端的 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, ), ), ); } }
五、结语
组件的封装只是根据业务简单的封装了一下,没有考虑到更多的情况,比如右侧的取消按钮也应该由外部传入,颜色也应该由外部传入,还有没校验传入的数据是否合法……大家可以根据自己的实际业务需求调整源码。
至于封装到什么程度才算好,适合、够用就好。
如果只是给自己的业务用,那封装到这样就够了,只需考虑业务内的场景。如果要开源出去给别人共用,那最好给予更高的定制化能力。
加载全部内容