交错网格视图未定义

Question

import'包：flatter_staggered_grid_view/flutter_stagger ed_grid-view.dart'//导入库

flatter_staggered_grid_view:^0.5.0//包

Flexible(
child: Container(
padding: EdgeInsets.only(top: 16.0, right: 16.0, left: 16.0),
child: StaggeredGridView.countBuilder(
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
crossAxisCount: 4,
itemCount: products.length,
itemBuilder: (BuildContext context, int index) => new ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (_) => ProductPage(product: products[index]))),
child: Container(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
Colors.grey.withOpacity(0.3),
Colors.grey.withOpacity(0.7),
],
center: Alignment(0, 0),
radius: 0.6,
focal: Alignment(0, 0),
focalRadius: 0.1),
),
child: Hero(
tag: products[index].image,
child: Image.asset(products[index].image))),
),
),
staggeredTileBuilder: (int index) =>
StaggeredTile.count(2, index.isEven ? 3 : 2),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
),

错误：

lib/screens/main/components/recommended_list.dart:51:20:错误：没有为类"RecommendedList"定义getter"交错网格视图"。

• "推荐列表"来自"package:mobi_zilla/screens/main/components/recommended_list.dart"("lib/screens/mein/components/commended_list.dart"(。请尝试将名称更正为现有getter的名称，或定义名为"交错网格视图"的getter或字段。child:交错网格视图.countBuilder(^^^^^^^^^^^^^^^^^lib/screens/main/components/recommended_list.dart:79:19:错误：没有为类"RecommendedList"定义getter"交错文件">
• "推荐列表"来自"package:mobi_zilla/screens/main/components/recommended_list.dart"("lib/screens/mein/components/commended_list.dart"(。请尝试将名称更正为现有getter的名称，或定义名为"交错文件"的getter或字段。交错文件计数(2，index.isEven？3:2(，^^^^^^^^^^^^^

Answer 1

使用版本：

dependencies:
flutter_staggered_grid_view: ^0.4.0

Answer 2

插件的pub.dev文档中没有任何关于该方法在最新版本(即flutter_staggered_grid_view 0.6.1(中被弃用或废弃的建议。我试着使用flatter_staggered_grid_view:^0.4.0，但也不起作用。解决方法似乎是使用0.3.1版本，然后该版本识别StaggeredGridView方法。

Answer 3

flaft_staggered_grid_view在其版本0.5.0-dev.1更新中被完全重写。您现在可以使用交错视图来显示交错视图。

示例

StaggeredGrid.count(
crossAxisCount: 4,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: const [
StaggeredGridTile.count(
crossAxisCellCount: 2,
mainAxisCellCount: 2,
child: Tile(index: 0),
),
StaggeredGridTile.count(
crossAxisCellCount: 2,
mainAxisCellCount: 1,
child: Tile(index: 1),
),
],
);

解决方案：如文档中所述，您可以使用交错网格而不是交错网格视图来显示交错视图。或者，您可以恢复到前面提到的包的旧版本。注意：交错网格视图在0.4.0版本中仍然受支持

Answer 4

如果你想使用最新版本的flutter_staggered_grid_view不能使用StaggeredGridView.countBuilder，你必须像这样使用GridView.custom，它会像魅力一样工作

GridView.custom(
padding: EdgeInsets.only(
bottom: 16.w,
left: 16.w,
right: 16.w,
),
gridDelegate: SliverQuiltedGridDelegate(
crossAxisCount: 6,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
repeatPattern: QuiltedGridRepeatPattern.inverted,
pattern: const [
QuiltedGridTile(4, 4),
QuiltedGridTile(2, 2),
QuiltedGridTile(2, 2),
],
),
childrenDelegate: SliverChildBuilderDelegate((context, index) {
return Container(...)
}, 
childCount: your_list_length
),
),