添加页面断点，使alineList更加友好

.flutter-plugins-dependencies

@@ -0,0 +1 @@
+{"dependencyGraph":[{"name":"flutter_downloader","dependencies":[]},{"name":"http_interceptor","dependencies":[]},{"name":"install_plugin","dependencies":[]},{"name":"package_info","dependencies":[]},{"name":"path_provider","dependencies":[]},{"name":"permission_handler","dependencies":[]},{"name":"screen","dependencies":[]},{"name":"sqflite","dependencies":[]},{"name":"system_shortcuts","dependencies":[]},{"name":"url_launcher","dependencies":[]},{"name":"video_player","dependencies":[]},{"name":"volume","dependencies":["system_shortcuts"]},{"name":"webview_flutter","dependencies":[]}]}

lib/anime_localizations.dart

@@ -6,6 +6,17 @@ import 'package:intl/intl.dart';
 import 'l10n/messages_all.dart';
 
 class AnimeLocalizations {
+
+  static final Iterable<Locale> supportedLocales = [
+        const Locale('en', ''),
+        const Locale('zh', 'CN'),
+        const Locale.fromSubtags(
+          languageCode: 'zh',
+          scriptCode: 'Hans',
+          countryCode: 'zh_Hans_CN',
+        ),
+  ];
+
   static Future<AnimeLocalizations> load(Locale locale) {
     final String name =
         locale.countryCode.isEmpty ? locale.languageCode : locale.toString();

lib/main.dart

@@ -20,23 +20,15 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      title: "Anime",
+      theme: myTheme,
       localizationsDelegates: [
         const AnimeLocalizationsDelegate(),
         GlobalMaterialLocalizations.delegate,
         GlobalWidgetsLocalizations.delegate,
       ],
-      supportedLocales: [
-        const Locale('en', ''),
-        const Locale('zh', 'CN'),
-        const Locale.fromSubtags(
-          languageCode: 'zh',
-          scriptCode: 'Hans',
-          countryCode: 'zh_Hans_CN',
-        ),
-      ],
-      debugShowCheckedModeBanner: false,
-      title: "Anime",
-      theme: myTheme,
+      supportedLocales: AnimeLocalizations.supportedLocales,
       navigatorKey: router.navigatorKey,
       navigatorObservers: [router.navigatorObserver],
       initialRoute: '/',

lib/pages/anime_types/anime_types_page.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:flutter_video_app/anime_localizations.dart';
 import 'package:flutter_video_app/pages/anime_types/anime_types.store.dart';
-import 'package:flutter_video_app/shared/widgets/anime_card.dart';
+import 'package:flutter_video_app/shared/widgets/anime_grid_view.dart';
 import 'package:flutter_video_app/utils/debounce.dart';
 
 AnimeTypesStore store = AnimeTypesStore();
@@ -140,19 +140,10 @@ class _AnimeTypesPageState extends State<AnimeTypesPage>
                                   Text(AnimeLocalizations.of(context).notData),
                             )),
                           )
