将 information/data 从一个屏幕传递到另一个屏幕时出现问题
Problem with passing information/data from one screen to another screen from List
我做了一个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 中获取信息？
我想制作类似的东西，我点击一部电影，我想把这个 image/information 放到另一个屏幕上。我如何通过这些屏幕传递信息？
有来自第二个屏幕的代码：
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,
),
],
),
],
),
);
}
}
现在我为来自网络 link 的一张图片显示了图片，但我想让它动态化。感谢您的帮助。
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();
}
现在您可以使用 widget.photo
访问照片变量
示例：
Image(
height: 400,
image: NetworkImage(widget.photo),
fit: BoxFit.cover,
),
现在剩下的就是像这样将参数传递给您的 class
//注意你应该像这样改变你的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,
),
),
我鼓励您阅读 This 以获得更多详细信息和更好的理解。
祝你好运。
您的代码存在问题，因为您将点击事件放入了旋转木马滑块中。而不是将 GestureDetector 放在那里，而是将容器包裹在轮播滑块内，轮播滑块显示每个电影列表，如下所示。当您将 gesturedetector 放入 carouselSLider 中时，您就可以将每部电影的详细信息传递到下一个屏幕，因为您已经创建了用于列出整个电影列表的地图。
为了将数据从这个屏幕传递到下一个屏幕，您必须制作 Movie 类型的构造函数，因为您必须在这个屏幕中显示上一个屏幕的数据。
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>'**
....
);
}
}
我做了一个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 中获取信息？
我想制作类似的东西，我点击一部电影，我想把这个 image/information 放到另一个屏幕上。我如何通过这些屏幕传递信息？
有来自第二个屏幕的代码：
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,
),
],
),
],
),
);
}
}
现在我为来自网络 link 的一张图片显示了图片，但我想让它动态化。感谢您的帮助。
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();
}
现在您可以使用 widget.photo
访问照片变量示例：
Image(
height: 400,
image: NetworkImage(widget.photo),
fit: BoxFit.cover,
),
现在剩下的就是像这样将参数传递给您的 class //注意你应该像这样改变你的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,
),
),
我鼓励您阅读 This 以获得更多详细信息和更好的理解。
祝你好运。
您的代码存在问题，因为您将点击事件放入了旋转木马滑块中。而不是将 GestureDetector 放在那里，而是将容器包裹在轮播滑块内，轮播滑块显示每个电影列表，如下所示。当您将 gesturedetector 放入 carouselSLider 中时，您就可以将每部电影的详细信息传递到下一个屏幕，因为您已经创建了用于列出整个电影列表的地图。 为了将数据从这个屏幕传递到下一个屏幕，您必须制作 Movie 类型的构造函数，因为您必须在这个屏幕中显示上一个屏幕的数据。
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>'**
....
);
}
}