Flutter 图片如何充满父布局_flutter占满父控件

正常我们需要显示一张图片，会用到Image这个控件。
打个比方，我们加载一张本地的图片，
先看一下这个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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

基本上根据这些属性名字就能看出这些属性都是干啥的，这里面咱只看fit这个东西，这里有专门讲解这一块用法的一个文章image,(这里说明一下，由于网上的这篇文章大多都长得一样，本人也没分辨出真正作者是谁，如果该链接文章的作者看到的话可以联系我，我把链接改成你的)

Image.asset(
        AssetImages.demo,
        fit: BoxFit.cover,
        )
1
2
3
4

根据我们的理解，第一个参数为图片名字，fit则是这个图片的scaleType。这里的cover相当于centerCrop。问题这时候来了！！划重点！！单独这么写这个Image的话，这个fit参数是不起作用的。因为这个image没有Size，就是里面的height和width这俩参数没有。

解决办法：

• 外面嵌套一层Column（我觉得这种方法有点高射炮打蚊子的感觉。。）

new Column(
        children: <Widget>[
          new Image.network(
            _parties[index]["cover"], fit: BoxFit.fitWidth,
            height: 120.0,
          ),
          new Text(_parties[index]['name'])
        ]
    )

1
2
3
4
5
6
7
8
9
10

• 直接写上宽和高（前提是你得先知道确切的宽高，比如要全屏显示图片）

Image.asset(
      AssetImages.demo,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      fit: BoxFit.cover,
    )

1
2
3
4
5
6
7

• 外面嵌套BoxConstraints，给Image加约束，让它填充父布局。（本人喜欢这种方式）

ConstrainedBox(
        child: Image.asset(
                  AssetImages.start2,
                  fit: BoxFit.cover,
                  ),
        constraints: new BoxConstraints.expand(),
       )

1
2
3
4
5
6
7
8

博客地址：https://www.jianshu.com/p/8810bacfe5d4