产品设计要求

image.png

技术参数

实现代码

涉及到的主要控件TabController

关键是TabBar中的Tab组件中采用column嵌套实现上下结构的两个Text

initialIndex:activeTabIndex初始化默认选中的tab

_tabController = TabController(initialIndex:activeTabIndex,length: 3, vsync: this);

利用onTap()来动态渲染选中的效果

 @override
  void initState() {
    super.initState();
    tabController = TabController(length: list.length, vsync: this);
  }

 @override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("我的工作计划", style: TextStyle(color: Colors.white)),
        leading: Builder(builder: (context) {
          return IconButton(
            icon: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
            ),
            onPressed: () {
              Scaffold.of(context).openDrawer();
            },
          );
        }),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.home),
            color: Colors.white,
            onPressed: () {},
          ),
        ],
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(48),
          child: Material(
            //这里设置tab的背景色
            color: Colors.white,
            child: TabBar(
              // tabs: list.map((e) => PreferredSize(preferredSize: Size.fromHeight(42),
              // child:Material(child:Text(e),))).toList(),
              indicatorColor: Color(0xff1890ff),
              tabs: buildTabs(),
              controller: tabController,
              onTap: (index){
                setState(() {
                  selectTabIndex=index;
                });
              },
            ),
          ),
        ),
      ),
      //drawer: MyDrawer(),
      body: TabBarView(
        controller: tabController,
        children: list.map((e) {
          return Container(
            alignment: Alignment.center,
            child: Text(e),
          );
        }).toList(),
      ),
    );
  }

List<Widget> buildTabs() {
    List<Widget> tabs = [
      PreferredSize(
          preferredSize: Size.fromHeight(42),
          child: Material(
            child: Column(
              children: [
                Text(
                  "12",
                  style: TextStyle(
                      color: 0==selectTabIndex?activeColor:unActiveColor,
                      //fontWeight: FontWeight.w400,
                      fontSize: 18),
                ),
                Text(
                  "全部",
                  softWrap: false,
                  overflow: TextOverflow.fade,
                  style: TextStyle(color: 0==selectTabIndex?activeColor:unActiveColor,),
                ),
              ],
            ),
          )),
      PreferredSize(
          preferredSize: Size.fromHeight(42),
          child: Material(
            child: Column(
              children: [
                Text("4",style: TextStyle(
                    color: 1==selectTabIndex?activeColor:unActiveColor,
                    //fontWeight: FontWeight.w400,
                    fontSize: 18),),
                Text("临期",style: TextStyle(
                    color: 1==selectTabIndex?activeColor:unActiveColor,
                ),),
              ],
            ),
          )),
      PreferredSize(
          preferredSize: Size.fromHeight(42),
          child: Material(
            child: Column(
              children: [
                Text("3",style: TextStyle(
                    color: 2==selectTabIndex?activeColor:unActiveColor,
                    //fontWeight: FontWeight.w400,
                    fontSize: 18),),
                Text("超期",style: TextStyle(
                    color: 2==selectTabIndex?activeColor:unActiveColor,
                    ),),
              ],
            ),
          )),
    ];

    return tabs;
  }

实现效果

image.png

Tabar的默认效果

参考Tab的参数设置

List<Widget> tabs = [
      Tab(text: '全部',icon: Icon(Icons.list),),
      Tab(text: '临期',icon: Icon(Icons.lock_clock),),
      Tab(text: '超期',icon: Icon(Icons.timer),),
    ];

image.png