flutter学习第一弹

前言

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

编码

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

class AppPage extends StatefulWidget{
  @override
  State createState() {
    return _AppPageState();
  }
}

class _AppPageState extends State with SingleTickerProviderStateMixin{
  int _page = 0;
  PageController _pageController;
  final List 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: [
          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

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