使用 FadeInImage Flutter 正确拟合图像

Posted

技术标签:

【中文标题】使用 FadeInImage Flutter 正确拟合图像【英文标题】:Correctly fit image with FadeInImage Flutter 【发布时间】:2019-06-11 20:07:35 【问题描述】:

您好,我正在使用带有占位符和图像的 FadeInImage,但第二张图像没有覆盖整个父级,我正在使用 fit:BoxFit.cover 但无论如何结果都不好。任何人都知道如何使它成为可能。这是我的实际代码。 'document[_newsImage] 是从 CloudFirebase 获取的 URL。

      Widget _itemCard(BuildContext context, DocumentSnapshot document, int index) 
    return new Padding(
        padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
        child: new Card(
            child: Column(children: <Widget>[
          new Container(
              height: 250.0,
              child: new FadeInImage.assetNetwork(
                placeholder: 'assets/images/esperanza.jpg',
                image: document[_newsImage],
                fit: BoxFit.cover,
              )),
          Container(
              height: 150.0,
              child: Padding(
                padding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            document[_newsTitle],
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                                fontSize: 16),
                          ),
                          Text(document[_newsDate])
                        ]),
                    Text(
                      document[_textShortDescription],
                      style: TextStyle(color: Colors.grey, fontSize: 14),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        FlatButton(
                            onPressed: () => onPressed(context, document),
                            child: Text(
                              _stringShowMore,
                              style: TextStyle(color: Colors.indigo),
                            )),
                        IconButton(icon: Icon(Icons.share), onPressed: null)
                      ],
                    )
                  ],
                ),
              ))
        ])));
  

【问题讨论】:

可以添加item小部件的代码吗? @diegoveloper 完成,我添加了完整的 itemCard,它位于 ListView.builder 中。 【参考方案1】:

试试这些改变:

调整容器大小以填充宽度

在 FadeInImage 中添加高度

  new Container(
      width: MediaQuery.of(context).size.width,
      child: new FadeInImage.assetNetwork(
        placeholder: 'assets/images/esperanza.jpg',
        image: document[_newsImage],
        fit: BoxFit.cover,
        height: 250.0,
      )),

【讨论】:

但是占位符图片的大小也改变了! 你有解决这个问题的办法吗?

以上是关于使用 FadeInImage Flutter 正确拟合图像的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 实现图片缓存到本地

flutter学习二:资源文件images

Flutter 默认图片占位符

Flutter - Image.network 失败时的默认图像

资产不加载,但是当我热重载时

如何在 Flutter App 中正确使用 BlocListener 和 BlocProvider