項目演示github地址

Flutter for Android 開發(fā)者

用Android布局的角度來看Flutter

Flutter控件本身通常由許多小型端三、單用途的控件組成舷礼，結(jié)合起來產(chǎn)生強(qiáng)大的效果，例如技肩，Container是一種常用的控件且轨，由負(fù)責(zé)布局、繪畫虚婿、定位和大小調(diào)整的幾個控件組成旋奢，具體來說，Container是由LimitedBox然痊、ConstrainedBox至朗、 Align、Padding剧浸、DecoratedBox和Transform控件組成锹引，而不是將Container子類化來產(chǎn)生自定義效果，您可以用這種新穎的方式組合這些以及其他簡單的控件唆香。

在寫應(yīng)用程序時嫌变，經(jīng)常會使用StatelessWidget和StatefulWidget編寫新控件，兩者的差別在于你是否要管理控件的狀態(tài)躬它。一個控件的主要任務(wù)是實現(xiàn)build函數(shù)腾啥，定義控件中其他較低層次的控件。build函數(shù)將依次構(gòu)建這些控件，直到底層渲染對象倘待。

• Scaffold

Scaffold 實現(xiàn)了基本的Material Design布局結(jié)構(gòu)疮跑。也就是說， MaterialApp 的 child 是 Scaffold Widget凸舵。
在Material設(shè)計中定義的單個界面上的各種布局元素祖娘，在 Scaffold 中都有支持，比如 左邊欄（Drawers）啊奄、snack bars渐苏、以及 bottom sheets。
Scaffold 有下面幾個主要屬性：

1增热、appBar：顯示在界面頂部的一個 AppBar整以，也就是 Android 中的 ActionBar 胧辽、Toolbar峻仇。
2、body：當(dāng)前界面所顯示的主要內(nèi)容 Widget邑商。
3摄咆、floatingActionButton：Material設(shè)計中所定義的 FAB，界面的主要功能按鈕人断。
4吭从、persistentFooterButtons：固定在下方顯示的按鈕，比如對話框下方的確定恶迈、取消按鈕涩金。
5、drawer：側(cè)邊欄控件暇仲。
6步做、backgroundColor： 內(nèi)容的背景顏色，默認(rèn)使用的是 ThemeData.scaffoldBackgroundColor 的值奈附。
7全度、bottomNavigationBar： 顯示在頁面底部的導(dǎo)航欄。
8斥滤、resizeToAvoidBottomPadding：類似于 Android 中的
9将鸵、android:windowSoftInputMode=”adjustResize”，控制界面內(nèi)容 body 是否重新布局來避免底部被覆蓋了佑颇，比如當(dāng)鍵盤顯示的時候顶掉，重新布局避免被鍵盤蓋住內(nèi)容。默認(rèn)值為 true挑胸。

• Appbar

AppBar 和 SliverAppBar 是Material Design中的 App Bar痒筒，也就是 Android 中的 Toolbar，關(guān)于 Toolbar 的設(shè)計指南請參考Material Design中 Toolbar 的內(nèi)容。
AppBar 和 SliverAppBar 都是繼承StatefulWidget 類凸克，都代表 Toobar议蟆，二者的區(qū)別在于 AppBar 位置的固定的應(yīng)用最上面的；而 SliverAppBar 是可以跟隨內(nèi)容滾動的萎战。

他們的主要屬性如下：
1咐容、 leading：在標(biāo)題前面顯示的一個控件，在首頁通常顯示應(yīng)用的 logo蚂维；在其他界面通常顯示為返回按鈕
2戳粒、 title： Toolbar 中主要內(nèi)容，通常顯示為當(dāng)前界面的標(biāo)題文字虫啥。
3蔚约、actions：一個 Widget 列表，代表 Toolbar 中所顯示的菜單涂籽，對于常用的菜單苹祟，通常使用。4评雌、IconButton 來表示树枫；對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個點，點擊后彈出二級菜單景东。
5砂轻、 bottom：一個 AppBarBottomWidget 對象，通常是 TabBar斤吐。用來在 Toolbar 標(biāo)題下面顯示一個 Tab 導(dǎo)航欄搔涝。
6、elevation：紙墨設(shè)計中控件的 z 坐標(biāo)順序和措，默認(rèn)值為 4庄呈，對于可滾動的 SliverAppBar，當(dāng) SliverAppBar 和內(nèi)容同級的時候臼婆，該值為 0抒痒， 當(dāng)內(nèi)容滾動 SliverAppBar 變?yōu)?Toolbar 的時候，修改 elevation 的值 flexibleSpace：一個顯示在 AppBar 下方的控件颁褂，高度和 AppBar 高度一樣故响，可以實現(xiàn)一些特殊的效果，該屬性通常在 SliverAppBar 中使用
7颁独、backgroundColor：APP bar 的顏色彩届，默認(rèn)值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
8誓酒、 brightness：App bar 的亮度樟蠕，有白色和黑色兩種主題贮聂，默認(rèn)值為 ThemeData.primaryColorBrightness
9、 iconTheme：App bar 上圖標(biāo)的顏色寨辩、透明度吓懈、和尺寸信息。默認(rèn)值為 ThemeData.primaryIconTheme
10靡狞、 textTheme： App bar 上的文字樣式耻警。默認(rèn)值為 ThemeData.primaryTextTheme
11、 centerTitle： 標(biāo)題是否居中顯示甸怕，默認(rèn)值根據(jù)不同的操作系統(tǒng)甘穿，顯示方式不一樣

基本組件

ClipRRect 給圖片加圓角

 child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(4.0),
                        topRight: Radius.circular(4.0),
                      ),
                      child: Image.network(
                        'http://img3.3lian.com/2013/c4/95/d/18.jpg',
                        fit: BoxFit.cover,
                      ),
                    ),

• Container
  容器，一個常用的控件梢杭，由基本的繪制温兼、位置和大小控件組成。負(fù)責(zé)創(chuàng)建矩形的可視元素武契，可以用BoxDecoration來設(shè)計樣式募判，比如背景、邊框和陰影吝羞，Container也有邊距兰伤、填充和大小限制内颗，另外钧排，還可以在三維空間利用矩陣進(jìn)行變換。

沒有子控件的容器盡可能大均澳，除非傳入的大小約束是無限的恨溜，在這種情況下，它們盡可能小找前。有子控件的容器將自己的尺寸給他們的孩子糟袁。我們可以通過width、height和 constraints屬性控制size躺盛。

• BoxDecoration
  裝飾器项戴，可以用來修飾其他的組件，和Android里面的shape很相似

    const BoxDecoration({
    this.color,//背景色
    this.image,//圖片
    this.border,//描邊
    this.borderRadius,//圓角大小
    this.boxShadow,//陰影
    this.gradient,//過度效果
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,//形狀,BoxShape.circle和borderRadius不能同時使用
    })

• SizedBox
  SizedBox控件能強(qiáng)制子控件具有特定寬度槽惫、高度或兩者都有
  類似線性布局制定高寬

 body: new SizedBox(
        width: 250.0,
        height: 250.0,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.lightBlueAccent[100],
          ),
        ),
      ),
    );

• AspectRatio
  AspectRatio控件能強(qiáng)制子小部件的寬度和高度具有給定的寬高比周叮，以寬度與高度的比例表示。

 body: new AspectRatio(
        aspectRatio: 3.0 / 2.0,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.lightBlueAccent[100],
          ),
        ),
      ),
    );

• Row
  flex水平布局控件界斜，能夠?qū)⒆涌丶脚帕蟹碌ⅲ腔赪eb的flexbox的布局模式設(shè)計的。
  Row子控件有靈活與不靈活的兩種各薇，Row首先列出不靈活的子控件项贺，減去它們的總寬度，計算還有多少可用的空間。然后Row按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控件开缎。要控制靈活子控件棕叫，需要使用Expanded控件。
  注意該控件不支持滑動奕删，如果子控件超過剩余空間谍珊，會報錯，如果想支持水平滑動急侥，考慮使用ListView砌滞。
  如果只有一個子控件，可以使用 Align or Center控件定義該子控件位置坏怪。

