前言

       随着flutter1.0版本的发布，相信大多数移动开发者对flutter都会有很大的热情，毕竟这是谷歌爸爸推广的，现在学习的话肯定对以后的工作会大有帮助，那么今天我们就来学习flutter。

编码

       今天我们就来看看怎么用flutter来搭一个APP开发的架子，首先需要知道的是在flutter中有两种Widget，一种是StatelessWidget，继承这个类的widget在程序初始化的时候只走一次生命周期，所以比较适合显示静态的页面，而如果你的页面需要交互的话则是需要继承StatefulWidget。说了那么多，咱们还是先上代码看看吧（talk is cheap, show me the code~）

class AppPage extends StatefulWidget{ @override State<StatefulWidget> createState() { return _AppPageState(); } }class _AppPageState extends State<AppPage> with SingleTickerProviderStateMixin{ int _page = 0; PageController _pageController; final List<BottomNavigationBarItem> listBar = [BottomNavigationBarItem(title: Text("首页"),icon:Icon(Icons.home),backgroundColor: Config.colorPrimary ), BottomNavigationBarItem(title: Text("备忘录"),icon: Icon(Icons.border_color),backgroundColor: Config.colorPrimary), BottomNavigationBarItem(title: Text("知识"),icon: Icon(Icons.reorder),backgroundColor: Config.colorPrimary),];@override void initState() { _pageController = PageController(initialPage: this._page); }@override void dispose() { _pageController.dispose(); super.dispose(); }@override Widget build(BuildContext context) { return Scaffold( body: PageView( physics: NeverScrollableScrollPhysics(), children: <Widget>[ Home(), Memo(), knowledge() ], onPageChanged: _onPageChanged, controller: _pageController, ), bottomNavigationBar: BottomNavigationBar( items: listBar, currentIndex: _page, fixedColor: Config.colorPrimary, type: BottomNavigationBarType.fixed, onTap: _onTap,), ); }void _onPageChanged(int page){ setState(() { this._page = page; }); }void _onTap(int index){ _pageController.animateToPage(index, duration: const Duration(milliseconds: 500), curve: Curves.ease); } } 

       这个类叫AppPage ，因为需要交互所以继承了StatefulWidget，在手机上显示的效果如下：

首页.png

       可以看到这其实就是一个APP的首页，那么上面的代码具体都有什么功能呢，且听我一一道来：
       1.首先我们需要定义个页面AppPage（名字随便取） 继承自StatefulWidget，而继承StatefulWidget的类都需要的返回一个新的继承State的类，可能听起来有点绕口，就如下图所示，这种写法是固定的，凡是继承自StatefulWidget的widget都这样写就行了。

image.png

       2.我们需要定义三个tab页面，因为目前的flutter还是有些bug的，因为在tab切换的时候页面的数据会重新加载，为了解决这种bug需要加上SingleTickerProviderStateMixin。然后需要定义三个tab按钮

image.png

       可以看到每个tab按钮都是一个BottomNavigationBarItem，初始化BottomNavigationBarItem的方法也很简单，就是把tab所需要展示的icon和title传给BottomNavigationBarItem就行了。定义好了tab按钮就需要把它放在页面显示出来了，那么flutter是怎样展示页面的呢？

image.png

       Scaffold实现了基本的Material 布局，在Scaffold里面可以定义appbar,body等内容，至于代表啥看名字就知道了，可以看到body里面是一个PageView（类似于android中的ViewPage），在PageView的children里面传入了Home(),Memo(),knowledge()三个页面分别代表上图中的首页，备忘录，知识三个页面。bottomNavigationBar代表底部的三个tab,里面参数的意思说一下，items代表具体的tabbar，就是我们之前在上面定义的BottomNavigationBarItem列表，currentIndex表示当前页是第几页，onTap是具有水波纹效果的按钮点击事件。好了，第一篇关于flutter的文章就简单的写到这里了，有什么问题可以留言，大家一起开始学习flutter吧~

公众号.jpg

       同时，欢迎大家关注我公众号，谢了！！！

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/17677.html