从一个列表生成多个Widgets

我目前正在学习使用Dart在Flutter中编写移动应用程序，最近我想尝试构建一个应用程序，您可以在其中保留您想要观看的电影并获得有关它们的一些基本信息。现在这只是对我来说，训练去理解颤振的基本概念，我想问如何从一个列表中制作多个小部件。我先给你看一下我的代码，然后再详细说明。

import 'package:flutter/material.dart';
class MovieList {
String name;
String url;
String description;
String actors;
int id;
MovieList(this.name, this.url, this.description, this.actors, this.id);
var movies = [
{
"21",
"assets/images/21_movie.jpeg",
"randomDescriptionfor21",
"idkwhichactors.1",
1
},
{
"Dirty Dancing",
"assets/images/dirty_dancing_movie.jpeg",
"randomDescriptionforDirtyDancing",
"idkwhichactors.2",
2
},
{
"Endless love",
"assets/images/endless_love_movie.jpeg",
"randomDescriptionforEndlesslove",
"idkwhichactors.3",
3
},
{
"Gut gegen Nordwind",
"assets/images/gut_gegen_nordwind_movie.jpeg",
"randomDescriptionforNordwind",
"idkwhichactors.4",
4
},
{
"Illuminati",
"assets/images/illuminati_movie.jpeg",
"randomDescriptionforIlluminati",
"idkwhichactors.5",
5
},
{
"Bridget Jones",
"assets/images/jones_movie.jpeg",
"randomDescriptionforBridgetJones",
"idkwhichactors.6",
6
},
{
"Kevin allein Zuhaus",
"assets/images/kevin_allein_zuhaus_movie.jpeg",
"randomDescriptionforKevin",
"idkwhichactors.7",
7
},
{
"Little Woman",
"assets/images/little_woman_movie.jpeg",
"randomDescriptionforLittleWoman",
"idkwhichactors.8",
8
},
{
"Liebe braucht keine Ferien",
"assets/images/love_movie.jpeg",
"randomDescriptionforLiebeundFerien",
"idkwhichactors.9",
9
},
{
"Marvel-Filme",
"assets/images/marvel_movie.jpeg",
"randomDescriptionforMarvel",
"idkwhichactors.10",
10
},
{
"Oceans 12",
"assets/images/oceans_12_movie.jpeg",
"randomDescriptionforOceans12",
"idkwhichactors.11",
11
},
{
"Pirates of the Carribean",
"assets/images/pirates_carribean_movie.jpeg",
"randomDescriptionforPiraten",
"idkwhichactors.12",
12
},
{
"Romeo und Julia",
"assets/images/romeo_and_julia_movie.jpeg",
"randomDescriptionforRomeoxJulia",
"idkwhichactors.13",
13
},
{
"A star is born",
"assets/images/star_movie.jpeg",
"randomDescriptionforStar",
"idkwhichactors.14",
14
},
{
"Die Entdeckung der Unendlichkeit",
"assets/images/stephen_hawking_movie.jpeg",
"randomDescriptionforStephen",
"idkwhichactors.15",
15
},
{
"Frühstück bei Tiffany",
"assets/images/tiffany_movie.jpeg",
"randomDescriptionforTIffany",
"idkwhichactors.16",
16
}
];
}

如你所见，我定义了一个类，MovieList，其中我定义了一些变量(name, url, description, actors, id)。现在，在这些的初始化下，我定义了一个包含多个电影的列表，它们具有所有这些属性。

问题:如何使用列表来创建多个对象的MovieList和我如何实现一个循环(或其他东西，我将如何做)来显示多个小部件，匹配我在"电影"中定义的电影。单吗?
问题:这是正确的方法吗?就像我说的，我基本上是从飞镖和扑球开始的，所以我真的很需要你的帮助。

提前感谢:)

所以非常感谢你真的帮了我很多。现在我想做我的Card Widget，这就是我改变代码的方式:1:

