Flutter顶部TabBar和表格TableRow
需求:
显示样式为这样
1、可左右滑动切换表格
2、网络请求:一、切换才请求页面,二、表格有页码,支持上下拉刷新加载更多
3、表格做缓存处理(用户滑到哪里,切换表格再切回来还是那个位置)
4、点击行触发事件跳转
5、跳转后下一个页面影响到该页面的数据(重新更新数据)
UI代码分析
TabBar
如果单独写TabBar
的话,会直接占满整个屏幕的宽度,所以外面需要套一层Container
控制它的宽高。
TabBar的controller为
_tabController = TabController(length: titleModel.length, vsync: this);
// 标题
void setTitleModel() {
titleModel = [];
titleModel.add('第一个表格名称');
titleModel.add('第二个表格名称');
}
如果有需要监听滑动切换的需求,我也用不着,所以这个可以删掉
_tabController.addListener(() {
print(_tabController.index);
});
整体结构为 行(TabBar + TabBarView
),未选中样式和选中样式都可以更改
Widget _successWidget() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(padding: const EdgeInsets.fromLTRB(15, 10, 0, 0),child: Container(
width: 192,
height: 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
border: Border.all(width: 1, color: AppColor.themeBlue),
),
child: TabBar(
controller: _tabController,
//未选中样式
unselectedLabelColor: AppColor.themeBlue,
unselectedLabelStyle: const TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15,
color: Colors.white),
indicator: const BoxDecoration(
color: AppColor.themeBlue,
),