GridView.builder 实例化

Question

我正在尝试使用 GridView 生成器，但我不知道如何使用它。我是 Flutter 新手，如果你们能提供帮助，我将不胜感激。所以这是我的 GridView 代码：

Container(
              height: 400,
              child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2),
                  itemBuilder: (context, index) {
                    return gridCard(card: card[index]);
                  }))

我希望这些实例显示为“卡片”。这是我的代码：

列表

import 'package:flutter/material.dart';
import 'package:interstellar/Elements/gridCards.dart';

List<GridItem> card = [
  GridItem(
      spaceImg:
          ('https://images.pexels.com/photos/37347/office-sitting-room-executive-sitting.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'),
      spaceName: 'Hive Net Work Hub',
      spacePrice: '25/hr',
      spaceAdd: 'E Lopez St. Brgy San Vicente Jaro'),
  GridItem(
      spaceImg:
          ('https://images.pexels.com/photos/2635038/pexels-photo-2635038.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'),
      spaceName: 'Thinking Box Study Hub',
      spacePrice: '25/hr',
      spaceAdd: 'Timawa Street, Molo, Iloilo City, Philippines'),
];

class GridItem {
  final String spaceImg;
  final String spaceName;
  final String spacePrice;
  final String spaceAdd;

  const GridItem(
      {required this.spaceImg,
      required this.spaceName,
      required this.spacePrice,
      required this.spaceAdd});
}

"卡片"

import 'package:flutter/material.dart';
import 'package:interstellar/Elements/gridItem.dart';

Widget gridCard({required GridItem card}) => Container(
        child: Column(children: [
      Expanded(
          child: AspectRatio(
              aspectRatio: 16 / 9, child: Image.network(card.spaceImg))),
      SizedBox(
        height: 10,
      ),
      Row(
        children: [Text(card.spaceName)],
      ),
      Row(
        children: [Text(card.spacePrice)],
      ),
      Row(
        children: [Text(card.spaceAdd)],
      )
    ]));

错误

════════ Exception caught by widgets library ═══════════════════════════════════
The following RangeError was thrown building:
RangeError (index): Invalid value: Not in inclusive range 0..1: 2

════════ Exception caught by widgets library ═══════════════════════════════════
RangeError (index): Invalid value: Not in inclusive range 0..1: 3
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
RangeError (index): Invalid value: Not in inclusive range 0..1: 4
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
RangeError (index): Invalid value: Not in inclusive range 0..1: 5
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
RangeError (index): Invalid value: Not in inclusive range 0..1: 6
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
RangeError (index): Invalid value: Not in inclusive range 0..1: 7
════════════════════════════════════════════════════════════════════════════════

这是我遇到的错误。我很漂亮，这不是 return 列表的正确方法，我不知道如何。

任何帮助都会非常有用。我感谢你们所有人。谢谢。

Answer 1

Grid.builder 需要提供 itemCount 才能渲染。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final sample = List.generate(30, (i) => i);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: sample.length, // <-- required
          itemBuilder: (_, i) => Container(
            margin: const EdgeInsets.all(5),
            color: Colors.grey,
            child: Center(child: Text('${sample[i]}')),
          ),
        ),
      ),
    );
  }
}

GridView.builder 实例化

GridView.builder Instatiation

flutter

dart

flutter-layout

flutter-gridview