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张图像，其余图像将不会显示在页面中，并给出 Range Error < / strong>。

有人使用过这个包裹吗？如果我的图像长度超过_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？

1 个答案: