Flutter一切皆組件键袱！

Dart基礎(chǔ)語法可以參看這個網(wǎng)址: https://juejin.im/post/5dac7b93e51d45248c7b5182
組件詳細的屬性資料可以參看這個網(wǎng)址: https://book.flutterchina.club/

用Android布局的角度來看Flutter

Flutter控件本身通常由許多小型徽诲、單用途的控件組成刹帕，結(jié)合起來產(chǎn)生強大的效果，例如谎替，Container是一種常用的控件偷溺，由負責布局、繪畫钱贯、定位和大小調(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：當前界面所顯示的主要內(nèi)容 Widget。
3示辈、floatingActionButton：Material設(shè)計中所定義的 FAB寥茫，界面的主要功能按鈕。
4矾麻、persistentFooterButtons：固定在下方顯示的按鈕纱耻，比如對話框下方的確定、取消按鈕险耀。
5膝迎、drawer：側(cè)邊欄控件。
6胰耗、backgroundColor： 內(nèi)容的背景顏色限次，默認使用的是 ThemeData.scaffoldBackgroundColor 的值。
7柴灯、bottomNavigationBar： 顯示在頁面底部的導航欄卖漫。
8、resizeToAvoidBottomPadding：類似于 Android 中的
9赠群、android:windowSoftInputMode=”adjustResize”羊始，控制界面內(nèi)容 body 是否重新布局來避免底部被覆蓋了，比如當鍵盤顯示的時候查描，重新布局避免被鍵盤蓋住內(nèi)容突委。默認值為 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：在標題前面顯示的一個控件，在首頁通常顯示應(yīng)用的 logo蒲每；在其他界面通常顯示為返回按鈕
2纷跛、 title： Toolbar 中主要內(nèi)容，通常顯示為當前界面的標題文字邀杏。
3贫奠、actions：一個 Widget 列表，代表 Toolbar 中所顯示的菜單，對于常用的菜單叮阅，通常使用刁品。4泣特、IconButton 來表示浩姥；對于不常用的菜單通常使用 PopupMenuButton 來顯示為三個點，點擊后彈出二級菜單状您。
5勒叠、 bottom：一個 AppBarBottomWidget 對象，通常是 TabBar膏孟。用來在 Toolbar 標題下面顯示一個 Tab 導航欄眯分。
6、elevation：紙墨設(shè)計中控件的 z 坐標順序柒桑，默認值為 4弊决，對于可滾動的 SliverAppBar，當 SliverAppBar 和內(nèi)容同級的時候魁淳，該值為 0飘诗， 當內(nèi)容滾動 SliverAppBar 變?yōu)?Toolbar 的時候，修改 elevation 的值 flexibleSpace：一個顯示在 AppBar 下方的控件界逛，高度和 AppBar 高度一樣昆稿，可以實現(xiàn)一些特殊的效果，該屬性通常在 SliverAppBar 中使用
7息拜、backgroundColor：APP bar 的顏色溉潭，默認值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
8少欺、 brightness：App bar 的亮度喳瓣，有白色和黑色兩種主題，默認值為 ThemeData.primaryColorBrightness
9赞别、 iconTheme：App bar 上圖標的顏色夫椭、透明度、和尺寸信息氯庆。默認值為 ThemeData.primaryIconTheme
10蹭秋、 textTheme： App bar 上的文字樣式。默認值為 ThemeData.primaryTextTheme
11堤撵、 centerTitle： 標題是否居中顯示仁讨，默認值根據(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
  容器实昨，一個常用的控件洞豁，由基本的繪制、位置和大小控件組成。負責創(chuàng)建矩形的可視元素丈挟，可以用BoxDecoration來設(shè)計樣式刁卜，比如背景、邊框和陰影曙咽，Container也有邊距蛔趴、填充和大小限制，另外例朱，還可以在三維空間利用矩陣進行變換孝情。

沒有子控件的容器盡可能大，除非傳入的大小約束是無限的洒嗤，在這種情況下箫荡，它們盡可能小。有子控件的容器將自己的尺寸給他們的孩子渔隶。我們可以通過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控件能強制子控件具有特定寬度、高度或兩者都有
  類似線性布局制定高寬

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

• AspectRatio
  AspectRatio控件能強制子小部件的寬度和高度具有給定的寬高比终吼，以寬度與高度的比例表示镀赌。

 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ù)介紹：（相當于Android的ImageView的scaleType參數(shù)）

fill 通過篡改原始寬高比來填充目標box
contain 在盡可能大的情況下辽狈，仍然將源完全包含在目標框中慈参。
cover 盡可能小，同時仍然覆蓋整個目標框刮萌。
fitWidth 確保顯示源的全部寬度驮配，而不管這是否意味著源垂直溢出目標框。
fitHeight 確保顯示源的全部高度着茸，而不管這是否意味著源水平地溢出目標框壮锻。
none 在目標框中對齊源（默認為居中），并放棄位于框外的源的任何部分涮阔。源圖像未調(diào)整大小猜绣。
scaleDown 在目標框中對齊源(默認為居中)，如果需要敬特，將源縮小以確保源適合該框掰邢。這與contain的內(nèi)容相同，如果該內(nèi)容會收縮圖像伟阔，那么它就是none辣之。

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

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

