StaggeredGridView 未定义

Question

导入'包：flutter_staggered_grid_view / flutter_staggered_grid_view.dart'; //导入库

flutter_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“StaggeredGridView”。

• “RecommendedList”来自“package:mobi_zilla/screens/main/components/recommended_list.dart”（“lib/screens/main/components/recommended_list.dart”）。 尝试将名称更正为现有 getter 的名称，或定义名为“StaggeredGridView”的 getter 或字段。 子级：StaggeredGridView.countBuilder( ^^^^^^^^^^^^^^^^^^ lib/screens/main/components/recommended_list.dart:79:19：错误：没有为“RecommendedList”类定义 getter“StaggeredTile”。
• “RecommendedList”来自“package:mobi_zilla/screens/main/components/recommended_list.dart”（“lib/screens/main/components/recommended_list.dart”）。 尝试将名称更正为现有 getter 的名称，或定义名为“StaggeredTile”的 getter 或字段。 StaggeredTile.count(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

。我尝试使用 flutter_staggered_grid_view: ^0.4.0 但这也不起作用。解决方法似乎是使用版本

0.3.1

，然后识别

StaggeredGridView

方法。

Answer 3

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

示例

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),
    ),
  ],
);

解决方案： 正如文档中提到的，您可以使用StaggeredGrid代替StaggeredGridView来显示交错视图。 或者，您可以恢复到前面提到的软件包的旧版本。 注意：0.4.0版本仍然支持StaggeredGridView

Answer 4

如果你想使用最新版本的

flutter_staggered_grid_view

不能使用

StaggeredGridView.countBuilder

而是必须像这样使用

GridView.custom

，它会像charm一样工作

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
              ),
            ),

Answer 5

StaggeredGridView.countBuilder 不起作用 包已经安装 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Answer 6

尽管正确导入包，StaggeredGridView.countBuilder 仍会抛出错误

尽管正确导入了 flutter_staggered_grid_view 包，但我在 Flutter 项目中使用 StaggeredGridView.countBuilder 时遇到了错误。