[Flutter]flutter基礎(chǔ)之組件基礎(chǔ)(三)

一、Image Widget

Image Widget 是 Flutter 中用來(lái)顯示圖片的小部件娱局。支持以下圖像格式：JPEG彰亥，PNG，GIF衰齐，動(dòng)畫(huà)GIF任斋，WebP，動(dòng)畫(huà)WebP耻涛，BMP和WBMP 废酷。 Image Widget 提供了以下構(gòu)造函數(shù)用于創(chuàng)建圖像：

Image() ，用于從 ImageProvider 獲取圖像抹缕。

Image.asset() 澈蟆，從 AssetBundle 獲取圖像。

Image.network 卓研，從URL獲取圖像趴俘。

Image.file 睹簇，從本地文件獲取圖像。

Image.memory 寥闪，從 Uint8List 獲取圖像太惠。

1. Image() 構(gòu)造方法

const Image({
  Key key,
  //ImageProvider類型必傳參數(shù)，為要顯示的圖像
  @required this.image,
  //ImageFrameBuilder類型可選命名參數(shù)疲憋，是一個(gè)Function凿渊，返回一個(gè)代表該圖像的Widget
  this.frameBuilder,
  //ImageLoadingBuilder類型可選命名參數(shù)，用于指定在圖像加載過(guò)程中向用戶展示的Widget
  this.loadingBuilder,
  //String類型可選命名參數(shù)柜某，為圖像的語(yǔ)義標(biāo)簽
  this.semanticLabel,
  //bool類型可選命名參數(shù)嗽元，是否從語(yǔ)義中排除此圖像
  this.excludeFromSemantics = false,
  //double類型可選命名參數(shù)，圖像要顯示的寬度
  this.width,
  //double類型可選命名參數(shù)喂击，圖像要顯示的高度
  this.height,
  //Color類型可選命名參數(shù)剂癌，如果不為null，則使用colorBlendMode將此顏色與每個(gè)圖像像素混合
  this.color,
  //BlendMode類型可選命名參數(shù)翰绊，用于設(shè)置color與圖像混合的模式
  this.colorBlendMode,
  //BoxFit類型可選命名參數(shù)佩谷，用于設(shè)置圖像的填充模式
  this.fit,
  //AlignmentGeometry類型可選命名參數(shù)，設(shè)置圖像的對(duì)齊模式监嗜，其為抽象類谐檀，使用其子類Alignment
  this.alignment = Alignment.center,
  //ImageRepeat類型可選命名參數(shù)，用于設(shè)置布局中圖像的重復(fù)模式
  this.repeat = ImageRepeat.noRepeat,
  //Rect類型可選命名參數(shù)裁奇，用于設(shè)置當(dāng)一個(gè)圖片被拉伸時(shí)的范圍
  this.centerSlice,
  //bool類型可選命名參數(shù)桐猬，用于設(shè)置是否以TextDirection相同的方向來(lái)繪制圖像
  this.matchTextDirection = false,
  //bool類型可選命名參數(shù)，用于設(shè)置在圖像提供者更改時(shí)刽肠，是否繼續(xù)顯示舊圖像溃肪。
  //true為顯示舊圖像，false為暫時(shí)不顯示任何圖像
  this.gaplessPlayback = false,
  //FilterQuality類型可選命名參數(shù)音五，用于設(shè)置圖片的過(guò)濾質(zhì)量
  this.filterQuality = FilterQuality.low,
})

Image() 構(gòu)造方法的必傳參數(shù)類型為 ImageProvider 惫撰，是一個(gè)抽象類，不能直接實(shí)例化厨钻。其有5個(gè)直接子類分別為：AssetBundleImageProvider ， FileImage 坚嗜，MemoryImage 夯膀，NetworkImage ，ResizeImage 苍蔬，可以直接使用棍郎。這幾個(gè)類，是根據(jù)不同的圖片源選擇對(duì)應(yīng)的加載方式银室，使用方式如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Widget基礎(chǔ)"),
        ),
        body: studyWidget(context),
      ),
    );
  }
}

//示例代碼只修改此函數(shù)
Widget studyWidget(BuildContext context) {
  return Image(
    image: NetworkImage("http://www.mwpush.com/uploads/avatar.png"),
  );
}

2. Image.network() 構(gòu)造方法

