Question

我正在创建一个Card，其中包含标题和照片的网格视图。下面是代码：

_getImageWidget(Post post, AppConfig config) {
    if (post.photoPaths != null && post.photoPaths.length > 0) {
      var url = config.imagePathDomain + post.photoPaths[0];
      try {
        return Expanded(
            child: GridView.count(
                crossAxisCount: 3,
                shrinkWrap: false,
                children: post.photoPaths.map<Widget>((String path) {
                  return CachedNetworkImage(
                    imageUrl: url,
                  );
                }).toList()));
      } catch (err) {
        return Container();
      }
    }
    return Container();
  }

  @override
  Widget build(BuildContext context) {
    var config = AppConfig.of(context);
    return BlocBuilder<UserInfoBloc, UserInfo>(builder: (_, userInfo) {
      return Container(
          width: MediaQuery.of(context).size.width,
          child: Card(
              child: Column(children: <Widget>[
            Row(
              children: <Widget>[
                IconButton(
                  iconSize: 30,
                  icon: roundImage(post.userPicture, Icon(Icons.person)),
                  onPressed: () {},
                ),
                Text('@${userInfo.username}')
              ],
            ),
            this._getImageWidget(post, config),
          ])));
    });
  }

卡中的标头是Row，包括IconButton和Text。 Card的主体是一个网格视图，其中包含一些照片。

下面是我运行代码时的屏幕截图。您可以看到照片仅显示了一半。而且我可以在网格视图上垂直滚动。照片数量是动态的，这意味着GridView中可能有很多照片行。如何使Card基于其子级进行扩展？

Answer 1

尝试使用固定大小的容器，并使用容器上的BoxFit属性。

类似这样的东西：

new Container(
    width: 80.0,
    height: 80.0,
    decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: CachedNetworkImageProvider(url),
            ),
          ),
        ),

编辑：尝试从itemExtent删除ListView.builder

Answer 2

只需将CachedNetwork图像设置为使用fit: BoxFit.cover即可调整大小来填充内容，同时保留比例（这意味着您可能会丢失一些细节）或fit: BoxFit.contain在将整个源（图像）包含在边界之内时，请尝试使其尽可能大。

如果这也无济于事（因为我没有看到整棵树，因此不确定Card的祖先），也可以替换{{1} }的孩子成为BlocBuilder而不是FittedBox，并且对Container属性应用相同的逻辑，但对整个卡片应用。

如何根据内容扩展卡片高度？

2 个答案: