tabs切换
简单的tabs切换
// view
Widget _buildTab() {return TDTabBar(controller: controller.tabController,tabs: controller.tabNames.map((e) => TDTab(text: e)).toList(),onTap: (index) => controller.onTapTabItem(index),backgroundColor: Colors.white,showIndicator: true,indicatorColor: const Color(0xffe01e1e),labelColor: const Color(0xffe01e1e),);
}// controller
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class OrderDetailController extends GetxController with GetTickerProviderStateMixin {OrderDetailController();// tab 控制器late TabController tabController;// tab 索引int tabIndex = 0;// tab 名称List<String> tabNames = ['全部', '待付款', '待发货', '待收货', '已完成'];void onTapTabItem(int index) {tabIndex = index;print('tabIndex: $tabIndex');update(["order_detail"]);}@overridevoid onInit() {super.onInit();tabController = TabController(length: tabNames.length, vsync: this);}@overridevoid onClose() {super.onClose();tabController.dispose();}
}
tabs切换和视图同步
// view
Widget _buildView() {return <Widget>[_buildTab(),Expanded(child: TabBarView(controller: controller.tabController,children: const [Center(child: Text('内容1')),Center(child: Text('内容2')),Center(child: Text('内容3')),Center(child: Text('内容4')),Center(child: Text('内容5')),],),),].toColumn();
}