Image.network(
  //String類型必傳參數(shù)涂佃，用于設(shè)置圖片的網(wǎng)絡(luò)URL地址
  String src, {
  Key key,
  //double類型可選命名參數(shù)励翼，圖像的縮放級(jí)別，值越大圖片越小
  double scale = 1.0,
  this.frameBuilder,
  this.loadingBuilder,
  this.semanticLabel,
  this.excludeFromSemantics = false,
  this.width,
  this.height,
  this.color,
  this.colorBlendMode,
  this.fit,
  this.alignment = Alignment.center,
  this.repeat = ImageRepeat.noRepeat,
  this.centerSlice,
  this.matchTextDirection = false,
  this.gaplessPlayback = false,
  this.filterQuality = FilterQuality.low,
  //Map<String, String>類型可選命名參數(shù)辜荠，用于發(fā)送帶有圖像請(qǐng)求的自定義的HTTP頭  
  Map<String, String> headers,
  //int類型可選命名參數(shù)汽抚，用于減少I(mǎi)mageCache的內(nèi)存使用量
  int cacheWidth,
  //int類型可選命名參數(shù)，用于減少I(mǎi)mageCache的內(nèi)存使用量  
  int cacheHeight,
}) 
//以上未注釋的參數(shù)與Image()構(gòu)造方法含義相同

本構(gòu)造方法是當(dāng)從網(wǎng)絡(luò)加載圖片時(shí)使用伯病，使用方式如下：

Widget studyWidget(BuildContext context) {
  return Image.network("http://www.mwpush.com/uploads/avatar.png");
}

在創(chuàng)建 Image Widget 時(shí)造烁，最好指定其大小，或者放在能嚴(yán)格限制其布局的上下文中午笛，否則圖像尺寸會(huì)隨時(shí)圖像的加載而改變惭蟋。

Widget studyWidget(BuildContext context) {
  return Image.network(
    "http://www.mwpush.com/uploads/avatar.png",
    width: 200,
    height: 200,
  );
}

效果如下：

202035639.jpg

一般一個(gè) Image Widget 都是放在特定的 Widget 中的，這樣可以限制其展示范圍药磺，也可以有良好的布局告组。其很多屬性也依賴于外圍 Widget。這里使用 Container Widget 癌佩，如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 200,
    color: Colors.yellow,
    child: Image.network(
      "http://www.mwpush.com/uploads/avatar.png",
      width: 100,
      height: 400,
    ),
  );
}

效果如下：

202035649.jpg

從上圖可以發(fā)現(xiàn)木缝，當(dāng) Image Widget 放在一個(gè)布局組件中以后，其 width 和 height 屬性就不起作用了围辙，其在保持原圖比例的情況下會(huì)盡量占滿其父級(jí) Widget 我碟，且位于中間顯示。我們可以設(shè)置其填充屬性做更改姚建，如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 200,
    color: Colors.yellow,
    child: Image.network(
      "http://www.mwpush.com/uploads/avatar.png",
      fit: BoxFit.fill,
    ),
  );
}

BoxFit 是一個(gè)枚舉類型矫俺，如下：

enum BoxFit {
    /// 完全填充目標(biāo)容器，如目標(biāo)容器比例與圖比例不同掸冤，圖會(huì)被拉伸
  /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fill.png)
  fill,
    /// 盡可能大的展示完整圖片并且會(huì)保持原圖比例厘托，所以對(duì)于矩形來(lái)說(shuō)，總會(huì)有對(duì)應(yīng)的面被對(duì)齊容器邊緣贩虾，上下、左右
  /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_contain.png)
  contain,
  /// 保持原圖比例的情況下盡可能小的展示圖片沥阱，但是會(huì)在覆蓋整個(gè)容器的情況下盡可能小
  /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_cover.png)
  cover,
  /// 保持原圖比例的情況下填充目標(biāo)容器寬度缎罢，上下如果溢出會(huì)被裁掉
  /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fitWidth.png)
  fitWidth,
  /// 保持原圖比例的情況下填充目標(biāo)容器高度，左右如果溢出會(huì)被裁掉
  /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_fitHeight.png)
  fitHeight,
  /// 在目標(biāo)榮內(nèi)展示原圖考杉，不對(duì)寬高做更改策精。以原圖的大小居中顯示，溢出部分被裁掉
  /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_none.png)
  none,
  /// 在目標(biāo)容器居中對(duì)齊原圖崇棠。如果需要咽袜，將源文件向下縮放，以確保源文件適合該框
  /// ![](https://flutter.github.io/assets-for-api-docs/assets/painting/box_fit_scaleDown.png)
  scaleDown,
}

