我用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,622&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,
),
],
),
],
),
);
}
}
現在我從網路鏈接為一個影像顯示影像，但我想讓它變得動態。感謝幫助。
uj5u.com熱心網友回復：
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 訪問 photo 變數
例子：
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,
),
),
我鼓勵您閱讀本文以獲取更多詳細資訊和更好的理解。
祝你好運。
uj5u.com熱心網友回復：
您的代碼的問題是您將點擊事件放在輪播滑塊中。而不是將 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>'**
....
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367467.html