如何在Flutter中实现这个复杂的视图？
我正在尝试使用GridView实现一个具有n列的视图，子项应该具有特定的宽高比（例如1.3），但子项的高度应该是自适应的（在Android术语中称为"wrap content"）。
我遇到了困难，因为据我所知，GridView的childAspectRatio:1.3（默认值：1）总是以相同的宽高比布局子项，而不是动态内容。
注意：子项应根据图像的高度展开其自身的高度。
用例：我正在尝试实现下面这样的视图，其中图像被包装成height = wrap content，以便在出现拉伸高度的图像时可以看起来很好，并形成类似于StaggeredGridView的结构。
编辑：我在0.2.0中添加了StaggeredTile.fit构造函数。有了它，您应该能够构建您的应用程序；-）。
第一条评论：
目前，使用StaggeredGridView，布局和子元素渲染是完全独立的。所以正如@rmtmckenzie所说，您将需要获取图像大小来创建您的tile。
然后，您可以使用StaggeredTile.count构造函数，并为mainAxisCellCount参数提供一个双值：new StaggeredTile.count(x, x*h/w)（其中h是您的图像高度，w是其宽度。这样，瓷砖就具有与您的图像相同的纵横比。
您想要实现的内容需要更多工作，因为您希望在图像下方有一些信息区域。为此，我认为您将需要在创建之前计算出瓦片的实际宽度，并使用StaggeredTile.extent构造函数。
我理解这不是理想的，我正在努力开发一种新的方式来创建布局。我希望它能够帮助您构建像您这样的场景。
首先让我告诉你我是如何来到这里的：
在我的应用程序中，我想要一个网格视图来展示广告卡片以及从服务器数据库中获取的所有数据和图片，而图片大小不同且来自服务器。我使用了 FutureBuilder 将这些数据映射到 GridView 上。首先我尝试使用：
double cardWidth = MediaQuery.of(context).size.width / 3.3;
double cardHeight = MediaQuery.of(context).size.height / 3.6;
//....
GridView.count(
childAspectRatio: cardWidth / cardHeight,
//..
如你所见，它不会对所有卡片产生动态效果。我和你一样来到这里，尝试使用所有伟大的答案，并且你必须花点时间去理解如何去解决问题，但是没有一个答案完全解决了我的问题。
使用@RomainRastel的答案，以及感谢他的StaggeredGridView包。我必须使用StaggeredGridView.count作为构造函数来映射所有卡片，对于staggeredTiles属性，我必须再次将所有卡片映射并添加每个StaggeredTile.fit(2)。
我确定你还是没看懂，所以让我们尝试一个简单的例子，这样你就不需要去其他地方寻找答案：
首先，在pubspec.yaml中添加依赖项，现在版本是0.2.5。你可以在这里查看最新版本。
dependencies:
flutter_staggered_grid_view: ^0.2.5
如果你从互联网获取数据，或者你将复制粘贴这个示例，你还需要添加这个依赖项：http: ^0.12.0。
import 'package:flutter/material.dart';
//this is what you need to have for flexible grid
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
//below two imports for fetching data from somewhere on the internet
import 'dart:convert';
import 'package:http/http.dart' as http;
//boilerplate that you use everywhere
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flexible GridView",
home: HomePage(),
);
}
}
//here is the flexible grid in FutureBuilder that map each and every item and add to a gridview with ad card
class HomePage extends StatelessWidget {
//this is should be somewhere else but to keep things simple for you,
Future<List> fetchAds() async {
//the link you want to data from, goes inside get
final response = await http
.get('https://blasanka.github.io/watch-ads/lib/data/ads.json');
if (response.statusCode == 200) return json.decode(response.body);
return [];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dynamic height GridView Demo"),
),
body: FutureBuilder<List>(
future: fetchAds(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return new Padding(
padding: const EdgeInsets.all(4.0),
//this is what you actually need
child: new StaggeredGridView.count(
crossAxisCount: 4, // I only need two card horizontally
padding: const EdgeInsets.all(2.0),
children: snapshot.data.map<Widget>((item) {
//Do you need to go somewhere when you tap on this card, wrap using InkWell and add your route
return new AdCard(item);
}).toList(),
//Here is the place that we are getting flexible/ dynamic card for various images
staggeredTiles: snapshot.data
.map<StaggeredTile>((_) => StaggeredTile.fit(2))
.toList(),
mainAxisSpacing: 3.0,
crossAxisSpacing: 4.0, // add some space
),
);
} else {
return Center(
child:
new CircularProgressIndicator()); // If there are no data show this
}
}),
);
}
}
//This is actually not need to be a StatefulWidget but in case, I have it
class AdCard extends StatefulWidget {
AdCard(this.ad);
final ad;
_AdCardState createState() => _AdCardState();
}
class _AdCardState extends State<AdCard> {
//to keep things readable
var _ad;
String _imageUrl;
String _title;
String _price;
String _location;
void initState() {
setState(() {
_ad = widget.ad;
//if values are not null only we need to show them
_imageUrl = (_ad['imageUrl'] != '')
? _ad['imageUrl']
: 'https://uae.microless.com/cdn/no_image.jpg';
_title = (_ad['title'] != '') ? _ad['title'] : '';
_price = (_ad['price'] != '') ? _ad['price'] : '';
_location = (_ad['location'] != '') ? _ad['location'] : '';
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Card(
semanticContainer: false,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network(_imageUrl),
Text(_title),
Text('\$ $_price'),
Text(_location),
],
),
);
}
}
如果您有任何问题，这里是一个Git存储库中的完整示例。
祝你好运！
有一个用于执行此类布局的现有软件包
为了使图像看起来好看，可以在DecorationImage小部件上使用BoxFit.cover
class GridViewExample extends StatefulWidget {
@override
_GridViewExampleState createState() => new _GridViewExampleState();
}
class _GridViewExampleState extends State<GridViewExample> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Padding(
padding: const EdgeInsets.all(8.0),
child: new StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) => new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage("https://i.imgur.com/EVTkpZL.jpg"),
fit: BoxFit.cover
)
)
),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 1),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),),
);
}
}
mainAxisCount 值，而这个值事先是不知道的。 - Vipul AsriRenderBox的存在，那么这个答案大部分是错误的。 - Rémi RousseletcrossAxisCount:
这定义了表格中有多少列，
StaggeredTile.fit(value)
代表垂直方向上一列可以容纳多少个孩子
示例：
crossAxisCount: 2,
staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
会给您以上所期望的输出结果
快速简单的计算。
crossAxisCount: 4//这里我定义了我想要的列数。
StaggeredTile.count(2, 高度 + 0.5); //这个构造函数有两个参数，第一个参数是每个tile应该占据多少列（因为我有4列，想要每行放2个tile，所以第一个参数是2。换句话说，1个tile占据2列）。
第二个参数是高度，我想让高度与tile宽度成比例（即2列）。
以下是我的代码：
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: FutureBuilder(
future: NetworkHelper.getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null)
return Center(child: CircularProgressIndicator());
else {
var data = snapshot.data;
print(data);
List<dynamic> jsonData = jsonDecode(snapshot.data);
return StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: jsonData.length,
itemBuilder: (BuildContext context, int index) {
JsonModelClass models =
JsonModelClass.fromJson(jsonData[index]);
String url = models.urls.regular;
return GestureDetector(
onTap: () {
print(url);
},
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.network(url),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("${models.user.name}"),
Card(
child: Padding(
padding: const EdgeInsets.all(3.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Icon(
Icons.favorite,
color: Colors.red,
),
SizedBox(
width: 6,
),
Text("${models.likes}")
],
),
),
),
],
),
)
],
),
),
);
},
staggeredTileBuilder: (int index) {
JsonModelClass models =
JsonModelClass.fromJson(jsonData[index]);
var height = (models.height * 2) /
models.width; //calculating respective 'height' of image in view, 'model.height' is image's original height received from json.
return StaggeredTile.count(
2,
height +
0.5); //Adding extra 0.5 space for other content under the image
},
mainAxisSpacing: 4,
crossAxisSpacing: 4,
);
}
},
),
),
);
}
}
这个问题的简单解决方案是添加“key:列数”的参数。我正在使用版本为StaggeredGridview 0.4.0的组件。你只需要添加Key参数即可。当你调整浏览器窗口大小时，该小部件将重新加载。你可以在这里找到示例代码。
例如，浏览器处于全宽状态，你调整了窗口大小。我还使用响应式设计来检测屏幕大小（小屏幕下的小部件 <800，中等大小屏幕（>800&<1200），大屏幕（>1200））。
StaggeredGridView.countBuilder(
primary: false,
shrinkWrap: true,
key: ObjectKey(ResponsiveWidget.isSmallScreen(context) ? 2 :4), // **add this line**
crossAxisCount: ResponsiveWidget.isSmallScreen(context) ? 4 : 8,
itemCount: ResponsiveWidget.isSmallScreen(context) ? 4 : _productsList.length,
itemBuilder: (BuildContext context, int index) {
BannersResult product = _productsList.elementAt(index);
return Home_CustBanner_twobytwo_Item(
home_banner_list_item: product,
heroTag: 'categorized_products_grid',
);
},
staggeredTileBuilder: (int index) => new StaggeredTile.fit(2),
mainAxisSpacing: 15.0,
crossAxisSpacing: 15.0,
),
StaggeredTile.fit的示例。 - Aryeetey Solomon Aryeetey