跨平台开发Flutter初体验

Flutter的横空出世，很大程度上下降了移动应用的开发成本；我是一名苦逼的iOS开发者，兼职写点Android开发，对Flutter的出现比通常人要敏感不少，在此以前我的的见解是跨平台没什么前景，学习成本高的同时，性能并非很满意；在接触Flutter以后，这一想法抛之脑后，瞬间来了兴趣，对于有开发经验的童鞋来讲，学习起来一点也不难，特别是Android开发的，由于编译器能够直接用Android Studio，上手特别快；运行起来也很流畅；这些都是爱好的开始；

首先来讲一下iOS里面的UITabBarController 在Flutter里面有对应的控件BottomNavigationBar很是的方便，几句代码轻轻松松达到iOS和Android双端效果统一，主要代码以下

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/HomePage.dart';
import 'package:flutter_app/pages/ShopPage.dart';
import 'package:flutter_app/pages/MyInfoPage.dart';


class Tabbar extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => TabbarState();
}
///tabbar的三个子控制器
class TabbarState extends State<Tabbar> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomePage(),
    Shoppage(),
    MyInfoPage()
  ];

//建立BottomNavigationBar而且监听改变的currentIndex
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
              title: new Text("Home"), icon: new Icon(Icons.home)),
          BottomNavigationBarItem(
              title: new Text("List"), icon: new Icon(Icons.list)),
          BottomNavigationBarItem(
              title: new Text("Message"), icon: new Icon(Icons.message)),
        ],
      ),
    );
  }
//点击事件
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

复制代码

Tabbar 是本身建立封装的类，方便组件化管理；主要是实现tabbar的功能cupertino.dart和material.dart是Flutter自带的文件；其余HomePage.dart/ShopPage.dart/MyInfoPage.dart为本身建立的三个类，至关于iOS里面的VC和Android里面的Activity用于展现TabbarItem的内容；至于怎么调用就更加的简单了，下面是Main文件调用的代码：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //调用tabbar展现
      home: Tabbar(),
    );
  }
}
复制代码

调用的代码home: Tabbar(),就是这么简单粗暴，核心代码不超过50行； 效果图以下

上图中填充的其余内容想了解的能够关注我哦， 连载中。。。