Flutter顶部TabBar和表格TableRow

最新推荐文章于 2025-05-07 10:00:00 发布

『木辛』「月月鸟」

最新推荐文章于 2025-05-07 10:00:00 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/SCDNBB/article/details/122580877

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,
              ),