美文网首页Flutter
Flutter实现效果记录(3)顶部导航栏

Flutter实现效果记录(3)顶部导航栏

作者: 走码人 | 来源:发表于2022-08-01 14:21 被阅读0次

    产品设计要求

    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

    相关文章

      网友评论

        本文标题:Flutter实现效果记录(3)顶部导航栏

        本文链接:https://www.haomeiwen.com/subject/wmqrwrtx.html