![](/img/trans.png)
[英]How to dynamically extend the CARD widget height size based on the text in the card?
[英]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 是一個包含IconButton
和Text
的Row
。 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.