TDesign：Tabs 选项卡

tabs切换
   简单的tabs切换
  

1. // view
2. Widget _buildTab() {
3.   return TDTabBar(
4.     controller: controller.tabController,
5.     tabs: controller.tabNames.map((e) => TDTab(text: e)).toList(),
6.     onTap: (index) => controller.onTapTabItem(index),
7.     backgroundColor: Colors.white,
8.     showIndicator: true,
9.     indicatorColor: const Color(0xffe01e1e),
10.     labelColor: const Color(0xffe01e1e),
11.   );
12. }
15. // controller
16. import 'package:flutter/material.dart';
17. import 'package:get/get.dart';
18. class OrderDetailController extends GetxController with GetTickerProviderStateMixin {
19.   OrderDetailController();
20.   // tab 控制器
21.   late TabController tabController;
22.   // tab 索引
23.   int tabIndex = 0;
24.   // tab 名称
25.   List<String> tabNames = ['全部', '待付款', '待发货', '待收货', '已完成'];
26.   void onTapTabItem(int index) {
27.     tabIndex = index;
28.     print('tabIndex: $tabIndex');
29.     update(["order_detail"]);
30.   }
31.   
32.   @override
33.   void onInit() {
34.     super.onInit();
35.     tabController = TabController(length: tabNames.length, vsync: this);
36.   }
38.   @override
39.   void onClose() {
40.     super.onClose();
41.     tabController.dispose();
42.   }
43. }

复制代码

  tabs切换和视图同步

1. // view
2. Widget _buildView() {
3.   return <Widget>[
4.     _buildTab(),
5.     Expanded(
6.       child: TabBarView(
7.         controller: controller.tabController,
8.         children: const [
9.           Center(child: Text('内容1')),
10.           Center(child: Text('内容2')),
11.           Center(child: Text('内容3')),
12.           Center(child: Text('内容4')),
13.           Center(child: Text('内容5')),
14.         ],
15.       ),
16.   ),
17.   ].toColumn();
18. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。