Flutter顶部TabBar和表格TableRow

Flutter顶部TabBar和表格TableRow

需求:

显示样式为这样

截屏2022-01-14 下午5.24.01

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,
              ),
              
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值