我有两节课。一个是电影,另一个是流派。电影类包含genreName作为属性。我的主页从流派中检索数据,并使用交错网格 View 列出它们。从那里开始,如果我选择一种类型,则应使用Movie对象中提供的genreName属性过滤所有电影,并且应将该类型的所有电影都列出在另一个屏幕(MovieScreen)中。我提供了下面的代码。
class Genre{
final String name;
final int totMovies;
Genre(this.name,this.totMovies);
}
List<Genre> genres= genresData
.map((item)=>Genre(item['name'],item['totMovies'],item['image'])).toList();
//an array
var GenresData= [
{'name':'Horror','totMovies':17},
{'name':'Action','totMovies':25},
{'name':'Neo','totMovies':13},
{'name':'Romance','totMovies':17},
];
class Movie{
final String name;
final int price;
final int totLike;
final int totRating;
final String genreName;
Course(this.name,this.price,this.totLike,this.totRating,this.genreName);
}
List<Movie> movies= moviesData
.map((item)=>Movie(item['name'],item['price'],item['totLike'],item['totRating'],item['genreName'])).toList();
//an array
var moviesData= [
{'name':'Jack reacher','price':17,'totLike':567,'totRating':4,'categoryName':'Actions'},
{'name':'Sedious','price':34,'totLike':12,'totRating':7,'categoryName':'Horror'},
];
下面是我的交错网格 View ,该 View 从流派和显示中获取我的数据。(忽略语法错误)
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Course App',
theme: ThemeData(),
home: HomeScreen(),
routes: {
'/movies':(context)=> MovieScreen(),
},
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body:
Expanded(
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.all(0),
crossAxisCount: 2,
itemCount:genres.length,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
itemBuilder: (context,index){
return InkWell(
onTap: (){
Navigator.push(context,
MaterialPageRoute(
builder: (context)=>MovieScreen(),
settings: RouteSettings(
arguments: movies[index],
),
));
},
child: Container(
padding: EdgeInsets.all(20),
height:index.isEven ? 200:240,
child: Column(
children: <Widget>[
Text(
genres[index].name,
style: kTitleTextStyle,
),Text(
'${genres[index].totMovies} ',
style: TextStyle(
color: kTextColor.withOpacity(.5),
),
)
],
),
),
);
},
staggeredTileBuilder: (index)=> StaggeredTile.fit(1),
),
)
],
),
),
);
}
}
这是我的电影屏幕页面,其中应根据在主屏幕类型列表中选择的类型显示过滤的电影列表。
class MovieScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Movie movie= ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
title:Text(movie.genreName),
),
body: Padding(
padding: const EdgeInsets.only(left:20,top:50,right:20),
child: Column(
children: <Widget>[
Expanded(
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.all(0),
crossAxisCount: 2,
itemCount:1,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
itemBuilder: (context,index){
return Container(
padding: EdgeInsets.all(20),
height:200,
decoration: BoxDecoration(
borderRadius:BorderRadius.circular(16),
color: kBlueColor,
),
child: Column(
children: <Widget>[
Text(
movie.name,
style: kTitleTextStyle,
),
SizedBox(height: 10,),
Text(
'\$ ${movie.price}',
style: TextStyle(
color: kTextColor
),
),
SizedBox(height: 10,),
Text(
'${movie.totLike} Likes'
),
SizedBox(height: 10,),
Text(
'${movie.totRating} Ratings'
),
SizedBox(height: 10,),
Text(
'${movie.genreName} '
),
],
),
);
},
staggeredTileBuilder: (index)=> StaggeredTile.fit(1),
),
)
],
),
),
);
}
我知道我想念一些代码逻辑。有人会告诉我我想念的东西。以及如何使用流派名称过滤电影列表并列出该特定流派的所有电影。谢谢。
最佳答案
您可以在下面复制粘贴运行完整代码
第1步:输入一些错误,例如genreName
和categoryName
,Action
和Actions
步骤2:将genres[index].name
作为参数传递
MaterialPageRoute(
builder: (context) => MovieScreen(),
settings: RouteSettings(
arguments: genres[index].name,
),
));
步骤3:使用
List<Movie> moviesByGenre
过滤并显示数据@override
Widget build(BuildContext context) {
final String genre = ModalRoute.of(context).settings.arguments;
List<Movie> moviesByGenre =
movies.where((element) => element.genreName == genre).toList();
工作演示
完整的代码
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class Genre {
final String name;
final int totMovies;
Genre(this.name, this.totMovies);
}
List<Genre> genres =
GenresData.map((item) => Genre(item['name'], item['totMovies'])).toList();
//an array
var GenresData = [
{'name': 'Horror', 'totMovies': 17},
{'name': 'Action', 'totMovies': 25},
{'name': 'Neo', 'totMovies': 13},
{'name': 'Romance', 'totMovies': 17},
];
class Movie {
final String name;
final int price;
final int totLike;
final int totRating;
final String genreName;
Movie(this.name, this.price, this.totLike, this.totRating, this.genreName);
}
List<Movie> movies = moviesData
.map((item) => Movie(item['name'], item['price'], item['totLike'],
item['totRating'], item['genreName']))
.toList();
//an array
var moviesData = [
{
'name': 'Jack reacher',
'price': 17,
'totLike': 567,
'totRating': 4,
'genreName': 'Action'
},
{
'name': 'Jack reacher 1',
'price': 17,
'totLike': 567,
'totRating': 4,
'genreName': 'Action'
},
{
'name': 'Sedious',
'price': 34,
'totLike': 12,
'totRating': 7,
'genreName': 'Horror'
},
{
'name': 'Sedious 1',
'price': 34,
'totLike': 12,
'totRating': 7,
'genreName': 'Horror'
},
];
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Course App',
theme: ThemeData(),
home: HomeScreen(),
routes: {
'/movies': (context) => MovieScreen(),
},
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: StaggeredGridView.countBuilder(
padding: EdgeInsets.all(0),
crossAxisCount: 2,
itemCount: genres.length,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MovieScreen(),
settings: RouteSettings(
arguments: genres[index].name,
),
));
},
child: Container(
padding: EdgeInsets.all(20),
height: index.isEven ? 200 : 240,
child: Column(
children: <Widget>[
Text(
genres[index].name,
//style: kTitleTextStyle,
),
Text(
'${genres[index].totMovies} ',
style: TextStyle(
color: Colors.blue.withOpacity(.5),
),
)
],
),
),
);
},
staggeredTileBuilder: (index) => StaggeredTile.fit(1),
));
}
}
class MovieScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final String genre = ModalRoute.of(context).settings.arguments;
List<Movie> moviesByGenre =
movies.where((element) => element.genreName == genre).toList();
print(moviesByGenre.length);
return Scaffold(
appBar: AppBar(
title: Text('${genre}'),
),
body: Padding(
padding: const EdgeInsets.only(left: 20, top: 50, right: 20),
child: Column(
children: <Widget>[
Expanded(
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.all(0),
crossAxisCount: 2,
itemCount: moviesByGenre.length,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(20),
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.blue,
),
child: Column(
children: <Widget>[
Text(
moviesByGenre[index].name,
//style: kTitleTextStyle,
),
SizedBox(
height: 10,
),
Text(
'\$ ${moviesByGenre[index].price}',
style: TextStyle(color: Colors.blue),
),
SizedBox(
height: 10,
),
Text('${moviesByGenre[index].totLike} Likes'),
SizedBox(
height: 10,
),
Text('${moviesByGenre[index].totRating} Ratings'),
SizedBox(
height: 10,
),
Text('${moviesByGenre[index].genreName} '),
],
),
);
},
staggeredTileBuilder: (index) => StaggeredTile.fit(1),
),
)
],
),
),
);
}
}
关于flutter - 筛选并在另一个页面中显示结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/61790468/