如何在Flutter中实现交错的网格视图？

Question

我想在Flutter中实现交错网格视图-例如Pinterest交错网格视图（以前是通过自己的Android Widget来实现的，现在是通过Google的StaggeredGridLayoutManager来实现的）。

因此要求是：

• 项是通过API提取的-因此，我需要类似于GridView.builder或ListView.builder的东西，以便可以实现无限滚动
• 网格视图中要显示的每个项目均由以下组成：
  • 图片-例如图片
  • 一些文本/视觉信息，其中包括：可变长度的字符串（可能跨越两行或更多行），图标，一些其他文本（例如，金额）

我知道有一个名为flutter_staggered_grid_view的插件，但这没有用，因为它需要事先知道网格的每个图块的精确高度-当然，这不是我的情况。

Answer 1

正如 Romain Rastler 所说，这StaggeredGridView是一个很好的解决方案，他会定期更新它，下面是一个例子，当我们从互联网上获取内容时，我已经建立了不同高度的网格视图（你可以申请一个 API）：

首先添加这个依赖（目前它的版本是0.3.0）

pubspec.yaml : flutter_staggered_grid_view: 0.3.0

然后导入： import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

import 'package:flutter/material.dart';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class StaggeredGridExample extends StatefulWidget {
  @override
  _StaggeredGridExampleState createState() => _StaggeredGridExampleState();
}

class _StaggeredGridExampleState extends State<StaggeredGridExample> {
  final List<String> images = [
    "https://uae.microless.com/cdn/no_image.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/81aF3Ob-2KL._UX679_.jpg",
    "https://www.boostmobile.com/content/dam/boostmobile/en/products/phones/apple/iphone-7/silver/device-front.png.transform/pdpCarousel/image.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUgs8_kmuhScsx-J01d8fA1mhlCR5-1jyvMYxqCB8h3LCqcgl9Q",
    "https://ae01.alicdn.com/kf/HTB11tA5aiAKL1JjSZFoq6ygCFXaw/Unlocked-Samsung-GALAXY-S2-I9100-Mobile-Phone-Android-Wi-Fi-GPS-8-0MP-camera-Core-4.jpg_640x640.jpg",
    "https://media.ed.edmunds-media.com/gmc/sierra-3500hd/2018/td/2018_gmc_sierra-3500hd_f34_td_411183_1600.jpg",
    "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/16q1/665019/2016-chevrolet-silverado-2500hd-high-country-diesel-test-review-car-and-driver-photo-665520-s-original.jpg",
    "https://www.galeanasvandykedodge.net/assets/stock/ColorMatched_01/White/640/cc_2018DOV170002_01_640/cc_2018DOV170002_01_640_PSC.jpg",
    "https://media.onthemarket.com/properties/6191869/797156548/composite.jpg",
    "https://media.onthemarket.com/properties/6191840/797152761/composite.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        itemCount: images.length,
        itemBuilder: (BuildContext context, int index) => Card(
          child: Column(
            children: <Widget>[
              Image.network(images[index]),
              Text("Some text"),
            ],
          ),
        ),
        staggeredTileBuilder: (int index) =>
        new StaggeredTile.fit(2),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }
}

Answer 2

我已经更新了flutter_staggered_grid_view软件包。

现在，您可以添加适合其内容大小的图块，如下所示：

您必须使用StaggeredTile.fit(this.crossAxisCellCount)构造函数创建图块。

希望能帮助到你。

Answer 3

试试这个Flutter 交错网格视图 0.1.4。

希望能帮助到你。