如何使用具有动态长度的 StaggeredGridView？

Question

我正在使用 flutter_staggered_grid_view 包。

我有这个：

List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(2, 2),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(2, 2),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
];

如果您计算项目的数量，它有 18。现在，我正在从服务器获取我的图像，它的长度是动态的。

如果长度大于我在 _staggeredTiles 中声明的项目数，将显示所有 18 张图片，其余图片不会显示在页面中，并给出 范围错误.

有人用过这个包吗？如果我的图像长度超过 _staggeredTiles 的长度，我该如何重复使用我的 _staggeredTiles？

感谢您的帮助！！

Answer 1

您可以复制粘贴运行下面的完整代码
您可以使用 StaggeredGridView.countBuilder
编辑
并创建一个 Map 然后使用数学 mod 18 将键映射到您的值

代码片段

Map<int, int> tileMap = {
    0: 1,
    1: 2,
    2: 1,
    3: 1,
    4: 1,
    5: 1,
    6: 1,
    7: 1,
    8: 1,
    9: 2,
    10: 1,
    11: 1,
    12: 1,
    13: 1,
    14: 1,
    15: 1,
    16: 1,
    17: 1
  }; 

 staggeredTileBuilder: (int index) =>
        new StaggeredTile.count(tileMap[index % 18], tileMap[index % 18]),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'dart:math';

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

class _StaggeredGridExampleState extends State<StaggeredGridExample> {
  Map<int, int> tileMap = {
    0: 1,
    1: 2,
    2: 1,
    3: 1,
    4: 1,
    5: 1,
    6: 1,
    7: 1,
    8: 1,
    9: 2,
    10: 1,
    11: 1,
    12: 1,
    13: 1,
    14: 1,
    15: 1,
    16: 1,
    17: 1
  };

  final List<String> images = [
    "https://picsum.photos/250?image=1",
    "https://picsum.photos/250?image=2",
    "https://picsum.photos/250?image=3",
    "https://picsum.photos/250?image=4",
    "https://picsum.photos/250?image=5",
    "https://picsum.photos/250?image=6",
    "https://picsum.photos/250?image=7",
    "https://picsum.photos/250?image=8",
    "https://picsum.photos/250?image=9",
    "https://picsum.photos/250?image=10",
    "https://picsum.photos/250?image=11",
    "https://picsum.photos/250?image=12",
    "https://picsum.photos/250?image=13",
    "https://picsum.photos/250?image=14",
    "https://picsum.photos/250?image=15",
    "https://picsum.photos/250?image=16",
    "https://picsum.photos/250?image=17",
    "https://picsum.photos/250?image=18",
    "https://picsum.photos/250?image=19",
    "https://picsum.photos/250?image=20",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        itemCount: images.length,
        itemBuilder: (BuildContext context, int index) => Card(
          child: FittedBox(
            child: Image.network(images[index]),
            fit: BoxFit.fill,
          ),
        ),
        staggeredTileBuilder: (int index) =>
            new StaggeredTile.count(tileMap[index % 18], tileMap[index % 18]),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StaggeredGridExample(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

如何使用具有动态长度的 StaggeredGridView？

How to use a StaggeredGridView with dynamic length?

dart

flutter

flutter-test

flutter-layout