編寫第一個(gè)APP

在編寫APP之前，dart語法不多說，框架層要做到 了解init等生命周期，狀態(tài)基，類是怎么創(chuàng)建的，類和界面什么關(guān)系，文件和類什么關(guān)系

直接了解概念也許不好理解，就從實(shí)踐開始入手。

main()函數(shù)是整個(gè)flutter界面的入口，從main()函數(shù)開始實(shí)現(xiàn)如下界面
傳送門https://github.com/OpenFlutter/Flutter-Notebook
里面有很多demo

image.png

這是一個(gè)首頁
先不管首頁有什么，我們?nèi)绻朐谥黜摦嬌先c(diǎn)什么，就要有個(gè)思路

void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {}

這兩句話系統(tǒng)以及幫我們創(chuàng)建好了，先不用管MyApp繼承自什么，@override這是表示下面跟著的方法是重寫方法
重寫 Widget build(BuildContext context) {}是為了讓我們自定義界面

內(nèi)容很簡單

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter bottomNavigationBar',
      home: BottomNavigationWidget(),
    );
  }
}

return內(nèi)屬性可以看字面意思，這里home對應(yīng)的BottomNavigationWidget()就是我們要在首頁里繪制什么東西
也可以寫成 home:new BottomNavigationWidget(),

其實(shí)title也可以去掉
所以首頁需要的最重要的元素就是 home 對應(yīng)的 widget

這里可以很容易聯(lián)想結(jié)論 在flutter里，一切皆widget

這里畫了一個(gè)簡易層級結(jié)構(gòu)

image.png

所有的白色區(qū)域都是一塊widget 包括main()函數(shù)內(nèi)也是一個(gè)StatefulWidget

MaterialApp():開啟一個(gè)app布局 元素包含 home，title，theme等系統(tǒng)屬性
Scaffold():有狀態(tài)的布局，類似于一個(gè)控制器，屬性包含appBar,bottomNavigationBar 等等全局級別
Container():無狀態(tài)布局，類似于一個(gè)界面，屬性包含 margin，padding，width，height等布局級別

復(fù)雜容器
GridView() 網(wǎng)格布局
ListView() 列表
Stack() 堆疊式，如兩個(gè)視圖的重疊
SliverList() 流式 常用于首頁等復(fù)合型界面 可添加多個(gè)子控件，以線性下拉

簡易容器
Text() 文字 與iOS中UILabel的區(qū)別是不支持自定義位置，如果需要自定義位置，外界可以用Container ()包裝，如Container (child:Text('123'))

InkWell() 水波紋效果 用于按鈕點(diǎn)擊

return Container(
    alignment: Alignment.center,
    child: new InkWell(//水波紋
      onTap:(){
        menuTap(index);
      },
  )
)