我有两节课。一个是电影,另一个是流派。电影类包含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步:输入一些错误,例如genreNamecategoryNameActionActions步骤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();

工作演示

flutter - 筛选并在另一个页面中显示结果-LMLPHP

完整的代码
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/

10-11 22:21
查看更多