環(huán)境搭建和基本概念

??Flutter作為谷歌開發(fā)的一款跨平臺語言越來越普遍的被運用在各種大型項目上，作為一名iOS開發(fā)人員也要實時關(guān)注這些。早期雖研究過語法方面的問題，但是由于沒有具體的項目也就流于表面。近期新的項目采用Flutter語言進(jìn)行開發(fā)，也算是一次實踐，在開發(fā)的過程中也踩了不少坑，所以想寫一篇文章進(jìn)行記錄和分享。

1. Flutter安裝和環(huán)境配置

??博主是使用Mac開發(fā)，其它開發(fā)環(huán)境可參考對應(yīng)文檔。具體的安裝和環(huán)境配置可參考Flutter中文官網(wǎng) 在macOS上搭建Flutter開發(fā)環(huán)境

2.關(guān)于Flutter語法

??Flutter采用Dart語言進(jìn)行開發(fā)，Dart語言具體的語法可查詢相關(guān)文檔。本文章只介紹Flutter開發(fā)過程中一些基本概念

• 組件 Widget :Flutter中使用最多的概念是組件，在Flutter中一切皆是組件，以下我已對比的方式對一些常用的組件進(jìn)行簡單的說明，由于我是iOS開發(fā)，便已iOS控件為標(biāo)準(zhǔn)進(jìn)行對比:

需要注意的是Flutter組件中只有Container具有大小，定位等一些列屬性，如果你想為其它組件設(shè)置固定的尺寸，那么在外面要包含一層Container

• 布局:Flutter中布局的構(gòu)建和原生相比個人覺得有些復(fù)雜，由于Flutter中只有Container組件有尺寸和位置的概念，所以很多簡單的布局相較于原生看起來有些怪異，官網(wǎng)提供了一個布局教程可以很方便的理解這些概念。
• 導(dǎo)航:一個完整的APP必定涉及到頁面跳轉(zhuǎn)，對于iOS原生來說我們用UINavigationController導(dǎo)航控制器來控制頁面間的跳轉(zhuǎn)，在Flutter中 Navigator起到界面導(dǎo)航的作用。
  ?flutter中跳轉(zhuǎn)界面有兩種方式，一種是通過路由的方式跳轉(zhuǎn)，通過這種方式被稱之為靜態(tài)跳轉(zhuǎn)。靜態(tài)跳轉(zhuǎn)一般不涉及到傳遞參數(shù)，靜態(tài)跳轉(zhuǎn)也可以傳遞參數(shù)，只是比較麻煩，這里就不介紹了。以下為創(chuàng)建靜態(tài)路由的代碼:

routes: <String, WidgetBuilder>{
        '/Login': (BuildContext context) => new LoginPage(),
        '/Home': (BuildContext context) => new MainPage(),
        '/a': (BuildContext context) => new MyPage(title: 'page A'),
        '/b': (BuildContext context) => new MyPage(title: 'page B'),
      },

routes是MaterialApp組件下的一個屬性，用于設(shè)置整個路由表。嚴(yán)格來說靜態(tài)路由是可以設(shè)置參數(shù)的，比如MyPage(title: 'page A')中指定了MyPage界面中導(dǎo)航的標(biāo)題為page A，只是這些參數(shù)在設(shè)置完后就不能更改。以下是通過靜態(tài)方式跳轉(zhuǎn)頁面的API和代碼說明

 //跳轉(zhuǎn)到某個界面
 Navigator.pushNamed(context, '/Login');
//跳轉(zhuǎn)到某個界面
//用跳轉(zhuǎn)的界面替換當(dāng)前界面
Navigator.pushReplacementNamed(context, '/Login');
 //跳轉(zhuǎn)到某個頁面并移除
 //移除當(dāng)前界面
 Navigator.pushNamedAndRemoveUntil(
        context, '/Login',
            (Route route) => route == null);
 //移除所有界面
 Navigator.pushNamedAndRemoveUntil(
        context, '/Login',
            (Route route) =>  false);

動態(tài)界面跳轉(zhuǎn)

//跳轉(zhuǎn)到某個界面
Navigator.push(
        context,
        MaterialPageRoute(builder: (_) => LoginPage()));
 //跳轉(zhuǎn)到某個界面
 //用跳轉(zhuǎn)的界面替換當(dāng)前界面
 Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => LoginPage()));
//跳轉(zhuǎn)到某個頁面并移除
//移除當(dāng)前界面
Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
            builder: (_) => LoginPage()),
            (Route route) => route == null);
//移除所有界面
Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(
            builder: (_) => LoginPage()),
            (Route route) => false);

以上介紹的是由A界面跳轉(zhuǎn)到B界面的方法和參數(shù),下面是一些回退界面的方法和說明:

//返回上個界面
 Navigator.pop(context);
//先返回到上個界面，然后在跳轉(zhuǎn)到指定界面
 Navigator.popAndPushNamed(context, pageName);
//返回到某個界面
Navigator.popUntil(context, ModalRoute.withName(pageName));

這里有一個注意的點在于回退到具體某個界面時需要指定界面的路由名稱，然而通過動態(tài)跳轉(zhuǎn)方式時是沒有名稱的，所以可以通過以下方式在跳轉(zhuǎn)時為界面指定路由名稱

Navigator.push(
                    context,
                    MaterialPageRoute(
                      settings: RouteSettings(name: "Foo"),
                        builder: (_) => HomePage(),
                    )
                );

上訴代碼中settings中name屬性就是HomePage界面的路由名稱

• 底部導(dǎo)航欄:一個完整的App一般都是有多個模塊組成，iOS原生采用TabBarController實現(xiàn)模塊劃分功能，而flutter則采用BottomNavigationBar實現(xiàn)同樣的效果，對于該組件沒有特別需要注意的點，只需要對照API即可

這篇文章只是簡單介紹下flutter，后續(xù)還會對開發(fā)過程中踩過坑進(jìn)行總結(jié)。由于本人也是剛接觸不久，所以難免有錯誤和不足。有理解錯誤或者不足的地方希望大家諒解和指正