簡體   English   中英

如何根據內容擴展卡片高度?

[英]How can I make a Card height extend based on content?

我正在創建一張具有 header 和照片網格視圖的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),
          ])));
    });
  }

卡片中的 header 是一個包含IconButtonTextRow Card的主體是 gridview,其中包括一些照片。

下面是我運行代碼時的屏幕截圖。 您可以看到照片只顯示了一半。 我可以在網格視圖上垂直滾動。 照片的數量是動態的,這意味着GridView中可能有很多行照片。 如何使Card於其子級擴展?

在此處輸入圖像描述

嘗試使用固定大小的容器並使用容器上的BoxFit屬性。

像這樣的東西:

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

編輯:嘗試從ListView.builder中刪除itemExtent

通過簡單地將您的CachedNetwork圖像設置為使用fit: BoxFit.cover將調整大小以填充內容同時保留比例(這意味着您可能會丟失一些細節)或fit: BoxFit.contain將嘗試盡可能大同時包含邊界內的整個源(圖像)。

如果這也沒有幫助(因為我沒有看到整個樹,所以我不確定您Card的祖先)您還可以將BlocBuilder的孩子的返回替換為FittedBox而不是Container並為fit屬性應用相同的邏輯,但適用於整個卡片。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM