我用电影的信息制作了一个List。
class Movie {
String imgUrl;
String title;
String categories;
int year;
String country;
int length;
String description;
List<String> screenshots;
Movie({
required this.imgUrl,
required this.title,
required this.categories,
required this.year,
required this.country,
required this.length,
required this.description,
required this.screenshots,
});
}
final List<Movie> movies = [
Movie(
imgUrl:
'https://static.posters.cz/image/1300/plakaty/james-bond-no-time-to-die-profile-i114389.jpg',
title: 'No time to die',
categories: 'Adventure',
year: 2021,
country: 'USA/England',
length: 183,
description:
'James Bond has left active service. His peace is short-lived when Felix Leiter, an old friend from the CIA, turns up asking for help, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.',
screenshots: [
'https://i.pinimg.com/originals/fd/5e/1d/fd5e1d8878c402aaba2fb6373e880b1f.webp',
'https://cdn.mos.cms.futurecdn.net/dNmCDjJT5G76aDKiYphTkF.jpg',
'https://i.imgur.com/Zm9X4lT.jpg',
'https://images.complex.com/complex/images/c_fill,f_auto,g_center,w_1200/fl_lossy,pg_1/knie3z7uwe3inyua5kft/no-time-to-die-04'
]),
Movie(
imgUrl:
'https://i.pinimg.com/originals/4b/5d/90/4b5d903464d54b247674d2f75c126cb4.jpg',
title: 'Moana',
categories: 'Family, Kids',
year: 2016,
country: 'USA',
length: 103,
description:
'On the Polynesian island of Motunui, the inhabitants worship the goddess Te Fiti, who brought life to the ocean, using a stone as her heart and the source of her power. Maui, the shape-shifting demigod and master of sailing, steals the heart to give humanity the power of creation. However, Te Fiti disintegrates, and Maui is attacked by Te Ka, a volcanic demon, losing both his magical giant fishhook and the heart to the depths. A millennium later, Moana, daughter of Motunui's chief Tui, is chosen by the ocean to return the heart to Te Fiti. However, Tui arrives and takes Moana away, causing her to lose the heart. Tui and Moana's mother, Sina, try to keep her away from the ocean to prepare her for ascension as the island's chief.',
screenshots: [
'https://i0.wp.com/www.nerdsandbeyond.com/wp-content/uploads/2016/10/Screen-Shot-2016-10-17-at-2.14.24-PM.png?fit=1576%2C622&ssl=1',
'http://www.fortsandfairies.com/wp-content/uploads/2016/11/Moana-8.jpg',
'https://ilarge.lisimg.com/image/14155381/1118full-moana-screenshot.jpg',
]),
]
我还用这些图像制作了一个Carosuel。当你点击这些照片时，我想导航到新屏幕(电影的详细信息(。
class MainHome extends StatefulWidget {
@override
_MainHomeState createState() => _MainHomeState();
}
class _MainHomeState extends State<MainHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Navbar(),
Container(
width: MediaQuery.of(context).size.width - 60,
child: ListView(
children: <Widget>[
SizedBox(
height: 50,
),
HeadMenu(),
SizedBox(
height: 20,
),
GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => MovieScreen(),
),
),
child: CarouselSlider(
items: movies
.map((e) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(e.imgUrl),
fit: BoxFit.fitHeight),
),
))
.toList(),
options: CarouselOptions(
height: 450,
viewportFraction: 0.65,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
),
),
),
],
),
),
],
),
);
}
}
现在我陷入了这个问题。我如何从上面制作的List中获取信息？我想做一些类似的事情，我点击一部电影，我想把这个图像/信息放到另一个屏幕上。我如何通过这些屏幕传递信息？
第二个屏幕上有一个代码：
class MovieScreen extends StatefulWidget {
@override
_MovieScreenState createState() => _MovieScreenState();
}
class _MovieScreenState extends State<MovieScreen> {
final String photo = 'https://images.complex.com/complex/images/c_fill,f_auto,g_center,w_1200/fl_lossy,pg_1/knie3z7uwe3inyua5kft/no-time-to-die-04';
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: ListView(
children: [
Stack(
children: [
Container(
transform: Matrix4.translationValues(0, -50, 0),
width: double.infinity,
child: Hero(
tag: photo,
child: ClipShadowPath(
clipper: CircularClipper(),
shadow: Shadow(blurRadius: 20),
child: Image(
height: 400,
image: NetworkImage(photo),
fit: BoxFit.cover,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
padding: EdgeInsets.only(left: 20),
onPressed: () => Navigator.pop(context),
icon: Icon(Icons.arrow_back),
iconSize: 30,
),
IconButton(
padding: EdgeInsets.only(right: 20),
onPressed: () => Navigator.pop(context),
icon: Icon(Icons.favorite_outline),
iconSize: 30,
color: Colors.red,
),
],
),
],
),
);
}
}
现在，我从网络链接中为一个图像制作了显示图像，但我想使其动态。谢谢你的帮助。
class MovieScreen extends StatefulWidget {
//add these two lines
final String photo;
// required this.photo is called a named parameter and you can add as many as you want
const MovieScreen({Key? key, required this.photo}) : super(key: key);
@override
_MovieScreenState createState() => _MovieScreenState();
}
现在您可以使用小工具访问照片变量。照片
示例：
Image(
height: 400,
image: NetworkImage(widget.photo),
fit: BoxFit.cover,
),
现在剩下的就是像这样把参数传递给你的类//请注意，你应该像这个一样，在转盘内的位置更换你的gestore探测器
CarouselSlider(
items: movies
.map((e) => GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => MovieScreen(),
),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(e.imgUrl),
fit: BoxFit.fitHeight),
),
)))
.toList(),
options: CarouselOptions(
height: 450,
viewportFraction: 0.65,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
),
),
我鼓励你阅读这篇文章以获得更多的细节和更好的理解。
祝你好运。
代码的问题是您将点击事件放在了旋转木马滑块中。相反，要将GestureDetector放在那里，请将容器包裹在转盘滑块内，该滑块显示每个电影列表，如下所示。当你把手势检测器放在carouselSLider里时，你就可以把每一部电影的详细信息传递到下一个屏幕，因为你已经创建了列出整个电影列表的地图。为了将数据从这个屏幕传递到下一个屏幕，你必须制作电影类型的构造函数，因为你必须在这个屏幕上显示上一个屏幕的数据。
CarouselSlider(
items: movies.map((e) =>
GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => MovieScreen(movieData:e),),),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(e.imgUrl),
fit: BoxFit.fitHeight),
),
))
.toList(),),
...
),
在Movie Screen中，创建Movie类型的构造函数接收来自前一屏幕的数据
class MovieScreen extends StatefulWidget {
final Movie movieData;
const MovieScreen ({this.movieData});
@override
_MovieScreenState createState() => _MovieScreenState();
}
class _MovieScreenState extends State<MovieScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
**wherever you need data of movie ,use 'widget.movieData.<params you like to show>'**
....
);
}
}