首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Flutter中实现交错的网格视图?

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

Stack Overflow用户
提问于 2018-05-20 21:44:28
回答 5查看 24.2K关注 0票数 18

我想在Flutter中实现一个交错的网格视图--比如Pinterest交错的网格视图(过去是通过their own Android Widget实现的,现在是通过谷歌的StaggeredGridLayoutManager实现的)。

因此,要求是:

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

EN

回答 5

Stack Overflow用户

发布于 2018-06-10 04:48:18

我已经更新了flutter_staggered_grid_view包。

现在您可以添加适合其内容大小的磁贴,如下所示:

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

希望能有所帮助。

票数 23
EN

Stack Overflow用户

发布于 2019-01-20 19:25:48

正如Romain Rastler所说,StaggeredGridView是一个很好的解决方案,他会定期更新它,下面是一个例子,当我们从互联网上获取内容时,我构建了一个不同高度的网格视图(你可以申请一个应用程序接口):

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

pubspec.yamlflutter_staggered_grid_view: 0.3.0

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

代码语言:javascript
复制
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,
      ),
    );
  }
}
票数 12
EN

Stack Overflow用户

发布于 2018-06-10 11:00:07

尝尝这个。

代码语言:javascript
复制
return new StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection(PRODUCTS_COLLECTION).snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) return new Center(child: new CircularProgressIndicator());
        return new StaggeredGridView.count(
          physics: new BouncingScrollPhysics(),
          crossAxisCount: 2,
          children: buildGrid(snapshot.data.documents), 
          staggeredTiles: generateRandomTiles(snapshot.data.documents.length),
        );
      },
    );

List<Widget> buildGrid(List<DocumentSnapshot> documents) {
  List<Widget> _gridItems = [];
  _products.clear();

  for (DocumentSnapshot document in documents) {
    _products.add(Product.fromDocument(document));
  }

  for (Product product in _products) {
    _gridItems.add(buildGridItem(product));
  }

  return _gridItems;
}

Widget buildGridItem(Product product) {
  return new GestureDetector(
    child: new Card(
      elevation: 2.0,
      margin: const EdgeInsets.all(5.0),
      child: new Stack(
        alignment: Alignment.center,
        children: <Widget>[
          new Hero(
            tag: product.name,
            child: new Image.network(product.imageUrl, fit: BoxFit.cover),
          ),
          new Align(
            child: new Container(
              padding: const EdgeInsets.all(6.0),
              child: new Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text('\u20B9 ${product.price}',
                      style: new TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 16.0)),
                  new Text(product.name,
                      style: new TextStyle(color: Colors.white)),
                ],
              ),
              color: Colors.black.withOpacity(0.4),
              width: double.infinity,
            ),
            alignment: Alignment.bottomCenter,
          ),
        ],
      ),
    ),
    onTap: () async {
      // TODO
    },
  );
}

List<StaggeredTile> generateRandomTiles(int count) {
  Random rnd = new Random();
  List<StaggeredTile> _staggeredTiles = [];
  for (int i=0; i<count; i++) {
    num mainAxisCellCount = 0;
    double temp = rnd.nextDouble();

    if (temp > 0.6) {
      mainAxisCellCount = temp + 0.5;
    } else if (temp < 0.3) {
      mainAxisCellCount = temp + 0.9;
    } else {
      mainAxisCellCount = temp + 0.7;
    }
    _staggeredTiles.add(new StaggeredTile.count(rnd.nextInt(1) + 1, mainAxisCellCount));
  }
  return _staggeredTiles;
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50435467

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档