上面對(duì)應(yīng)的都有官方的樣式圖片地址枕稀，可自行查看询刹。

圖像的對(duì)齊模式是相對(duì)于父級(jí)容器來(lái)說(shuō)的谜嫉，實(shí)現(xiàn)如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.network(
      "http://www.mwpush.com/uploads/avatar.png",
      alignment: Alignment.centerRight,  //中心靠右對(duì)齊
    ),
  );
}

效果如下圖：

202035836.jpg

也可以設(shè)置其他對(duì)齊方式，可自行查看凹联，都比較簡(jiǎn)單沐兰，選擇對(duì)應(yīng)的選項(xiàng)就可以。

圖像的重復(fù)模式蔽挠，就是當(dāng)一個(gè)圖像并不能完全占滿父級(jí)容器時(shí)住闯，以什么樣的模式進(jìn)行填充，如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.network(
      "http://www.mwpush.com/uploads/avatar.png",
      repeat: ImageRepeat.repeatY,
    ),
  );
}

以上是按照Y軸重復(fù)的模式填充澳淑，效果如下：

202035846.jpg

也可以按照X軸填充比原，同時(shí)按照X，Y軸填充等杠巡。

填充顏色量窘，其中的 color 屬性，當(dāng)單獨(dú)設(shè)置顏色屬性時(shí)忽孽，就是繪制圖片的顏色绑改，圖片內(nèi)容將被覆蓋⌒忠唬可以選擇顏色與原圖的混合模式進(jìn)行設(shè)置厘线，如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.network(
      "http://www.mwpush.com/uploads/avatar.png",
      color: Colors.red,   //設(shè)置源顏色
      colorBlendMode: BlendMode.difference,   //設(shè)置混合模式
    ),
  );

效果如下：

202035922.jpg

更多混合效果及方法，官網(wǎng)查看地址：https://api.flutter.dev/flutter/dart-ui/BlendMode-class.html

對(duì)于圖片拉伸屬性 centerSlice 出革，其值為一個(gè) Rect 造壮，我們通過(guò)一張圖片的設(shè)置來(lái)說(shuō)明這個(gè)參數(shù)的設(shè)置。這里準(zhǔn)備了一張?jiān)瓐D骂束，如下：

centerSlice.jpg

這張圖被分割線分成了9個(gè)矩形耳璧，centerSlice 設(shè)置的矩形區(qū)域?yàn)闃?biāo)記為5的矩形區(qū)域。這里的圖片寬度為1000 展箱，高度為500 旨枯，區(qū)域 1，3混驰，7攀隔，9 的寬高均為100 ，所以可以得出區(qū)域 5 的左上角的起始坐標(biāo)為100栖榨，100昆汹，寬度為800 ，高度為 300 婴栽。這里使用了加載本地 AssetBundle 的文件方式加載的圖片满粗，下面會(huì)進(jìn)行講解。這里先展示原圖的代碼愚争，代碼如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.asset(
      "images/centerSlice.jpg",
      scale: 3,
    ),
  );
}

效果如下：

2020351025.jpg

由于圖片太大映皆，為了在 Container 邊緣留有空間挤聘，使用了縮放屬性 scale 。

設(shè)置拉伸屬性代碼如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.asset(
      "images/centerSlice.jpg",
      scale: 3,
      centerSlice: Rect.fromLTWH(100, 100, 800, 300),
    ),
  );
}

效果如下：

2020351027.jpg

這里我們使用了 Rect.fromLTWH() 構(gòu)造方法創(chuàng)建 Rect 劫扒。其參數(shù)依次分別為距離左側(cè)的距離檬洞，距離頂部的距離，寬度沟饥，高度添怔。通過(guò)前兩個(gè)屬性，我們可以得知贤旷，在本圖中广料，L和T屬性能確定矩形的起始點(diǎn)就是圖中區(qū)域 1 的右下角，跨度高度分別為上面計(jì)算的800和300幼驶，所以可以看出艾杏，除了區(qū)域 1，3盅藻，7购桑，9 外，都會(huì)被拉伸氏淑。區(qū)域 2 和區(qū)域 8 是橫向拉伸勃蜘，區(qū)域 4 和區(qū)域 6 是縱向拉伸，區(qū)域 5 是橫向縱向都拉伸假残。

