dart 如何在Flutter上创建原始Grid View

hzbexzde 于 2023-06-19 发布在 Flutter

关注(0)|答案(3)|浏览(106)

我想用Grid View或Flutter的其他方式实现类似这张图片的东西。
我实现了使用下面的GridView.builder一样的代码。但是这个代码并不像图片那样工作。
你能给予我你的想法来表达这样的图片吗？

GridView.builder(
  itemCount: items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (BuildContext context, int index) {
    final isDoubleWidth = (index + 1) % 5 == 0;
    final itemWidth = isDoubleWidth ? MediaQuery.of(context).size.width / 3 * 2 : MediaQuery.of(context).size.width / 3;
    return SizedBox(
      width: itemWidth,
      child: Text(item[index].title.toString),
    );
  },
);

dart

来源：https://stackoverflow.com/questions/76461803/how-to-make-original-grid-view-on-flutter

3条答案

按热度按时间

kpbwa7wx1#

使用flutter_staggered_grid_view: ^0.6.2即可

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

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),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 2),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 3),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      child: Tile(index: 4),
    ),
  ],
);

赞(0）回复(0）举报 2023-06-19

lsmepo6l2#

GridView不支持您在图片中显示的内容。如果你不想使用第三方插件，我建议你使用ListView和Row小部件来构建这个UI。您可以将此UI视为一个行列表，每行将包含2或3个元素。因此，根据ListView.builder()的itemBuilder参数的索引，您可以计算出应该为这个列表项（整行）显示哪些元素，然后您可以使用Row小部件构建自己的行。

赞(0）回复(0）举报 2023-06-19

zzzyeukh3#

有了这段代码，我就可以实现这幅图。
在本例中，我增加了5，因为列和行都在5个项目中。

final itemLength = (items.length) / 5;

        return ListView.builder(
            itemCount: itemLength.toInt(),
            itemBuilder: (BuildContext context, int index) {
              index *= 5;
              return Column(
                children: [
                  Row(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 2 / 3,
                        child: Text(items[index].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 1].title.toString()),
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 2].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 3].title.toString()),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 1 / 3,
                        child: Text(items[index + 4].title.toString()),
                      ),
                    ],
                  ),
                ],
              );
            });

赞(0）回复(0）举报 2023-06-19

我来回答

dart 如何在Flutter上创建原始Grid View

3条答案

相关问题

热门标签

最新问答