1.Container

• Container類似于android中的ViewGroup。可以實現設置背景顏色、背景圖片、加邊框、加圓角、各方向對齊等功能，是項目中經常用到的Widget。
• 對于一個沒有子Widget的Container，在沒有一些約束的條件時，它會盡可能的大；而一旦有了約束或者子Widget，它就會變得盡可能小。

• key：Container唯一標識符，用于查找更新。
• alignment：控制child的對齊方式，如果container或者container父節點尺寸大于child的尺寸，這個屬性設置會起作用，有很多種對齊方式。
• padding：decoration內部的空白區域，如果有child的話，child位于padding內部。padding與margin的不同之處在于，padding是包含在content內，而margin則是外部邊界，設置點擊事件的話，padding區域會響應，而margin區域不會響應。
• color：用來設置container背景色，如果foregroundDecoration設置的話，可能會遮蓋color效果。
• decoration：Decoration是對Container進行裝飾的描述。其概念類似與android中的shape。一般實際場景中會使用他的子類BoxDecoration。BoxDecoration提供了對背景色，邊框，圓角，陰影和漸變等功能的定制能力。注意設置了decoration，就不能設置color屬性，否則會報錯，此時應該在decoration中進行顏色的設置。
• foregroundDecoration：繪制在child前面的裝飾。
• width：container的寬度，設置為double.infinity可以強制在寬度上撐滿，不設置，則根據child和父節點兩者一起布局。
• height：container的高度，設置為double.infinity可以強制在高度上撐滿。
• constraints：添加到child上額外的約束條件。
• margin：圍繞在decoration和child之外的空白區域，不屬于內容區域。
• transform：設置container的變換矩陣，類型為Matrix4。
• child：container中的內容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：設置文本的樣式，要求TextStyle類型，可以設置字體顏色、大小、字間距等等。

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

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

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：用來加載網絡圖片
• Image.memory：用來加載Uint8List資源（byte數組）圖片

圖片格式上支持： JPEG , PNG ,GIF , 動態 GIF , WebP , 動態WebP , BMP WBMP .

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

例子

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>[
              //加載網絡圖片
              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

圖標組件Icon展示圖標的組件，該組件不可交互，要實現交互圖標，可以考慮使用IconButton組件。圖標相關組件有以下幾個：

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

常用屬性

IconButton

圖標按鈕組件IconButton是基于Meterial Design風格的組件，可以響應按下的事件，并且按下時帶水波紋效果。如果它的onPressed回調函數為null，那么這個按鈕處于禁用狀態，并且不可按下。

常用屬性