Flutter一切皆組件！

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

用Android布局的角度來看Flutter

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

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

• Scaffold

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

1、appBar：顯示在界面頂部的一個(gè) AppBar，也就是 Android 中的 ActionBar 、Toolbar。
2、body：當(dāng)前界面所顯示的主要內(nèi)容 Widget。
3、floatingActionButton：Material設(shè)計(jì)中所定義的 FAB，界面的主要功能按鈕。
4、persistentFooterButtons：固定在下方顯示的按鈕，比如對(duì)話框下方的確定、取消按鈕。
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)鍵盤顯示的時(shí)候，重新布局避免被鍵盤蓋住內(nèi)容。默認(rèn)值為 true。

• Appbar

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

他們的主要屬性如下：
1、 leading：在標(biāo)題前面顯示的一個(gè)控件，在首頁通常顯示應(yīng)用的 logo；在其他界面通常顯示為返回按鈕
2、 title： Toolbar 中主要內(nèi)容，通常顯示為當(dāng)前界面的標(biāo)題文字。
3、actions：一個(gè) Widget 列表，代表 Toolbar 中所顯示的菜單，對(duì)于常用的菜單，通常使用。4、IconButton 來表示；對(duì)于不常用的菜單通常使用 PopupMenuButton 來顯示為三個(gè)點(diǎn)，點(diǎn)擊后彈出二級(jí)菜單。
5、 bottom：一個(gè) AppBarBottomWidget 對(duì)象，通常是 TabBar。用來在 Toolbar 標(biāo)題下面顯示一個(gè) Tab 導(dǎo)航欄。
6、elevation：紙墨設(shè)計(jì)中控件的 z 坐標(biāo)順序，默認(rèn)值為 4，對(duì)于可滾動(dòng)的 SliverAppBar，當(dāng) SliverAppBar 和內(nèi)容同級(jí)的時(shí)候，該值為 0， 當(dāng)內(nèi)容滾動(dòng) SliverAppBar 變?yōu)?Toolbar 的時(shí)候，修改 elevation 的值 flexibleSpace：一個(gè)顯示在 AppBar 下方的控件，高度和 AppBar 高度一樣，可以實(shí)現(xiàn)一些特殊的效果，該屬性通常在 SliverAppBar 中使用
7、backgroundColor：APP bar 的顏色，默認(rèn)值為 ThemeData.primaryColor。改值通常和下面的三個(gè)屬性一起使用
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
  容器，一個(gè)常用的控件，由基本的繪制、位置和大小控件組成。負(fù)責(zé)創(chuàng)建矩形的可視元素，可以用BoxDecoration來設(shè)計(jì)樣式，比如背景、邊框和陰影，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不能同時(shí)使用
    })

• 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ū)⒆涌丶脚帕?，是基于Web的flexbox的布局模式設(shè)計(jì)的。
  Row子控件有靈活與不靈活的兩種，Row首先列出不靈活的子控件，減去它們的總寬度，計(jì)算還有多少可用的空間。然后Row按照Flexible.flex屬性確定的比例在可用空間中列出靈活的子控件。要控制靈活子控件，需要使用Expanded控件。
  注意該控件不支持滑動(dòng)，如果子控件超過剩余空間，會(huì)報(bào)錯(cuò)，如果想支持水平滑動(dòng)，考慮使用ListView。
  如果只有一個(gè)子控件，可以使用 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 盡可能小，同時(shí)仍然覆蓋整個(gè)目標(biāo)框。
fitWidth 確保顯示源的全部寬度，而不管這是否意味著源垂直溢出目標(biāo)框。
fitHeight 確保顯示源的全部高度，而不管這是否意味著源水平地溢出目標(biāo)框。
none 在目標(biāo)框中對(duì)齊源（默認(rèn)為居中），并放棄位于框外的源的任何部分。源圖像未調(diào)整大小。
scaleDown 在目標(biāo)框中對(duì)齊源(默認(rèn)為居中)，如果需要，將源縮小以確保源適合該框。這與contain的內(nèi)容相同，如果該內(nèi)容會(huì)收縮圖像，那么它就是none。

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

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

• Expanded組件可以使Row、Column、Flex等子組件在其主軸方向上展開并填充可用空間(例如，Row在水平方向，Column在垂直方向)。如果多個(gè)子組件展開，可用空間會(huì)被其flex factor(表示擴(kuò)展的速度、比例)分割
• Text
  用來顯示文本的控件，當(dāng)然還有很多樣式，具體請(qǐ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),

最基礎(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)常使用的控件，它就相當(dāng)于我們HTML里的<div>標(biāo)簽
bottomCenter:下部居中對(duì)齊。
botomLeft: 下部左對(duì)齊。
bottomRight：下部右對(duì)齊。
center：縱橫雙向居中對(duì)齊。
centerLeft：縱向居中橫向居左對(duì)齊。
centerRight：縱向居中橫向居右對(duì)齊。
topLeft：頂部左側(cè)對(duì)齊。
topCenter：頂部居中對(duì)齊。
topRight： 頂部居左對(duì)齊

TextAlign屬性就是文本的對(duì)齊方式，它的屬性值有如下幾個(gè)
center: 文本以居中形式對(duì)齊。
left:左對(duì)齊，經(jīng)常使用，讓文本居左進(jìn)行對(duì)齊。
right :右對(duì)齊。
start:以開始位置進(jìn)行對(duì)齊，類似于左對(duì)齊。
end: 以為本結(jié)尾處進(jìn)行對(duì)齊，不常用。類似右對(duì)齊.

overflow屬性是用來設(shè)置文本溢出時(shí)，它有幾個(gè)常用的值供我們選擇。
clip：直接切斷，剩下的文字就沒有了，感覺不太友好，體驗(yàn)性不好。
ellipsis: 在后邊顯示省略號(hào)。
fade: 溢出的部分會(huì)進(jìn)行一個(gè)漸變消失的效果，當(dāng)然是上線的漸變，不是左右的。

Image圖片組件的使用

Image.asset: 加載資源圖片，就是加載項(xiàng)目資源目錄中的圖片,加入圖片后會(huì)增大打包的包體體積，用的是相對(duì)路徑。
Image.network: 網(wǎng)絡(luò)資源圖片，意思就是你需要加入一段http://xxxx.xxx的這樣的網(wǎng)絡(luò)路徑地址。
Image.file: 加載本地圖片，就是加載本地文件中的圖片，這個(gè)是一個(gè)絕對(duì)路徑，跟包體無關(guān)。
Image.memory: 加載Uint8List資源圖片,這個(gè)我目前用的不是很多，所以沒什么發(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ù)圖片的父級(jí)容器的。

• BoxFit.fill:全圖顯示，圖片會(huì)被拉伸，并充滿父容器。

• BoxFit.contain:全圖顯示，顯示原比例，可能會(huì)有空隙。

• BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個(gè)容器，還不變形）。

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

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

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

ListView 列表組件

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

class Product{
  final String title;  //商品標(biāo)題
  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ù)胖的分享學(xué)習(xí)了flutter的基礎(chǔ)組件和布局