1.Container

• Container類似于android中的ViewGroup?？梢詫?shí)現(xiàn)設(shè)置背景顏色、背景圖片、加邊框、加圓角、各方向?qū)R等功能，是項(xiàng)目中經(jīng)常用到的Widget。
• 對(duì)于一個(gè)沒有子Widget的Container，在沒有一些約束的條件時(shí)，它會(huì)盡可能的大；而一旦有了約束或者子Widget，它就會(huì)變得盡可能小。

• key：Container唯一標(biāo)識(shí)符，用于查找更新。
• alignment：控制child的對(duì)齊方式，如果container或者container父節(jié)點(diǎn)尺寸大于child的尺寸，這個(gè)屬性設(shè)置會(huì)起作用，有很多種對(duì)齊方式。
• padding：decoration內(nèi)部的空白區(qū)域，如果有child的話，child位于padding內(nèi)部。padding與margin的不同之處在于，padding是包含在content內(nèi)，而margin則是外部邊界，設(shè)置點(diǎn)擊事件的話，padding區(qū)域會(huì)響應(yīng)，而margin區(qū)域不會(huì)響應(yīng)。
• color：用來設(shè)置container背景色，如果foregroundDecoration設(shè)置的話，可能會(huì)遮蓋color效果。
• decoration：Decoration是對(duì)Container進(jìn)行裝飾的描述。其概念類似與android中的shape。一般實(shí)際場(chǎng)景中會(huì)使用他的子類BoxDecoration。BoxDecoration提供了對(duì)背景色，邊框，圓角，陰影和漸變等功能的定制能力。注意設(shè)置了decoration，就不能設(shè)置color屬性，否則會(huì)報(bào)錯(cuò)，此時(shí)應(yīng)該在decoration中進(jìn)行顏色的設(shè)置。
• foregroundDecoration：繪制在child前面的裝飾。
• width：container的寬度，設(shè)置為double.infinity可以強(qiáng)制在寬度上撐滿，不設(shè)置，則根據(jù)child和父節(jié)點(diǎn)兩者一起布局。
• height：container的高度，設(shè)置為double.infinity可以強(qiáng)制在高度上撐滿。
• constraints：添加到child上額外的約束條件。
• margin：圍繞在decoration和child之外的空白區(qū)域，不屬于內(nèi)容區(qū)域。
• transform：設(shè)置container的變換矩陣，類型為Matrix4。
• child：container中的內(nèi)容widget。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'container',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('container'),
        ),
        body: Container(
          child: Text('xhhsasasashs'),
          height: 400.0,
          alignment: Alignment.bottomCenter,
//          color: Colors.redAccent,
          padding: EdgeInsets.all(20.0),
          margin: EdgeInsets.all(12.0),
          decoration: BoxDecoration(
            border: Border.all(
                color: Color(0xffff2200), width: 8.0, style: BorderStyle.solid
            ),
            color: Colors.grey,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            image: new DecorationImage(
              image: NetworkImage('https://www.baidu.com/img/bd_logo1.png'),
              fit: BoxFit.fitWidth
            ),
          ),
          constraints: BoxConstraints(
            maxHeight: 500.0
          )
        ),
      ),
    );
  }
}

2.Text

Text 控件是用來顯示一段文本的

• style：設(shè)置文本的樣式，要求TextStyle類型，可以設(shè)置字體顏色、大小、字間距等等。

const TextStyle({
    this.inherit: true,         // 為false的時(shí)候不顯示
    this.color,                    // 顏色 
    this.fontSize,               // 字號(hào)
    this.fontWeight,           // 繪制文本時(shí)使用的字體粗細(xì)，加粗也用這個(gè)字段 
    this.fontStyle,                // FontStyle.normal  FontStyle.italic斜體
    this.letterSpacing,        // 字符間距  就是單個(gè)字母或者漢字之間的間隔，可以是負(fù)數(shù)
    this.wordSpacing,        // 字間距 句字之間的間距
    this.textBaseline,        // 基線，兩個(gè)值，字面意思是一個(gè)用來排字母的，一人用來排表意字的（類似中文）
    this.height,                // 當(dāng)用來Text控件上時(shí)，行高（會(huì)乘以fontSize,所以不以設(shè)置過大）
    this.decoration,        // 添加上劃線，下劃線，刪除線 
    this.decorationColor,    // 劃線的顏色
    this.decorationStyle,    // 這個(gè)style可能控制畫實(shí)線，虛線，兩條線，點(diǎn), 波浪線等
    this.debugLabel,
    String fontFamily,    // 字體
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       assert(inherit != null);

• textAlign：對(duì)齊方式
• textDirection：跟textAlign相似，TextDirection.ltr文本從左到右
• softWrap：是否需要換行。默認(rèn)為true
• overflow：超出文本處理，clip 裁剪，ellipsis 顯示省略號(hào)，fade 文本淡化
• maxLines：最大行數(shù)

RichText

RichText：Text 只能顯示一種樣式的文字，如果你想在一段文字中顯示多種樣式的話 ，就需要使用 RichText 了。

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

3.Image

• Image：通過ImageProvider來加載圖片
• Image.asset：用來加載本地資源圖片
• Image.file：用來加載本地（File文件）圖片
• Image.network：用來加載網(wǎng)絡(luò)圖片
• Image.memory：用來加載Uint8List資源（byte數(shù)組）圖片

圖片格式上支持： JPEG , PNG ,GIF , 動(dòng)態(tài) GIF , WebP , 動(dòng)態(tài)WebP , BMP WBMP .

• width & height
  用來指定顯示圖片區(qū)域的寬高（并非圖片的寬高）
• fit
  設(shè)置圖片填充，類似于Android中的ScaleType
  • BoxFit.none
    原始大小居中
  • BoxFit.contain
    包含，不改變?cè)斜壤屓萜靼麄€(gè)圖片，容器多余部分填充背景
  • BoxFit.cover
    覆蓋，不改變?cè)斜壤?，讓圖片充滿整個(gè)容器，圖片多余部分裁剪
  • BoxFit.fill
    填充，忽略原有的寬高比，填滿為止
  • BoxFit.fitHeight
    縱向圖片填充
  • BoxFit.fitWidth
    橫向圖片填充
  • BoxFit.scaleDown
    圖片大小小于容器事相當(dāng)于none，圖片大小大于容器時(shí)縮小圖片大小實(shí)現(xiàn)contain