new Row(
  children: <Widget>[
    new Expanded(
      child: new Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    new Expanded(
      child: new Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    new Expanded(
      child: new FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

• Column
  flex垂直布局控件贝润，能夠?qū)⒆涌丶怪迸帕小?br> 用法與Row控件一樣。

• Image
  顯示圖像的控件铝宵，Image控件有多種構(gòu)造函數(shù)：
  new Image打掘，用于從ImageProvider獲取圖像。
  new Image.asset鹏秋，用于使用key從AssetBundle獲取圖像尊蚁。
  new Image.network，用于從URL地址獲取圖像侣夷。
  new Image.file横朋，用于從File獲取圖像。

Image里面的BoxFit參數(shù)介紹：（相當(dāng)于Android的ImageView的scaleType參數(shù)）

fill 通過篡改原始寬高比來填充目標(biāo)box
contain 在盡可能大的情況下百拓，仍然將源完全包含在目標(biāo)框中琴锭。
cover 盡可能小，同時仍然覆蓋整個目標(biāo)框衙传。
fitWidth 確保顯示源的全部寬度决帖，而不管這是否意味著源垂直溢出目標(biāo)框。
fitHeight 確保顯示源的全部高度蓖捶，而不管這是否意味著源水平地溢出目標(biāo)框地回。
none 在目標(biāo)框中對齊源（默認(rèn)為居中），并放棄位于框外的源的任何部分俊鱼。源圖像未調(diào)整大小刻像。
scaleDown 在目標(biāo)框中對齊源(默認(rèn)為居中)，如果需要亭引，將源縮小以確保源適合該框绎速。這與contain的內(nèi)容相同，如果該內(nèi)容會收縮圖像焙蚓，那么它就是none纹冤。

-MainAxisAlignment和CrossAxisAlignment簡介
MainAxisAlignment（主軸）和CrossAxisAlignment（交叉軸）常用于Row和Column控件中洒宝，主要是用來控制子控件排列的位置，并可以配合textDirection和verticalDirection屬性來控制子控件排列的方向及改變MainAxisAlignment和CrossAxisAlignment的起始位置萌京。

enum MainAxisAlignment {
 //將子控件放在主軸的開始位置
  start,  
   //將子控件放在主軸的結(jié)束位置
  end,
  //將子控件放在主軸的中間位置
  center,
  //將主軸空白位置進(jìn)行均分雁歌，排列子元素，手尾沒有空隙
  spaceBetween,
  //將主軸空白區(qū)域均分知残，使中間各個子控件間距相等靠瞎，首尾子控件間距為中間子控件間距的一半
  spaceAround,
  //將主軸空白區(qū)域均分，使各個子控件間距相等
  spaceEvenly,
}

• Expanded組件可以使Row求妹、Column乏盐、Flex等子組件在其主軸方向上展開并填充可用空間(例如，Row在水平方向制恍，Column在垂直方向)父能。如果多個子組件展開，可用空間會被其flex factor(表示擴(kuò)展的速度净神、比例)分割
• Text
  用來顯示文本的控件何吝，當(dāng)然還有很多樣式，具體請看源碼

      new Text("hello_word",
            textDirection: TextDirection.ltr,
            style: TextStyle(
              decoration: TextDecoration.overline,
              fontSize: 40.0,
              fontWeight: FontWeight.bold,
              color: Colors.black87,
            ))

• Icon
  圖標(biāo)控件鹃唯，按照IconData中所描述的規(guī)則繪制爱榕，顯示Material中預(yù)定義的IconDatas。

 new Icon(Icons.pool, size: 32.0, color: Colors.white),