3. Image.file() 構(gòu)造方法

Image.file(
  //File類型必傳參數(shù)缭贡，從File獲取ImageStream
  File file, {
  Key key,
  double scale = 1.0,
  this.frameBuilder,
  this.semanticLabel,
  this.excludeFromSemantics = false,
  this.width,
  this.height,
  this.color,
  this.colorBlendMode,
  this.fit,
  this.alignment = Alignment.center,
  this.repeat = ImageRepeat.noRepeat,
  this.centerSlice,
  this.matchTextDirection = false,
  this.gaplessPlayback = false,
  this.filterQuality = FilterQuality.low,
  int cacheWidth,
  int cacheHeight,
})
//以上未注釋的參數(shù)與Image()構(gòu)造方法含義相同

Image.file() 是加載本地文件時(shí)使用，必傳為 File 類型辉懒，使用 File 需要引入 dart:io 阳惹。使用方式如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.file(
      File("/path/images/avatar.png"),   //path 為您的圖片本地路徑
    ),
  );
}

4. Image.asset() 構(gòu)造方法

Image.asset(
  //String類型必傳參數(shù)，從
  String name, {
  Key key,
  AssetBundle bundle,
  this.frameBuilder,
  this.semanticLabel,
  this.excludeFromSemantics = false,
  double scale,
  this.width,
  this.height,
  this.color,
  this.colorBlendMode,
  this.fit,
  this.alignment = Alignment.center,
  this.repeat = ImageRepeat.noRepeat,
  this.centerSlice,
  this.matchTextDirection = false,
  this.gaplessPlayback = false,
  String package,
  this.filterQuality = FilterQuality.low,
  int cacheWidth,
  int cacheHeight,
})
//以上未注釋的參數(shù)與Image()構(gòu)造方法含義相同

Image.asset() 用來(lái)加載應(yīng)用本身的資源圖片眶俩。使用此方式時(shí)莹汤，需要在 pubspec.yaml 配置文件中對(duì)資源做配置。比如颠印，在項(xiàng)目的根目錄中新建 images 文件夾纲岭，并在其中添加圖片 avatar.png ，需要在 pubspec.yaml 文件中有如下配置：

flutter:
  assets:
    - images/avatar.png

在默認(rèn)創(chuàng)建的 pubspec.yaml 中有 assets 的配置示例嗽仪，為被注釋狀態(tài)荒勇，在42行左右柒莉，進(jìn)行修改即可闻坚。

使用方式如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.asset(
      "images/avatar.png"
    ),
  );
}

在配置 pubspec.yaml 時(shí)，要注意 YAML 的語(yǔ)法規(guī)則兢孝，對(duì)齊方式很重要窿凤。

為了應(yīng)對(duì)不同設(shè)備分辨率仅偎，可以同時(shí)配備一張圖片的多張不同分辨率圖片來(lái)對(duì)不同的顯示做匹配。在 Flutter 中做如下處理雳殊。如提供2倍圖與3倍圖：

創(chuàng)建不同比例文件夾橘沥，在 images文件夾中新建名為 2x 和 3x 的文件夾。其他比例同樣操作夯秃。
將對(duì)應(yīng)的2倍圖放入 2x 文件座咆，3倍圖放入 3x 文件夾，同一圖片的不同分辨率的圖片名稱格式要相同仓洼。如下圖：

202036542.jpg

在 pubspec.yaml 配置文件中配置如下：

flutter:
  assets:
    - images/avatar.png
    - images/2x/avatar.png
    - images/3x/avatar.png

實(shí)現(xiàn)代碼如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.asset(
      "images/avatar.png",
    ),
  );
}

在像素比例為2.0的屏幕上介陶，將自動(dòng)加載渲染 images/2x/avatar.png 圖片∩ǎ可以不提供1倍圖哺呜，但是 pubspec.yaml 中的配置 - images/avatar.png 必須存在，此時(shí)在需要1倍圖的設(shè)備是上會(huì)使用2倍圖代替箕戳。

5. Image.memory() 構(gòu)造方法

