使用Flutter怎么实现一个底部菜单导航
本篇文章为大家展示了使用Flutter怎么实现一个底部菜单导航,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
目前累计服务客户上千多家,积累了丰富的产品开发及服务经验。以网站设计水平和技术实力,树立企业形象,为客户提供成都做网站、成都网站设计、网站策划、网页设计、网络营销、VI设计、网站改版、漏洞修补等服务。创新互联始终以务实、诚信为根本,不断创新和提高建站品质,通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合,为客户提供更好的一站式互联网解决方案,携手广大客户,共同发展进步。
程序工程目录
梳理下实现步骤
我们需要实现这个底部菜单导航,就需要有底部菜单的那一排图标按钮。图标按钮是固定在一个工具栏 “bar”上面。然后呢,需要分别需要有按钮对应的界面,就是说按钮有多少个,那么界面需要对应的有多少个。我们来一个清单列表:
按钮图标区域。由于展示的方式都是一样的,我们需要有一个单独的控件,循环出来就好。
工具栏区域。用于展示按钮图标,并且能固定在底部。
首页。用于将工具栏放入界面中,并且将按钮对应的界面作为它的子元素存放于其中。
不同的按钮对应的界面。在我们点击的图标按钮的时候,展示不同的界面。
我们底部的按钮是不会刷新的,界面会刷新,如何实现?
我们界面展示区域分为两块,一块展示底部的工具栏,一块展示页面。下面代码实现:
return new MaterialApp( home: new Scaffold( body: new Center( child: _currentPage // 动态的展示我们当前的页面 ), bottomNavigationBar: bottomNavigationBar, // 底部工具栏 ), theme: new ThemeData( primarySwatch: Colors.blue, // 设置主题颜色 ), );
具体实现
第一步:创建一个 flutter 工程
可以按照工程目录图中的结构,将对应的文件建好。
第二步:修改 main.dart。
main.dart 是我们程序的入口。就类似于 Java、C 中的 main() ,作为一个程序的入口。我们将 main.dart 作为程序的启动入口,就不做过多的操作,只是指定去加载我们的首页(index.dart)。
main.dart
import 'package:flutter/material.dart'; import 'package:flutter_demo/index/index.dart'; // 导入index.dart // 这里为入口函数 void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', home: new Index(), // 指定去加载 Index页面。 ); } }
第三步:创建 NavigationIconView。
正如前面说的,我们底部的按钮区域展示的图标加上文字是固定格式,所以将这一部分抽取出来,作为一个公共的 class,方便界面程序维护。
navigation_icon_view.dart
import 'package:flutter/material.dart'; // 创建一个 Icon 展示控件 class NavigationIconView { // 创建两个属性,一个是 用来展示 icon, 一个是动画处理 final BottomNavigationBarItem item; final AnimationController controller; // 类似于 java 中的构造方法 // 创建 NavigationIconView 需要传入三个参数, icon 图标,title 标题, TickerProvider NavigationIconView({Widget icon, Widget title, TickerProvider vsync}): item = new BottomNavigationBarItem( icon: icon, title: title, ), controller = new AnimationController( duration: kThemeAnimationDuration, // 设置动画持续的时间 vsync: vsync // 默认属性和参数 ); }
第四步:创建 Index
这一步就比较重要了,因为我们需要在这个界面上面去布局,以及实现点击按钮图标之后,有事件触发。正因为我们需要有事件触发,所以创建一个带有状态的 Widget(StatefulWidget)。下面的代码注释给的很详细了,可以仔细看。
index.dart
import 'package:flutter/material.dart'; import 'package:flutter_demo/NoticePage/notice_page.dart'; import 'package:flutter_demo/home/home_page.dart'; import 'package:flutter_demo/idea/idea_page.dart'; import 'package:flutter_demo/market/market_page.dart'; import 'package:flutter_demo/my/my_page.dart'; import 'navigation_icon_view.dart'; // 如果是在同一个包的路径下,可以直接使用对应的文件名 // 创建一个 带有状态的 Widget Index class Index extends StatefulWidget { // 固定的写法 @override StatecreateState() => new _IndexState(); } // 要让主页面 Index 支持动效,要在它的定义中附加mixin类型的对象TickerProviderStateMixin class _IndexState extends State with TickerProviderStateMixin{ int _currentIndex = 0; // 当前界面的索引值 List _navigationViews; // 底部图标按钮区域 List _pageList; // 用来存放我们的图标对应的页面 StatefulWidget _currentPage; // 当前的显示页面 // 定义一个空的设置状态值的方法 void _rebuild() { setState((){}); } @override void initState() { super.initState(); // 初始化导航图标 _navigationViews = [ new NavigationIconView(icon: new Icon(Icons.assessment), title: new Text("首页"), vsync: this), // vsync 默认属性和参数 new NavigationIconView(icon: new Icon(Icons.all_inclusive), title: new Text("想法"), vsync: this), new NavigationIconView(icon: new Icon(Icons.add_shopping_cart), title: new Text("市场"), vsync: this), new NavigationIconView(icon: new Icon(Icons.add_alert), title: new Text("通知"), vsync: this), new NavigationIconView(icon: new Icon(Icons.perm_identity), title: new Text("我的"), vsync: this), ]; // 给每一个按钮区域加上监听 for (NavigationIconView view in _navigationViews) { view.controller.addListener(_rebuild); } // 将我们 bottomBar 上面的按钮图标对应的页面存放起来,方便我们在点击的时候 _pageList = [ new HomePage(), new IdeaPage(), new MarketPage(), new NoticePage(), new MyPage() ]; _currentPage = _pageList[_currentIndex]; } @override Widget build(BuildContext context) { // 声明定义一个 底部导航的工具栏 final BottomNavigationBar bottomNavigationBar = new BottomNavigationBar( items: _navigationViews .map((NavigationIconView navigationIconView) => navigationIconView.item) .toList(), // 添加 icon 按钮 currentIndex: _currentIndex, // 当前点击的索引值 type: BottomNavigationBarType.fixed, // 设置底部导航工具栏的类型:fixed 固定 onTap: (int index){ // 添加点击事件 setState((){ // 点击之后,需要触发的逻辑事件 _navigationViews[_currentIndex].controller.reverse(); _currentIndex = index; _navigationViews[_currentIndex].controller.forward(); _currentPage = _pageList[_currentIndex]; }); }, ); return new MaterialApp( home: new Scaffold( body: new Center( child: _currentPage // 动态的展示我们当前的页面 ), bottomNavigationBar: bottomNavigationBar, // 底部工具栏 ), theme: new ThemeData( primarySwatch: Colors.blue, // 设置主题颜色 ), ); } }
第四步:创建页面
前面的步骤都是在搭建我们的基础,现在是做展示界面。由于不同的界面,对应的源码都是和下面的是一样的,只是 class 的名字不一样,就都可以使用同样的模版复制过去就有可以了。
home_page.dart
import 'package:flutter/material.dart'; class HomePage extends StatefulWidget{ @override StatecreateState() => new _HomePageState(); } class _HomePageState extends State { @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('首页'), actions: [ new Container() ], ), body: new Center( child: null, ), ), ); } }
idea_page.dart
import 'package:flutter/material.dart'; class IdeaPage extends StatefulWidget{ @override StatecreateState() => new _IdeaPageState(); } class _IdeaPageState extends State { @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('想法'), actions: [ new Container() ], ), body: new Center( child: null, ), ), ); } }
market_page.dart
import 'package:flutter/material.dart'; class MarketPage extends StatefulWidget{ @override StatecreateState() => new _MarketPageState(); } class _MarketPageState extends State { @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('市场'), // 后面的省略 // ...... ) ), ); } }
上述内容就是使用Flutter怎么实现一个底部菜单导航,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前名称:使用Flutter怎么实现一个底部菜单导航
文章网址:http://myzitong.com/article/jpoghi.html