``
import 'package:flutter/material.dart';
import './header.dart';
import './image_widget.dart';
import './movies_to_watch.dart';
var movies = [
{
'title': '21',
'bannerPath': 'assets/images/21_movie.jpeg',
'description': 'randomDescriptionforPirates',
'actors': [
'some actor',
]
},
{
'title': 'Dirty Dancing',
'bannerPath': 'assets/images/dirty_dancing_movie.jpeg',
'description': 'randomDescriptionforPirates',
'actors': [
'some actor',
]
},
{
'title': 'Endless Love',
'bannerPath': 'assets/images/endless_love_movie.jpeg',
'description': 'randomDescriptionforPirates',
'actors': [
'some actor',
]
},
{
'title': 'Gut gegen Nordwind',
'bannerPath': 'assets/images/gut_gegen_nordwind_movie.jpeg',
'description': 'randomDescriptionforPirates',
'actors': [
'some actor',
]
},
{
'title': 'Illuminati',
'bannerPath': 'assets/images/illuminati_movie.jpeg',
'description': 'randomDescriptionforPirates',
'actors': [
'some actor',
]
},
{
'title': 'Bridget Jones',
'bannerPath': 'assets/images/jones_movie.jpeg',
'description': 'randomDescriptionforPirates',
'actors': [
'some actor',
]
},
{
'title': 'Kevin allein zuhaus',
'bannerPath': 'assets/images/kevin_allein_zuhaus_movie.jpeg',
'description': 'randomDescriptionforPirates',
'actors': [
'some actor',
],
},
];
class Body extends StatelessWidget {
const Body({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: HeaderWidget(),
),
Padding(
padding: EdgeInsets.only(right: 20.0, left: 20.0),
child: FilmstoWatch(),
),
Padding(
padding: EdgeInsets.only(right: 20.0, left: 20.0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
for (var movie in movies)
MovieWidget(model: MovieModel.fromJson(movie)),
],
),
),
),
],
),
);
}
}
``

和2:

``
import 'package:flutter/material.dart';
class MyClass {
// here I am generating fake movies but you should use the data that you already have
List<Map<String, dynamic>> movies = List.generate(
15,
(index) => {
'title': 'fake title $index',
'actors': ['fake actor $index'],
'bannerPath': 'some/fake/path/$index',
'description': 'some fake description $index',
});
List<MovieModel> get models =>
movies.map((movie) => MovieModel.fromJson(movie)).toList();
List<Widget> get widgets =>
models.map((model) => MovieWidget(model: model)).toList();
}
class MovieModel {
MovieModel({
required this.title,
required this.actors,
required this.bannerPath,
required this.description,
});
factory MovieModel.fromJson(Map<String, dynamic> json) {
return MovieModel(
title: json['title'],
actors: json['actors'],
bannerPath: json['bannerPath'],
description: json['description'],
);
}
String title;
String bannerPath;
String description;
List<String> actors;
}
class MovieWidget extends StatelessWidget {
const MovieWidget(
{required this.model}); // if you decide to not make a model class, you would pass each value individually
final MovieModel model;
@override
Widget build(BuildContext context) {
// obviously this can be any widget you want
return SingleChildScrollView(
child: Card(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
elevation: 10.0,
margin: const EdgeInsets.all(10.0),
child: Column(
children: [
Text(model.title),
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(model.bannerPath),
),
),
),
Text(model.description),
if (model.actors.isNotEmpty) Text(model.actors.first),
],
),
),
);
}
}
``

如果我运行这个，我得到这个错误抛出:

https://drive.google.com/file/d/1zbmsOq3lQIPUIZ92mvrg4sCcT21W8cc4/view?usp=sharing

当我替换模型时。bannerPath的实际字符串应该插入到那里它工作。再次感谢您的帮助!

老实说，我不是集合的超级粉丝，也不知道你为什么决定使用它们，所以我把你的集合变成了地图，我也删除了它们的整数，因为我不知道为什么它会有用。正如我所说，这就是我的编码方式，我希望您可以决定是否要保留集合

var movies = [
...
{
'title': 'Pirates of the Carribean',
'banner': 'assets/images/pirates_carribean_movie.jpeg',
'description': 'randomDescriptionforPiraten',
'actors': ['some actor'],
},
...
];

我还建议您创建一个可以以类型安全的方式存储这些值的MovieModel类

class MovieModel {
String title;
String bannerPath;
String description;
List<String> actors;
}

然后你应该制作一些可以显示你想要的信息的小部件

class MovieWidget extends StatelessWidget {
MovieWidget({required this.model}); // if you decide to not make a model class, you would pass each value individually
final MovieModel model;
@override
Widget build(BuildContext context) {
// obviously this can be any widget you want
return Column(
children: [
Text(model.title),
Text(model.banner),
Text(model.description),
Text(model.actors.first),
],
);
}
}

最后，要将影片列表转换为小部件列表，首先需要将其转换为模型列表

final List<MovieModel> models = movies.map((movie) => MovieModel(title: movie['title'], banner: movie['banner'], description: movie['description'], actors: movie['actors']));

然后你可以对小部件做同样的操作:

List<Widget> widgets = models.map((model) => MovieWidget(model: model));

编辑:

关于你关于使用old movies变量的评论。

如果您想将所有这些小部件添加到列中例如:

return Column(
children: [
for (var movie in movies)
MovieWidget(model: MovieModel.fromJson(movie)),
],
);

显然，在上面的例子中，如果你想添加填充，你只需要在MovieWidget周围填充。

相关内容

最新更新

热门标签：