[英]How to make flutter card auto adjust its height depend on content
In the project, I'm using images and text inside the flutter card, but the card returns a fixed height.在项目中,我使用的是 flutter 卡内的图像和文本,但该卡返回一个固定的高度。 and then I also tried just using a card with an empty value, but it still returns a fixed height.
然后我也尝试只使用一个空值的卡,但它仍然返回一个固定的高度。 what should I do to make the height of the card auto adjust with content?
我应该怎么做才能使卡片的高度随内容自动调整?
@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, ), ], ), ), ], ), ); }), ), ); }
You want to wrap your card in a Column
because the inner Column take full height您想将卡片包装在
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,
),
],
),
),
],
),
)
])
The problem comes from SliverGridDelegateWithFixedCrossAxisCount
:问题来自
SliverGridDelegateWithFixedCrossAxisCount
:
Creates grid layouts with a fixed number of tiles in the cross axis
使用固定数量的横轴创建网格布局
This delegate creates grids withequally sized and spaced tiles.
此委托创建具有相同大小和间距的图块的网格。
I recommend you to use flutter_staggered_grid_view: and to give up to AspectRatio widget.我建议您使用flutter_staggered_grid_view:并放弃 AspectRatio 小部件。 More about tiles here .
更多关于瓷砖的信息。
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),
)
Try flutter_staggered_grid_view package.试试flutter_staggered_grid_view package。
In the pubspec.yaml, add the following dependency:在 pubspec.yaml 中,添加以下依赖项:
dependencies:
flutter_staggered_grid_view: any
In your library, add the following import:在您的库中,添加以下导入:
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
Example:例子:
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,
),
Output: Output:
Constructors :构造函数:
The StaggeredGridView follow the same constructors convention than the GridView . StaggeredGridView遵循与GridView相同的构造函数约定。 There are two more constructors:
countBuilder
and extentBuilder
.还有两个构造函数:
countBuilder
和extentBuilder
。 These constructors allow you to define a builder for the layout and a builder for the children.这些构造函数允许您为布局定义一个构建器,为子级定义一个构建器。
Tiles :瓷砖:
A StaggeredGridView needs to know how to display each tile, and what widget is associated with a tile. StaggeredGridView需要知道如何显示每个图块,以及与图块相关联的小部件。
A tile needs to have a fixed number of cell to occupy in the cross axis.一个图块需要在横轴上占据固定数量的单元格。 For the extent in the main axis you have 03 options :
对于主轴的范围,您有03 个选项:
StaggeredTile.count
.StaggeredTile.count
。StaggeredTile.extent
.StaggeredTile.extent
。StaggeredTile.fit
.StaggeredTile.fit
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.