Image.memory(
  //Uint8List類型必傳參數(shù)某残，為圖片的字節(jié)數(shù)組
  Uint8List bytes, {
  Key key,
  double scale = 1.0,
  this.frameBuilder,
  this.semanticLabel,
  this.excludeFromSemantics = false,
  this.width,
  this.height,
  this.color,
  this.colorBlendMode,
  this.fit,
  this.alignment = Alignment.center,
  this.repeat = ImageRepeat.noRepeat,
  this.centerSlice,
  this.matchTextDirection = false,
  this.gaplessPlayback = false,
  this.filterQuality = FilterQuality.low,
  int cacheWidth,
  int cacheHeight,
})
//以上未注釋的參數(shù)與Image()構(gòu)造方法含義相同

當(dāng)通過(guò)網(wǎng)絡(luò)或本地獲取圖片的字節(jié)數(shù)據(jù)進(jìn)行圖片渲染時(shí)，可以使用 Image.memory() 構(gòu)造方法進(jìn)行處理陵吸。如下：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Widget基礎(chǔ)"),
        ),
        body: studyWidget(context),
      ),
    );
  }
}

Widget studyWidget(BuildContext context) {

  String imgString = "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";
  Uint8List bytes = base64.decode(imgString);
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Image.memory(
      bytes,
    ),
  );
}

二玻墅、Icon Widget

Icon 為一個(gè)圖標(biāo) Widget ，是一個(gè)無(wú)狀態(tài)組件走越，不可交互椭豫。Flutter 默認(rèn)所有的 Icon Widget 都為正方形，如果使用其他形狀可能會(huì)出錯(cuò)旨指。其構(gòu)造函數(shù)如下：

const Icon(
  //IconData類型必傳參數(shù)赏酥，為要顯示的圖標(biāo)，可以為null谆构，為null將顯示指定大小的空白區(qū)域
  this.icon, {
  Key key,
  //double類型可選命名參數(shù)裸扶，繪制圖標(biāo)的大小，單位為像素
  this.size,
  //Color類型可選命名參數(shù)搬素，繪制圖標(biāo)時(shí)使用的顏色呵晨，默認(rèn)為黑色  
  this.color,
  //String類型可選命名參數(shù)，圖標(biāo)的語(yǔ)義標(biāo)簽  
  this.semanticLabel,
  //TextDirection類型可選命名參數(shù)熬尺，圖標(biāo)繪制的方向  
  this.textDirection,
})

1. 系統(tǒng)的 Icon

Flutter 為開(kāi)發(fā)者提供了很多 Icon 摸屠，可以通過(guò) Icons.圖標(biāo)名稱 直接使用，方式如下：

Widget studyWidget(BuildContext context) {
  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Icon(
      Icons.ac_unit,
      color: Colors.blue,
      size: 24.0,
    ),
  );
}

更多 Icon 粱哼，可以參考官方季二。 https://api.flutter.dev/flutter/material/Icons-class.html#constants

2. 自定義的 Icon

在 Icon 的構(gòu)造函數(shù)中，必傳參數(shù) icon 為 IconData 類型，其構(gòu)造方法如下：

const IconData(
  //int類型必傳參數(shù)胯舷，圖標(biāo)字體中存儲(chǔ)該圖標(biāo)的Unicode代碼點(diǎn)
  this.codePoint, {
  //String類型可命名選參數(shù)刻蚯，字體名稱  
  this.fontFamily,
  //String類型可選命名參數(shù)，包含字體的包的名稱  
  this.fontPackage,
  //bool類型可選命名參數(shù)桑嘶，圖標(biāo)繪制方法是否與環(huán)境中的文本繪制方向相同  
  this.matchTextDirection = false,
});

可以通過(guò)創(chuàng)建 IconData 的實(shí)例來(lái)自定義 Icon 炊汹。首先要準(zhǔn)備素材，可以到阿里圖標(biāo)庫(kù)下載逃顶，https://www.iconfont.cn/ 讨便。這里隨便下載一個(gè)為例。選擇一個(gè)圖標(biāo)加入購(gòu)物車以政，在購(gòu)物車中選擇下載代碼器钟。下載后內(nèi)容如下圖：

2020361109.jpg

在項(xiàng)目工程根目錄新建 fonts 文件夾，并將 iconfont.ttf 文件加入到文件夾中妙蔗，將文件重新命名為 my_shoes.ttf 傲霸。打開(kāi)工程的 pubspec.yaml 配置文件，找到如下代碼：

  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700

修改如下：

  fonts:
     - family: MyCustomFont  
       fonts:
         - asset: fonts/my_shoes.ttf

關(guān)于 family 對(duì)應(yīng)的名字可以自定義眉反，如果有確定的不會(huì)與其他混淆可以直接使用提供的昙啄，如果內(nèi)有可以自己定義字體名字，這里我們自定義為 MyCustomFont 寸五。

然后打開(kāi)下載的文件中的名字為 demo_index.html (使用瀏覽器打開(kāi)即可)梳凛。如下圖：

2020361135.jpg

&#xe70c ，&#x 是字符引用梳杏，后面接的是十六進(jìn)制數(shù)字韧拒，我們要獲取的就是&#x 后面的數(shù)字。

實(shí)現(xiàn)代碼如下：

Widget studyWidget(BuildContext context) {

  const IconData iData = const IconData(
    0xe70c,
    fontFamily: "MyCustomFont",
  );

  return Container(
    width: 400,
    height: 600,
    color: Colors.yellow,
    child: Icon(
      iData,
      color: Colors.blue,
      size: 50.0,
    ),
  );
}

實(shí)現(xiàn)效果如下：

2020361139.jpg

最后編輯于：2020.09.03 14:04:17

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末十性，一起剝皮案震驚了整個(gè)濱河市叛溢，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌劲适，老刑警劉巖楷掉，帶你破解...
沈念sama閱讀 211,817評(píng)論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異霞势，居然都是意外死亡烹植，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,329評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)愕贡，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)草雕，“玉大人，你說(shuō)我怎么就攤上這事固以《蘸纾” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 157,354評(píng)論 0贊 348
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)败晴。經(jīng)常有香客問(wèn)我，道長(zhǎng)栽渴，這世上最難降的妖魔是什么尖坤？我笑而不...
開(kāi)封第一講書(shū)人閱讀 56,498評(píng)論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮闲擦，結(jié)果婚禮上慢味，老公的妹妹穿的比我還像新娘。我一直安慰自己墅冷，他們只是感情好纯路，可當(dāng)我...
茶點(diǎn)故事閱讀 65,600評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著寞忿，像睡著了一般驰唬。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上腔彰，一...
開(kāi)封第一講書(shū)人閱讀 49,829評(píng)論 1贊 290
城市分裂傳說(shuō)
那天叫编，我揣著相機(jī)與錄音，去河邊找鬼霹抛。笑死搓逾，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的杯拐。我是一名探鬼主播霞篡，決...
沈念sama閱讀 38,979評(píng)論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼端逼！你這毒婦竟也來(lái)了朗兵？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 37,722評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤顶滩，失蹤者是張志新（化名）和其女友劉穎矛市，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體诲祸，經(jīng)...
沈念sama閱讀 44,189評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡浊吏，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,519評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了救氯。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片找田。...
茶點(diǎn)故事閱讀 38,654評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出案铺，到底是詐尸還是另有隱情泌霍，我是刑警寧澤钥星，帶...
沈念sama閱讀 34,329評(píng)論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布漆改，位于F島的核電站心铃，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏挫剑。R本人自食惡果不足惜去扣，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,940評(píng)論 3贊 313
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望樊破。院中可真熱鬧愉棱，春花似錦、人聲如沸哲戚。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,762評(píng)論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)顺少。三九已至朋其，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間脆炎，已是汗流浹背令宿。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 1贊 266
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腕窥，地道東北人粒没。一個(gè)月前我還...
沈念sama閱讀 46,382評(píng)論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像簇爆，于是被迫代替她去往敵國(guó)和親癞松。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,543評(píng)論 2贊 349

[Flutter]flutter基礎(chǔ)之組件基礎(chǔ)(三)

一、Image Widget

1. Image() 構(gòu)造方法

2. Image.network() 構(gòu)造方法

3. Image.file() 構(gòu)造方法

4. Image.asset() 構(gòu)造方法

5. Image.memory() 構(gòu)造方法

二玻墅、Icon Widget

1. 系統(tǒng)的 Icon

2. 自定義的 Icon

推薦閱讀更多精彩內(nèi)容