flutter实现头部tabTop滚动栏
更新时间:2022年03月22日 17:04:48 作者:舜岳
这篇文章主要为大家详细介绍了flutter实现头部tabTop滚动栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了flutter实现头部tabTop滚动栏的具体代码,供大家参考,具体内容如下
效果图如下:
main.dart代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | import 'package:flutter/material.dart' ; //启动函数 void main() => runApp(MyApp()); //自定义组件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //MaterialApp 是flutter的页面根组件 return MaterialApp( title: 'main根页面' , debugShowCheckedModeBanner: false , //清除debug //home表示页面信息 home: AppbarTop() ); } } //头部tabTop滚动栏效果组件 import 'package:flutter/material.dart' ; class AppbarTop extends StatefulWidget { @override _AppbarTopState createState() => _AppbarTopState(); } //混合SingleTickerProviderStateMixin类 同步属性 class _AppbarTopState extends State<AppbarTop> with SingleTickerProviderStateMixin { //定义一个控制器 TabController _tabController; @override void initState() { super .initState(); //混入SingleTickerProviderStateMixin的this //实例化一个tab控制器 作用: _tabController = TabController(length: choices.length, vsync: this ); } _nextPage(index) { int currentIndex = _tabController.index + index; if (currentIndex < - 0 ) currentIndex = _tabController.length - 1 ; if (currentIndex >= _tabController.length) currentIndex = 0 ; //控制器移动到currentIndex处 _tabController.animateTo(currentIndex); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( '头部菜单栏' ), centerTitle: true , //title居中显示 leading: IconButton( icon: Icon(Icons.arrow_back), onPressed: () { _nextPage(- 1 ); }), iconTheme: IconThemeData(color: Colors.yellow), //头部icon样式颜色 //右边icon图标 可以多个 actions: <Widget>[ IconButton( icon: Icon(Icons.arrow_forward), onPressed: () { _nextPage( 1 ); }) ], actionsIconTheme: IconThemeData(color: Colors.white), //自定义导航栏 bottom: PreferredSize( child: Theme( data: Theme.of(context).copyWith(accentColor: Colors.white), child: Container( height: 40 , alignment: Alignment.center, //圆点居中 //给自定义导航栏设置圆点控制器 child: TabPageSelector( controller: _tabController, ), ), ), preferredSize: Size.fromHeight( 48 )), ), //主体内容 body: TabBarView( //主题内容也跟随控制器变化 controller: _tabController, //将数据遍历成n个子组件数组 children: choices.map((item) { return Padding( padding: EdgeInsets.all( 20 ), child: ChoiceCard( choice: item, ), ); }).toList(), ), ); } } //ChoiceCard将数据渲染到Card卡片组件上 class ChoiceCard extends StatelessWidget { final Choice choice; const ChoiceCard({Key key, this .choice}) : super (key: key); @override Widget build(BuildContext context) { //滚动时的卡片小部件 return Card( color: Colors.blue, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(choice.icon, size: 120 , color: Colors.white,), Text(choice.title), ], ) ); } } //数据的类型 class Choice { const Choice({ this .title, this .icon}); final String title; final IconData icon; } //模拟的数据 const List<Choice> choices = const <Choice>[ const Choice(title: 'CAR' , icon: Icons.directions_car), const Choice(title: 'BICYCLE' , icon: Icons.directions_bike), const Choice(title: 'BOAT' , icon: Icons.directions_boat), const Choice(title: 'BUS' , icon: Icons.directions_bus), const Choice(title: 'TRAIN' , icon: Icons.directions_railway), const Choice(title: 'WALK' , icon: Icons.directions_walk), ]; |
效果图2:
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | //头部tabTop滚动栏效果组件 class AppBarBottom extends StatefulWidget { AppBarBottom({Key key}) : super (key: key); @override _AppBarBottomState createState() => _AppBarBottomState(); } class _AppBarBottomState extends State<AppBarBottom> { _SelectView(icon, text, id) { return PopupMenuItem( child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Icon(icon, color: Colors.blue), Text( text, style: TextStyle(color: Colors.black), ) ], )); } @override Widget build(BuildContext context) { //tab使用这个组件 return DefaultTabController( length: choices.length, child: Scaffold( appBar: AppBar( title: Text( 'AppBar与TabBar' ), centerTitle: true , actions: <Widget>[ PopupMenuButton( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular( 10 )), itemBuilder: (BuildContext context) { return [ PopupMenuItem( child: _SelectView(Icons.message, '首页' , 'A' )), PopupMenuItem( child: _SelectView(Icons.message, '商品' , 'B' )), PopupMenuItem( child: _SelectView(Icons.message, '消息' , 'C' )), ]; }) ], bottom: TabBar( isScrollable: true , indicatorSize: TabBarIndicatorSize.label, tabs: choices.map((item) { return Tab( text: item.title, icon: Icon(item.icon), ); }).toList(), ), ), body: TabBarView( children: choices.map((item) { return Container( width: double .infinity, color: Colors.white70, child: Padding( padding: EdgeInsets.all( 16 ), child: ChoiceCard( choice: item, ), ), ); }).toList(), ), )); } } //ChoiceCard将数据渲染到Card卡片组件上 class ChoiceCard extends StatelessWidget { final Choice choice; const ChoiceCard({Key key, this .choice}) : super (key: key); @override Widget build(BuildContext context) { //滚动时的卡片小部件 return Card( color: Colors.blue, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( choice.icon, size: 120 , color: Colors.white, ), Text(choice.title), ], )); } } //数据的类型 class Choice { const Choice({ this .title, this .icon}); final String title; final IconData icon; } //模拟的数据 const List<Choice> choices = const <Choice>[ const Choice(title: 'CAR' , icon: Icons.directions_car), const Choice(title: 'BICYCLE' , icon: Icons.directions_bike), const Choice(title: 'BOAT' , icon: Icons.directions_boat), const Choice(title: 'BUS' , icon: Icons.directions_bus), const Choice(title: 'TRAIN' , icon: Icons.directions_railway), const Choice(title: 'WALK' , icon: Icons.directions_walk), ]; |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Android通过SharedPreferences实现自动登录记住用户名和密码功能
最近使用SharedPreferences实现了一个android自动登录功能,特此分享到脚本之家平台供大家参考2017-07-07
最新评论