• color & colorBlendMode
  這兩個(gè)屬性需要配合使用，就是顏色和圖片混合，就類似于Android中的Xfermode，一般少用到
• alignment
  用來控制圖片擺放的位置
• repeat
  用來設(shè)置圖片重復(fù)顯示（repeat-x水平重復(fù)，repeat-y垂直重復(fù)，repeat兩個(gè)方向都重復(fù)，no-repeat默認(rèn)情況不重復(fù)），就是填充view時(shí)候的不同方式。
• centerSlice
  設(shè)置圖片內(nèi)部拉伸，相當(dāng)于在圖片內(nèi)部設(shè)置了一個(gè).9圖，但是需要注意的是，要在顯示圖片的大小大于原圖的情況下才可以使用這個(gè)屬性，要不然會(huì)報(bào)錯(cuò).理由是下面這個(gè)源碼：
  assert(sourceSize == inputSize, 'centerSlice was used with a BoxFit that does not guarantee that the image is fully visible.');
• matchTextDirection
  這個(gè)需要配合Directionality進(jìn)行使用
• gaplessPlayback
  當(dāng)圖片發(fā)生改變之后，重新加載圖片過程中的樣式

例子

import 'dart:io';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:typed_data';

import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

//assets/images/tzd.jpg
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    debugPaintSizeEnabled = true;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image demo'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              //加載網(wǎng)絡(luò)圖片
              Image.network(
                'https://www.baidu.com/img/bd_logo1.png?where=super',
                width: 100.0,
                height: 100.0,
              ),

              //加載Assets
              Image.asset(
                'assets/images/tzd.jpg',
                width: 200.0,
                height: 200.0,
              ),

              //Memory
              MemoryImageWidget(),

              //從文件加載圖片
              FileImageWidget(),
            ],
          ),
        ),
      ),
    );
  }
}

class FileImageWidget extends StatefulWidget {
  @override
  _FileImageWidgetState createState() => _FileImageWidgetState();
}

class _FileImageWidgetState extends State<FileImageWidget> {
  File _image;

  Future getImge() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Center(
          child: _image == null
              ? Text('未選擇圖片！')
              : Image.file(
                  _image,
                  width: 200.0,
                  height: 200.0,
                ),
        ),
        FlatButton(
          onPressed: getImge,
          child: Text(
            '選擇圖片',
            style: TextStyle(
              color: Color(0xff0000ff),
            ),
          ),
        ),
      ],
    );
  }
}

//stf StatefulWidget快捷鍵， stl StatelessWidget快捷鍵
class MemoryImageWidget extends StatefulWidget {
  @override
  _MemoryImageWidgetState createState() => _MemoryImageWidgetState();
}

class _MemoryImageWidgetState extends State<MemoryImageWidget> {
  Uint8List bytes;

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/images/tzd.jpg').then((data) {
      if (mounted) {
        setState(() {
          bytes = data.buffer.asUint8List();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final _decoration = BoxDecoration(
      image: bytes == null ? null : DecorationImage(image: MemoryImage(bytes)),
    );
    return Container(
      width: 100.0,
      height: 100.0,
      decoration: _decoration,
    );
  }
}

4.Icon

圖標(biāo)組件Icon展示圖標(biāo)的組件，該組件不可交互，要實(shí)現(xiàn)交互圖標(biāo)，可以考慮使用IconButton組件。圖標(biāo)相關(guān)組件有以下幾個(gè)：

• IconButton：可交互的Icon
• Icons：框架自帶Icon集合
• IconTheme：Icon主題
• ImageIcon：通過AssetImages或者其他圖片顯示Icon

常用屬性

IconButton

圖標(biāo)按鈕組件IconButton是基于Meterial Design風(fēng)格的組件，可以響應(yīng)按下的事件，并且按下時(shí)帶水波紋效果。如果它的onPressed回調(diào)函數(shù)為null，那么這個(gè)按鈕處于禁用狀態(tài)，并且不可按下。

常用屬性