如何在带有Flutter的GridView中显示图像列表

Question

我刚开始学习Flutter，我找不到我的错误…

我试图在网格视图中显示列表中的图像，但我不知道为什么控制台找不到getter 'room'。

我创建了一个类，其中包含一个方法、一个构造函数和另一个数据类，其中存储了不同的列表。其中一个列表依赖于Room类。现在，另一个是固定的。

当我调用room.room时，教室被找到，但getter。room没有。

我错过什么了吗?

import 'package:flutter/material.dart';
import 'package:ipictory/datas/datarooms.dart';
import 'package:ipictory/widgets/room.dart';
import 'detail_room.dart';
class DetailRoomTest extends StatefulWidget{
@override
DetailRoomTestState createState() => DetailRoomTestState();
}
class DetailRoomTestState extends State<DetailRoomTest>{
@override
Widget build(BuildContext context) {
final room = DataRooms().listeDataRooms;
final roomImages = DataRooms().imageLiving;
var size = MediaQuery.of(context).size;
double width = size.width;
double heigth = size.height;
return Scaffold(
appBar: AppBar(
title: Text(room.room,         //-------> error: The getter 'room' isn't defined 
for the type 'List<Room>'.
style: TextStyle(
color: Colors.white
),
),
),
body: Column(
children: [
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: roomImages.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child:Image(
image: AssetImage(roomImages[index],)
),
);
}
)
],
),
);
}
}

import 'package:ipictory/widgets/room.dart';
class DataRooms {
List<Room> listeDataRooms = [
Room(room: "La salle à manger", inventoryTitle : "Inventaire", inventory: "Inventaire de la salle à manger : 1 table extensible, 4 chaises en simili cuir et 4 chaises en bois rangées dans le placard.", imagePath: "images/control_images/sallemanger.png" , damagesTitle : "Dommages", damages: "impact sur le plateau de la table, chaises en simili griffées à plusieurs endroits", desc: "La salle à manger est composée d'une table en bois extensibles pouvant accueillir 8 personnes." ),
Room(room: "Salon", inventoryTitle : "Inventaire",inventory: "Inventaire du salon : 1 table basse, 6 coussins bleus en velour, 5 coussins d'assise du canapé, un panier", imagePath: "images/control_images/salon.png" , damagesTitle : "Dommages",damages: "Aucun dommage", desc: "Le salon est composé d'un canapé d'angle en tissu convertible en un lit 2 places et d'une table basse. Une jolie décoration en fait une zone très agréable. La télévision par satelite permet d'occuper les journées de pluie ou les moments de repos. "),
Room(room: "La cuisine", inventoryTitle : "Inventaire", inventory: "Inventaire de la cuisine : 2 casseroles, 3 poeles, une vaisselle pour 8 personnes, 2 couteaux de cuisine, etc...", imagePath: "images/control_images/cuisine.png" , damagesTitle : "Dommages",damages: "il manque une cuillère", desc: "La cuisine est entièrement équipée. Cafetière à dosette ou à filtre, théière, grille pain, bouilloire, four à gaz, micro onde, refrigérateur, et plaques au gaz. Tout ce qu'il faut pour faire de bons plats. " ),
Room(room: "La salle d'eau",inventoryTitle : "Inventaire", inventory: "La salle d'eau contient : 1 petit panier, un sèche cheveux", imagePath: "images/control_images/salle_deau.png" , damagesTitle : "Dommages",damages: "aucun dommage", desc: "Salle de douche parfaite"),
Room(room: "La chambre parentale",inventoryTitle : "Inventaire", inventory: "la chambre parentale contient : un lit 140, 2 tables de chevets, 2 oreillers et une couverture 240x240", imagePath: "images/control_images/chambreparentale.png" , damagesTitle : "Dommages",damages: "Tache de sang sur le matelas", desc: "super chambre parentale"),
Room(room: "Le dressing",inventoryTitle : "Inventaire", inventory: "le dressing contient une machine à laver le linge, 2 oreillers supplémentaires, ", imagePath: "images/control_images/dressing.png" , damagesTitle : "Dommages",damages: "aucun dommage", desc: "C'est le dressing de la chambre parentale. Pratique pour tout ranger"),
Room(room: "chambre 1",inventoryTitle : "Inventaire", inventory: "la chambre 1 contient 2 lit 70cm, 2 oreillers et deux couvertures", imagePath: "images/control_images/chambre1.png" , damagesTitle : "Dommages",damages: "aucun dommage", desc: "super chambre pour enfants. C'est la chambre de Luna et Lana"),
Room(room: "toilettes",inventoryTitle : "Inventaire", inventory: "Les toilettes contiennent une brosse WC", imagePath: "images/control_images/toilettes.png" , damagesTitle : "Dommages", damages: "Aucun dommage" ),
Room(room: "Terrasse",inventoryTitle : "Inventaire", inventory: "La terrasse contient : 1 table de jardin, 8 chaises de jardin grises, une plancha, un parasol et son pied, un étendoir à linge, etc.", imagePath: "images/control_images/terrasse.png" , damagesTitle : "Dommages",damages: "7 chaises sont cassées" ),
Room(room: "jardin",inventoryTitle : "Inventaire", inventory: "Le jardin dispose de deux transats ", imagePath: "images/control_images/jardin.png" , damagesTitle : "Dommages",damages: "aucun dommage" ),
];
List imageLiving = [
"images/lieux/living_room/salon.png",
"images/lieux/living_room/salon.png",
];
}

class Room {
String room;
String inventory;
String? desc;
String imagePath;
String damages;
String inventoryTitle;
String damagesTitle;

Room({
required this.inventoryTitle,
required this.room,
required this.inventory,
this.desc,
required this.imagePath,
required this.damages,
required this.damagesTitle,});
String getImage() => imagePath;
}

Answer 1

这个错误基本上意味着您的房间变量是List<Room>和Room。所以，因为是List<Room>，你不能像这样访问room.room，你需要访问特定的索引，然后再访问.room，就像下面的

,

final room = DataRooms().listeDataRooms; //List of Room
Text(
room.first.room // Access the first item from list
// room[0].room Accesing with the help of index, you can write any number in bracket.
// room.last.room Accessing last item from list
)

Answer 2

您已经将room定义为final room = DataRooms().listeDataRooms;，而它本身是List<Room>。(房间清单)

你可以通过room[0].room或room.first.room访问它

Answer 3

您需要小部件参数作为房间名称。

class DetailRoomTest extends StatefulWidget{
String room;
const DetailRoomTest({
Key? key,
required this.room,
}) : super(key: key);

@override
DetailRoomTestState createState() => DetailRoomTestState();
}
class DetailRoomTestState extends State<DetailRoomTest>{
late List<String> _roomImages;

@override
void initState() {
_roomImages = DataRooms().imageLiving;
super.initState();
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
double width = size.width;
double heigth = size.height;
return Scaffold(
appBar: AppBar(
title: Text(widget.room,       
style: TextStyle(
color: Colors.white
),
),
),
body: Column(
children: [
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: _roomImages.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child:Image(
image: AssetImage(_roomImages[index],)
),
);
}
)
],
),
);
}
}