正常我們需要顯示一張圖片父丰，會(huì)用到Image這個(gè)控件郊尝。
打個(gè)比方凛驮，我們加載一張本地的圖片棒假，
先看一下這個(gè)Image.asset的源碼：
Image.asset(String name, {
Key key,
AssetBundle bundle,
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,
}) : image = scale != null
? new ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
: new AssetImage(name, bundle: bundle, package: package),
assert(alignment != null),
assert(repeat != null),
assert(matchTextDirection != null),
super(key: key);
基本上根據(jù)這些屬性名字就能看出這些屬性都是干啥的杖虾，這里面咱只看fit這個(gè)東西烂瘫，這里有專門講解這一塊用法的一個(gè)文章image,(這里說明一下，由于網(wǎng)上的這篇文章大多都長得一樣奇适，本人也沒分辨出真正作者是誰坟比，如果該鏈接文章的作者看到的話可以聯(lián)系我，我把鏈接改成你的)
| fit | Description | Result |
|---|---|---|
| BoxFit.fill | 全圖顯示滤愕，顯示可能拉伸温算，充滿 |  image
|
| BoxFit.contain | 全圖顯示，顯示原比例间影，不需充滿 |  image
|
| BoxFit.cover | 顯示可能拉伸注竿，可能裁剪，充滿 |  image
|
| BoxFit.fitWidth | 顯示可能拉伸，可能裁剪巩割，寬度充滿 |  image
|
| BoxFit.fitHeight | 顯示可能拉伸裙顽，可能裁剪，高度充滿 |  image
|
| BoxFit.none | ||
| BoxFit.scaleDown | 效果和contain差不多,但是此屬性不允許顯示超過源圖片大小宣谈，可小不可大 |  image
|
Image.asset(
AssetImages.demo,
fit: BoxFit.cover,
)
根據(jù)我們的理解愈犹，第一個(gè)參數(shù)為圖片名字，fit則是這個(gè)圖片的scaleType闻丑。這里的cover相當(dāng)于centerCrop漩怎。問題這時(shí)候來了！嗦嗡！劃重點(diǎn)Ｑ浮！單獨(dú)這么寫這個(gè)Image的話侥祭，這個(gè)fit參數(shù)是不起作用的叁执。因?yàn)檫@個(gè)image沒有Size，就是里面的height和width這倆參數(shù)沒有矮冬。
解決辦法：
- 外面嵌套一層Column（我覺得這種方法有點(diǎn)高射炮打蚊子的感覺谈宛。。）
new Column(
children: <Widget>[
new Image.network(
_parties[index]["cover"], fit: BoxFit.fitWidth,
height: 120.0,
),
new Text(_parties[index]['name'])
]
)
- 直接寫上寬和高（前提是你得先知道確切的寬高胎署，比如要全屏顯示圖片）
Image.asset(
AssetImages.demo,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
fit: BoxFit.cover,
)
- 外面嵌套
BoxConstraints吆录，給Image加約束，讓它填充父布局硝拧。（本人喜歡這種方式）
ConstrainedBox(
child: Image.asset(
AssetImages.start2,
fit: BoxFit.cover,
),
constraints: new BoxConstraints.expand(),
)
我的博客即將搬運(yùn)同步至騰訊云+社區(qū)径筏，邀請(qǐng)大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=2bwjo723g1z4g
