跨平臺開發Flutter初體驗

丶Bison發表於2019-06-19
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行； 效果圖如下

iOS效果

Android效果

上圖中填充的其他內容想了解的可以關注我哦， 連載中。。。

相關文章