【Flutter 踩坑】屏幕寬度測量錯誤致使image不展現

開始玩flutter，想簡單的作個圖片列表。圖片的寬度爲match屏幕。

首先度娘告訴我，獲取屏幕的寬度的方法以下：

MediaQuery.of(context).size.width
複製代碼

因爲flutter不能想Android原生那樣，直接設置match_parent。因此只能設置widget的width和height。

下面先粘出本身摸索出來的代碼：

//加載網絡圖片
new Image.network(
 'your imgeurl',
 width: MediaQuery.of(context).size.width,
 height:200.0,
 fit : BoxFit.fill
 )
複製代碼

完整的代碼以下：

import 'package:flutter/material.dart';
import 'package:flutter_app/ComicBean.dart';
import 'ToastUtils.dart';



const  api="https://manga.bilibili.com/twirp/comic.v1.Comic/HomePage?device=h5&platform=h5";
class HomeList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState

    var list = [
      new ComicBean("鑽石王牌 act2", "最新上線",
          "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1555383014&di=b62daefbde9a49eec1abd5b111b39279&src=http://img3.duitang.com/uploads/blog/201504/04/20150404171530_FCfLe.thumb.700_0.jpeg"),
      new ComicBean("皇帝的獨生女", "275",
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555393097026&di=97a2a368fffa0adb6d4c1f999bb20fc2&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201511%2F06%2F20151106224057_FQBj2.thumb.700_0.png"),
      new ComicBean("吾皇巴扎黑", "第151話",
          "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1555383014&di=b62daefbde9a49eec1abd5b111b39279&src=http://img3.duitang.com/uploads/blog/201504/04/20150404171530_FCfLe.thumb.700_0.jpeg"),
    ];
    return new _HomeListState(list);
  }
}

class _HomeListState extends State<HomeList> {
  _HomeListState(this.listData);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  var listData = new List<ComicBean>();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      child: new ListView.builder(
          itemCount: listData.length,
          itemBuilder: (BuildContext context, int position) {
            return getItem(context, listData[position]);
          }),
    );
  }
//生產沒個item
  getItem(BuildContext context, ComicBean subject) {
    var column = Container(
      margin: EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(4.0),
            //注意此處
            child: new Image.network(
              subject.img,
              width: MediaQuery.of(context).size.width,//設置寬度，問題的關鍵
              height: 200.0,
              fit: BoxFit.fill,
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 5.0),
            child: Text(
              subject.title,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 3.0),
            child: Text(
              subject.sub_title,
              style: TextStyle(
                color: Colors.black38,
                fontSize: 14.0,
              ),
            ),
          ),
        ],
      ),
    );
    return new GestureDetector(
      onTap: () {
        showLongToast(subject.title + "被點擊了！");
      },
      child: Card(
        child: column,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(4.0))),
      ),
    );
  }
}
複製代碼

ok將上面自定義的list widget放到任意的容器中。開始debug，發現圖片已經徹底顯示出來了，then打release包，再次在真機上面運行。發現第一個item的圖片不會顯示出來。可是debug是能夠的。

debug--> ok

release--> no 這個時候，按照個人腦回路應該是混淆問題了，可是Android 項目下的build.gradle並無開啓混淆。是否是必定要開啓混淆，而後去了官方git下把混淆文件配置好以後。ok應該沒問題了吧。##¥¥%% 在一段激烈的命令行下，成功的編譯出了release的混淆apk，包體積是小了點，而後運行在真機上面，我* 仍是不顯示。

首先看了console 沒有任何報錯信息，難道是官方的Image.network 有問題，好的，感受抓到了救命稻草，度娘告訴我還有個第三方庫的CachedNetworkImage。果斷集成一下，應該好了吧，繼續重複前面的工做，再次運行。我¥¥%¥#%#……%……%#¥%#，仍是不行。

那就是我widegt用的方式不對？可是和度娘找出的demo基本用法都同樣啊，因而我找了一個相似的demo在本身的項目中試了一下。ok，人家的徹底沒有問題，而後一行行對比，最終好想只有width我給的不是一個肯定的值。因而抱着試一試的態度，給其設置了固定的寬度

new CachedNetworkImage(
              placeholder: (context,url)=> Image.asset('images/placeholder.png'),
              imageUrl: subject.imageUrl,
              width: 150.0,
              height: 200.0,
              fit: BoxFit.fill,
            )
複製代碼

依然是重複前面的操做，運行OK了。居然OK了。爲啥呢？難道是MediaQuery.of(context).size.width這個方法在搞我？後來冷靜的想了想，這個寬度的獲取時機是不正確的，須要提早的去獲取這個寬度。所以對上面的代碼進行修改：

...
 var width=0;
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //在生成item以前先獲取屏幕的寬度
    width= MediaQuery.of(context).size.width;
    return new Container(
      child: new ListView.builder(
          itemCount: listData.length,
          itemBuilder: (BuildContext context, int position) {
            return getItem(context, listData[position]);
          }),
    );
  }
  
 ···
 
 new CachedNetworkImage(
              placeholder: (context,url)=> Image.asset('images/placeholder.png'),
              imageUrl: subject.imageUrl,
              width: width,//換成提早獲取的寬度
              height: 200.0,
              fit: BoxFit.fill,
            )
            ···
複製代碼