• Expanded組件可以使Row康铭、Column、Flex等子組件在其主軸方向上展開并填充可用空間(例如梳猪，Row在水平方向麻削，Column在垂直方向)蒸痹。如果多個子組件展開，可用空間會被其flex factor(表示擴展的速度呛哟、比例)分割
• Text
  用來顯示文本的控件叠荠，當然還有很多樣式，具體請看源碼

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

• Icon
  圖標控件扫责，按照IconData中所描述的規(guī)則繪制榛鼎，顯示Material中預(yù)定義的IconDatas。

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

最基礎(chǔ)的HelloWold代碼鳖孤。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Text(
           'HelloWold',
           textAlign:TextAlign.left,
           overflow:TextOverflow.ellipsis,
           maxLines: 1,
           style: TextStyle(
               fontSize:25.0,
               color:Color.fromARGB(255, 255, 150, 150),
               decoration:TextDecoration.underline,
               decorationStyle:TextDecorationStyle.solid,
            ),
           )
          ),
        ),
      );
  }
}

Container（容器控件）在Flutter是經(jīng)常使用的控件者娱，它就相當于我們HTML里的<div>標簽
bottomCenter:下部居中對齊。
botomLeft: 下部左對齊苏揣。
bottomRight：下部右對齊黄鳍。
center：縱橫雙向居中對齊。
centerLeft：縱向居中橫向居左對齊平匈。
centerRight：縱向居中橫向居右對齊框沟。
topLeft：頂部左側(cè)對齊。
topCenter：頂部居中對齊增炭。
topRight： 頂部居左對齊

TextAlign屬性就是文本的對齊方式忍燥，它的屬性值有如下幾個
center: 文本以居中形式對齊。
left:左對齊隙姿，經(jīng)常使用梅垄，讓文本居左進行對齊。
right :右對齊队丝。
start:以開始位置進行對齊，類似于左對齊饲嗽。
end: 以為本結(jié)尾處進行對齊，不常用吞加。類似右對齊.

overflow屬性是用來設(shè)置文本溢出時，它有幾個常用的值供我們選擇袄膏。
clip：直接切斷践图，剩下的文字就沒有了，感覺不太友好沉馆，體驗性不好码党。
ellipsis: 在后邊顯示省略號德崭。
fade: 溢出的部分會進行一個漸變消失的效果，當然是上線的漸變揖盘，不是左右的眉厨。

Image圖片組件的使用

Image.asset: 加載資源圖片，就是加載項目資源目錄中的圖片,加入圖片后會增大打包的包體體積兽狭，用的是相對路徑憾股。
Image.network: 網(wǎng)絡(luò)資源圖片，意思就是你需要加入一段http://xxxx.xxx的這樣的網(wǎng)絡(luò)路徑地址箕慧。
Image.file: 加載本地圖片服球，就是加載本地文件中的圖片，這個是一個絕對路徑颠焦，跟包體無關(guān)斩熊。
Image.memory: 加載Uint8List資源圖片,這個我目前用的不是很多，所以沒什么發(fā)言權(quán)蒸健。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            child:new Image.network(
              'https://file.40017.cn/groundtraffic/ticketmachine/img/apple_index_01.png',
              scale:1.0,
            ),
            width:300.0,
            height:200.0,
            color: Colors.lightBlue,
          ),
          ),
        ),
      );
  }
}

fit屬性的設(shè)置

fit屬性可以控制圖片的拉伸和擠壓座享，這些都是根據(jù)圖片的父級容器的婉商。

• BoxFit.fill:全圖顯示似忧，圖片會被拉伸，并充滿父容器丈秩。

• BoxFit.contain:全圖顯示盯捌，顯示原比例，可能會有空隙蘑秽。

• BoxFit.cover：顯示可能拉伸饺著，可能裁切，充滿（圖片要充滿整個容器肠牲，還不變形）幼衰。

• BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸缀雳，可能裁切渡嚣。

• BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切肥印。

• BoxFit.scaleDown：效果和contain差不多识椰，但是此屬性不允許顯示超過源圖片大小，可小不可大深碱。

ListView 列表組件

final List<Product> products = List.generate(
    20, (i) => Product('商品 ${i+1}','這是一個商品詳情腹鹉，編號為:${i+1}')
  );

class Product{
  final String title;  //商品標題
  final String description;  //商品描述
  Product(this.title, this.description);
}

class ProductList extends StatelessWidget{
  final List<Product> products;
  ProductList({Key key,@required this.products}):super(key:key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('商品列表')),
      body:ListView.builder(
        itemCount:products.length,
        itemBuilder: (context,index){
          return ListTile(
            title:Text(products[index].title),
            onTap:(){
              Navigator.push(context, MaterialPageRoute(
                  builder: (context) => ProductDetail(product: products[index])
                )
              );
            }
          );
        },
      )
    );
  }
}

感謝王偉desire ，技術(shù)胖的分享學習了flutter的基礎(chǔ)組件和布局