-                        : SliverGrid.count(
-                            crossAxisCount: 2, // 每行显示几列
-                            mainAxisSpacing: 2.0, // 每行的上下间距
-                            crossAxisSpacing: 2.0, // 每列的间距
-                            childAspectRatio:
-                                AnimeCard.aspectRatio, //每个孩子的横轴与主轴范围的比率
-                            children: <Widget>[
-                              for (var anime in store.animeData)
-                                AnimeCard(
-                                  key: ObjectKey(anime),
-                                  animeData: anime,
-                                )
-                            ],
+                        : AnimeGridView(
+                            key: ValueKey('anime_types'),
+                            sliver: true,
+                            animes: store.animeData,
                           ),
               ),
               Observer(

lib/pages/collections/collections_page.dart

@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_video_app/anime_localizations.dart';
 import 'package:flutter_video_app/db/app_database.dart';
-import 'package:flutter_video_app/dto/week_data/week_data_dto.dart';
-import 'package:flutter_video_app/shared/widgets/anime_card.dart';
+import 'package:flutter_video_app/shared/widgets/anime_grid_view.dart';
 import 'package:flutter_video_app/store/main/main.store.dart';
 
 /// 我的收藏页面
@@ -14,6 +13,7 @@ class CollectionsPage extends StatefulWidget {
 class _CollectionsPageState extends State<CollectionsPage> {
   @override
   Widget build(BuildContext context) {
+    var centerLoading = Center(child: CircularProgressIndicator());
     return Scaffold(
       body: CustomScrollView(
         slivers: <Widget>[
@@ -26,11 +26,7 @@ class _CollectionsPageState extends State<CollectionsPage> {
             builder: (context, AsyncSnapshot<List<Collection>> snap) {
               var status = snap.connectionState;
               if (status == ConnectionState.waiting) {
-                return SliverToBoxAdapter(
-                  child: Center(
-                    child: CircularProgressIndicator(),
-                  ),
-                );
+                return SliverToBoxAdapter(child: centerLoading);
               }
 
               if (snap.data.isEmpty) {
@@ -49,28 +45,11 @@ class _CollectionsPageState extends State<CollectionsPage> {
                   ),
                 );
               }
-
-              return SliverGrid.count(
-                crossAxisCount: 2, // 每行显示几列
-                mainAxisSpacing: 2.0, // 每行的上下间距
-                crossAxisSpacing: 2.0, // 每列的间距
-                childAspectRatio: AnimeCard.aspectRatio, //每个孩子的横轴与主轴范围的比率
-                children: snap.data.map((Collection c) {
-                  return FutureBuilder(
-                      future: mainStore.collectionsService.getAnime(c.animeId),
-                      builder: (context, AsyncSnapshot<LiData> snap) {
-                        if (snap.connectionState == ConnectionState.waiting) {
-                          return Center(
-                            child: CircularProgressIndicator(),
-                          );
-                        }
-                        if (snap.connectionState == ConnectionState.done) {
-                          return AnimeCard(animeData: snap.data);
-                        }
-
-                        return SizedBox();
-                      });
-                }).toList(),
+              return AnimeGridView(
+                key: ValueKey("collectings"),
+                waitAnimes: snap.data,
+                sliver: true,
+                wait: true,
               );
             },
           ),

lib/pages/home/home_page.dart

@@ -3,8 +3,8 @@ import 'package:flutter_video_app/anime_localizations.dart';
 import 'package:flutter_video_app/pages/home/home.store.dart';
 import 'package:flutter_video_app/pages/home/widgets/home_drawer.dart';
 import 'package:flutter_video_app/pages/list_search/list_search.dart';
-import 'package:flutter_video_app/shared/widgets/anime_card.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
+import 'package:flutter_video_app/shared/widgets/anime_grid_view.dart';
 
 final HomeStore store = HomeStore();
 
@@ -58,17 +58,9 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
                     for (var data in store.weekData)
                       RefreshIndicator(
                         onRefresh: store.refresh,
-                        child: GridView.count(
-                          // PageStorageKey: 保存页面的滚动状态，nice
+                        child: AnimeGridView(
                           key: PageStorageKey<int>(data.index),
-                          crossAxisCount: 2, // 每行显示几列
-                          mainAxisSpacing: 2.0, // 每行的上下间距
-                          crossAxisSpacing: 2.0, // 每列的间距
-                          childAspectRatio: AnimeCard.aspectRatio,
-                          children: <Widget>[
-                            for (var li in data.liData)
-                              AnimeCard(animeData: li),
-                          ],
+                          animes: data.liData.toList(),
                         ),
                       ),
                   ],

lib/pages/recently_updated/recently_updated_page.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:flutter_video_app/anime_localizations.dart';
 import 'package:flutter_video_app/pages/recently_updated/recently_updated.store.dart';
-import 'package:flutter_video_app/shared/widgets/anime_card.dart';
+import 'package:flutter_video_app/shared/widgets/anime_grid_view.dart';
 import 'package:flutter_video_app/shared/widgets/sliver_loading.dart';
 
 final RecentlyUpdatedStore store = RecentlyUpdatedStore();
@@ -30,15 +30,10 @@ class _RecentlyUpdatedPageState extends State<RecentlyUpdatedPage> {
                 if (store.animeList == null) {
                   return SliverLoading();
                 } else {
-                  return SliverGrid.count(
-                    crossAxisCount: 2, // 每行显示几列
-                    mainAxisSpacing: 2.0, // 每行的上下间距
-                    crossAxisSpacing: 2.0, // 每列的间距
-                    childAspectRatio: AnimeCard.aspectRatio, //每个孩子的横轴与主轴范围的比率
-                    children: <Widget>[
-                      for (var anime in store.animeList)
-                        AnimeCard(animeData: anime),
-                    ],
+                  return AnimeGridView(
+                    key: ValueKey('recently_updated'),
+                    sliver: true,
+                    animes: store.animeList,
                   );
                 }
               },

lib/pages/recommend/recommend_page.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:flutter_video_app/anime_localizations.dart';
 import 'package:flutter_video_app/pages/recommend/recommend.store.dart';
-import 'package:flutter_video_app/shared/widgets/anime_card.dart';
+import 'package:flutter_video_app/shared/widgets/anime_grid_view.dart';
 import 'package:flutter_video_app/shared/widgets/sliver_loading.dart';
 
 RecommendStore store = RecommendStore();
@@ -28,16 +28,10 @@ class _RecommendPageState extends State<RecommendPage> {
             Observer(
               builder: (_) {
                 return store.animeList != null
-                    ? SliverGrid.count(
-                        crossAxisCount: 2, // 每行显示几列
-                        mainAxisSpacing: 2.0, // 每行的上下间距
-                        crossAxisSpacing: 2.0, // 每列的间距
-                        childAspectRatio:
-                            AnimeCard.aspectRatio, //每个孩子的横轴与主轴范围的比率
-                        children: <Widget>[
-                          for (var anime in store.animeList)
-                            AnimeCard(animeData: anime),
-                        ],
+                    ? AnimeGridView(
+                        key: ValueKey('recently_updated'),
+                        sliver: true,
+                        animes: store.animeList,
                       )
                     : SliverLoading();
               },

lib/shared/widgets/anime_grid_view.dart

@@ -0,0 +1,73 @@
+import 'package:breakpoints/breakpoints.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_video_app/db/app_database.dart';
+import 'package:flutter_video_app/dto/week_data/week_data_dto.dart';
+import 'package:flutter_video_app/store/main/main.store.dart';
+
+import 'anime_card.dart';
+
+/// anime的Grid列表
+class AnimeGridView extends StatelessWidget {
+  final Key key;
+  final List<LiData> animes;
+  final bool sliver;
+
+  /// 收藏的列表是异步的
+  final bool wait;
+  final List<Collection> waitAnimes;
+
+  const AnimeGridView({
+    @required this.key,
+    this.animes,
+    this.waitAnimes,
+    this.sliver = false,
+    this.wait = false,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    double width = MediaQuery.of(context).size.width;
+    final int crossAxisCount =
+        Breakpoints.isXs(width) ? 2 : Breakpoints.isSm(width) ? 3 : 4; // 每行显示几列
+    final double mainAxisSpacing = 2.0; // 每行的上下间距
+    final double crossAxisSpacing = 2.0; // 每列的间距
+
+    var _result;
+    if (wait) {
+      _result = waitAnimes.map((Collection c) => FutureBuilder(
+          future: mainStore.collectionsService.getAnime(c.animeId),
+          builder: (context, AsyncSnapshot<LiData> snap) {
+            if (snap.connectionState == ConnectionState.waiting) {
+              return Center(child: CircularProgressIndicator());
+            }
+            if (snap.connectionState == ConnectionState.done) {
+              return AnimeCard(animeData: snap.data);
+            }
+            return SizedBox();
+          })).toList();
+    } else {
+      _result = animes
+          .map((anime) => AnimeCard(key: ValueKey(anime.id), animeData: anime))
+          .toList();
+    }
+    if (sliver) {
+      return SliverGrid.count(
+        // PageStorageKey: 保存页面的滚动状态，nice
+        key: key,
+        crossAxisCount: crossAxisCount,
+        mainAxisSpacing: mainAxisSpacing,
+        crossAxisSpacing: crossAxisSpacing,
+        childAspectRatio: AnimeCard.aspectRatio,
+        children: _result,
+      );
+    }
+    return GridView.count(
+      key: key,
+      crossAxisCount: crossAxisCount,
+      mainAxisSpacing: mainAxisSpacing,
+      crossAxisSpacing: crossAxisSpacing,
+      childAspectRatio: AnimeCard.aspectRatio,
+      children: _result,
+    );
+  }
+}

pubspec.lock

@@ -43,6 +43,13 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.0.5"
+  breakpoints:
+    dependency: "direct main"
+    description:
+      name: breakpoints
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "0.1.0"
   bubble_bottom_bar:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_video_app
 description: a play anime app
-version: 0.6.0
+version: 0.6.1
 
 environment:
   sdk: '>=2.2.2 <3.0.0'
@@ -56,6 +56,7 @@ dependencies:
       ref: master
 
   toast: ^0.1.5
+  breakpoints: ^0.1.0
 
 dev_dependencies:
   flutter_test: