flutter使用getwidget的ui组件库的底部导航用法
参考github上getwidget-app-kit
import 'package:flutter/material.dart'; import 'package:getwidget/getwidget.dart'; import 'package:flutter/cupertino.dart'; class BottomLabelTab extends StatefulWidget { @override _BottomLabelTabState createState() => _BottomLabelTabState(); } class _BottomLabelTabState extends State<BottomLabelTab> with SingleTickerProviderStateMixin { // 加红的地方很重要,不然初始化中的this指向会有问题 TabController? tabController; @override void initState() { super.initState(); tabController = TabController(length: 4, vsync: this); } @override void dispose() { tabController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) => Scaffold( appBar: AppBar( backgroundColor: GFColors.DARK, leading: InkWell( onTap: () { Navigator.pop(context); }, child: Icon( CupertinoIcons.back, color: GFColors.SUCCESS, ), ), title: const Text( 'Bottom Labeled Tabs', style: TextStyle(fontSize: 17), ), centerTitle: true, ), body: Container( height: MediaQuery.of(context).size.height, child: GFTabBarView( controller: tabController, children: <Widget>[ Center( child: Icon( Icons.home, size: 150, color: Colors.grey.withOpacity(0.44), ), ), Center( child: Icon( Icons.music_note, size: 150, color: Colors.grey.withOpacity(0.44), ), ), Center( child: Icon( Icons.games, size: 150, color: Colors.grey.withOpacity(0.44), ), ), Center( child: Icon( Icons.notifications, size: 150, color: Colors.grey.withOpacity(0.44), ), ) ], )), bottomNavigationBar: Container( child: GFTabBar( length: 1, controller: tabController, tabs: [ Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( Icons.home, ), const Text( 'Home', style: TextStyle( fontSize: 10, ), ) ], ), Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( Icons.music_note, ), const Text( 'Music', style: TextStyle( fontSize: 10, ), ) ], ), Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( Icons.games, ), const Text( 'Games', style: TextStyle( fontSize: 10, ), ) ], ), Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( Icons.notifications, ), const Text( 'Notifications', style: TextStyle( fontSize: 10, ), ) ], ), ], indicatorColor: GFColors.SUCCESS, labelColor: GFColors.SUCCESS, labelPadding: const EdgeInsets.all(8), tabBarColor: GFColors.DARK, unselectedLabelColor: GFColors.WHITE, labelStyle: const TextStyle( fontWeight: FontWeight.w500, fontSize: 13, color: Colors.white, fontFamily: 'OpenSansBold', ), unselectedLabelStyle: const TextStyle( fontWeight: FontWeight.w500, fontSize: 13, color: Colors.black, fontFamily: 'OpenSansBold', ), ), ), ); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库