[英]Flutter: How to adjust the height of a container as the maximum height of its sibling in a row
[英]How to make flutter card auto adjust its height depend on content
在項目中,我使用的是 flutter 卡內的圖像和文本,但該卡返回一個固定的高度。 然后我也嘗試只使用一個空值的卡,但它仍然返回一個固定的高度。 我應該怎么做才能使卡片的高度隨內容自動調整?
@override Widget build(BuildContext context) { final title = 'Food Recipes'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: GridView.builder( itemCount: _listViewData.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), itemBuilder: (context, index) { return Card( margin: const EdgeInsets.all(10.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 13.0, child: Image.network( _listViewDataImage[index], fit: BoxFit.fill, ), ), Padding( padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( _listViewData[index], textAlign: TextAlign.center, ), ], ), ), ], ), ); }), ), ); }
您想將卡片包裝在Column
中,因為內部 Column 占滿高度
Column(children: <Widget>[
Card(
margin: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AspectRatio(
aspectRatio: 18.0 / 13.0,
child: Image.network(
"https://picsum.photos/200",
fit: BoxFit.fill,
),
),
Padding(
padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Just add your desired image size (width & height) after our URL, and you'll get a random image.",
textAlign: TextAlign.center,
),
],
),
),
],
),
)
])
問題來自SliverGridDelegateWithFixedCrossAxisCount
:
使用固定數量的橫軸創建網格布局
此委托創建具有相同大小和間距的圖塊的網格。
我建議您使用flutter_staggered_grid_view:並放棄 AspectRatio 小部件。 更多關於瓷磚的信息。
body: StaggeredGridView.countBuilder(
crossAxisCount: 2,
itemCount: 6,
itemBuilder: (BuildContext context, int index) =>
Card(
margin: const EdgeInsets.all(10.0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network('https://upload.wikimedia.org/wikipedia/commons/6/66/An_up-close_picture_of_a_curious_male_domestic_shorthair_tabby_cat.jpg',
fit: BoxFit.fill,
),
Padding(
padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Cat",textAlign: TextAlign.center),
],
),
)],
),
)
),
staggeredTileBuilder: (int index) =>
StaggeredTile.fit(1),
)
試試flutter_staggered_grid_view package。
在 pubspec.yaml 中,添加以下依賴項:
dependencies:
flutter_staggered_grid_view: any
在您的庫中,添加以下導入:
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
例子:
StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) => new Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
)),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 1),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
像GridView一樣使用它
Output:
構造函數:
StaggeredGridView遵循與GridView相同的構造函數約定。 還有兩個構造函數: countBuilder
和extentBuilder
。 這些構造函數允許您為布局定義一個構建器,為子級定義一個構建器。
瓷磚:
StaggeredGridView需要知道如何顯示每個圖塊,以及與圖塊相關聯的小部件。
一個圖塊需要在橫軸上占據固定數量的單元格。 對於主軸的范圍,您有03 個選項:
StaggeredTile.count
。StaggeredTile.extent
。StaggeredTile.fit
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.