fix: 视频合集，向下滑动 ui 显示问题 issues #314

lib/pages/bangumi/widgets/bangumi_panel.dart

@@ -5,6 +5,7 @@ import 'package:hive/hive.dart';
 import 'package:pilipala/models/bangumi/info.dart';
 import 'package:pilipala/pages/video/detail/index.dart';
 import 'package:pilipala/utils/storage.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 
 class BangumiPanel extends StatefulWidget {
   final List<EpisodeItem> pages;
@@ -35,6 +36,7 @@ class _BangumiPanelState extends State<BangumiPanel> {
   late int cid;
   String heroTag = Get.arguments['heroTag'];
   late final VideoDetailController videoDetailCtr;
+  final ItemScrollController itemScrollController = ItemScrollController();
 
   @override
   void initState() {
@@ -70,10 +72,11 @@ class _BangumiPanelState extends State<BangumiPanel> {
         return StatefulBuilder(
           builder: (BuildContext context, StateSetter setState) {
             WidgetsBinding.instance.addPostFrameCallback((_) async {
-              await Future.delayed(const Duration(milliseconds: 200));
+              // await Future.delayed(const Duration(milliseconds: 200));
-              listViewScrollCtr_2.animateTo(currentIndex * 56,
+              // listViewScrollCtr_2.animateTo(currentIndex * 56,
-                  duration: const Duration(milliseconds: 500),
+              //     duration: const Duration(milliseconds: 500),
-                  curve: Curves.easeInOut);
+              //     curve: Curves.easeInOut);
+              itemScrollController.jumpTo(index: currentIndex);
             });
             // 在这里使用 setState 更新状态
             return Container(
@@ -101,11 +104,9 @@ class _BangumiPanelState extends State<BangumiPanel> {
                   ),
                   Expanded(
                     child: Material(
-                      child: ListView.builder(
+                      child: ScrollablePositionedList.builder(
-                        controller: listViewScrollCtr_2,
                         itemCount: widget.pages.length,
-                        itemBuilder: (context, index) {
+                        itemBuilder: (context, index) => ListTile(
-                          return ListTile(
                           onTap: () {
                             setState(() {
                               changeFucCall(widget.pages[index], index);
@@ -115,8 +116,7 @@ class _BangumiPanelState extends State<BangumiPanel> {
                           leading: index == currentIndex
                               ? Image.asset(
                                   'assets/images/live.gif',
-                                    color:
+                                  color: Theme.of(context).colorScheme.primary,
-                                        Theme.of(context).colorScheme.primary,
                                   height: 12,
                                 )
                               : null,
@@ -135,8 +135,8 @@ class _BangumiPanelState extends State<BangumiPanel> {
                                   height: 20,
                                 )
                               : const SizedBox(),
-                          );
+                        ),
-                        },
+                        itemScrollController: itemScrollController,
                       ),
                     ),
                   ),

lib/pages/video/detail/introduction/widgets/season.dart

@@ -3,6 +3,7 @@ import 'package:get/get.dart';
 import 'package:pilipala/models/video_detail_res.dart';
 import 'package:pilipala/pages/video/detail/index.dart';
 import 'package:pilipala/utils/id_utils.dart';
+import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 
 class SeasonPanel extends StatefulWidget {
   final UgcSeason ugcSeason;
@@ -29,6 +30,7 @@ class _SeasonPanelState extends State<SeasonPanel> {
   String heroTag = Get.arguments['heroTag'];
   late VideoDetailController _videoDetailController;
   final ScrollController _scrollController = ScrollController();
+  final ItemScrollController itemScrollController = ItemScrollController();
 
   @override
   void initState() {
@@ -101,8 +103,7 @@ class _SeasonPanelState extends State<SeasonPanel> {
                 return StatefulBuilder(
                     builder: (BuildContext context, StateSetter setState) {
                   WidgetsBinding.instance.addPostFrameCallback((_) async {
-                    await Future.delayed(const Duration(milliseconds: 200));
+                    itemScrollController.jumpTo(index: currentIndex);
-                    _scrollController.jumpTo(currentIndex * 56);
                   });
                   return Container(
                     height: widget.sheetHeight,
@@ -133,11 +134,9 @@ class _SeasonPanelState extends State<SeasonPanel> {
                         ),
                         Expanded(
                           child: Material(
-                            child: ListView.builder(
+                            child: ScrollablePositionedList.builder(
-                              controller: _scrollController,
                               itemCount: episodes.length,
-                              itemBuilder: (context, index) {
+                              itemBuilder: (context, index) => ListTile(
-                                return ListTile(
                                 onTap: () =>
                                     changeFucCall(episodes[index], index),
                                 dense: false,
@@ -155,16 +154,14 @@ class _SeasonPanelState extends State<SeasonPanel> {
                                   style: TextStyle(
                                     fontSize: 14,
                                     color: index == currentIndex
-                                          ? Theme.of(context)
+                                        ? Theme.of(context).colorScheme.primary
-                                              .colorScheme
-                                              .primary
                                         : Theme.of(context)
                                             .colorScheme
                                             .onSurface,
                                   ),
                                 ),
-                                );
+                              ),
-                              },
+                              itemScrollController: itemScrollController,
                             ),
                           ),
                         ),
@@ -210,112 +207,3 @@ class _SeasonPanelState extends State<SeasonPanel> {
     });
   }
 }
-
-// Widget seasonPanel(UgcSeason ugcSeason, cid, sheetHeight) {
-//   return Builder(builder: (context) {
-//     List<EpisodeItem> episodes = ugcSeason.sections!.first.episodes!;
-//     int currentIndex = episodes.indexWhere((e) => e.cid == cid);
-//     return Container(
-//       margin: const EdgeInsets.only(
-//         top: 8,
-//         left: 2,
-//         right: 2,
-//         bottom: 2,
-//       ),
-//       child: Material(
-//         color: Theme.of(context).colorScheme.onInverseSurface,
-//         borderRadius: BorderRadius.circular(6),
-//         clipBehavior: Clip.hardEdge,
-//         child: InkWell(
-//           onTap: () => showBottomSheet(
-//             context: context,
-//             builder: (_) => Container(
-//               height: sheetHeight,
-//               color: Theme.of(context).colorScheme.background,
-//               child: Column(
-//                 children: [
-//                   Container(
-//                     height: 45,
-//                     padding: const EdgeInsets.only(left: 14, right: 14),
-//                     child: Row(
-//                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
-//                       children: [
-//                         Text(
-//                           '合集（${episodes.length}）',
-//                           style: Theme.of(context).textTheme.titleMedium,
-//                         ),
-//                         IconButton(
-//                           icon: const Icon(Icons.close),
-//                           onPressed: () => Navigator.pop(context),
-//                         ),
-//                       ],
-//                     ),
-//                   ),
-//                   Divider(
-//                     height: 1,
-//                     color: Theme.of(context).dividerColor.withOpacity(0.1),
-//                   ),
-//                   Expanded(
-//                     child: Material(
-//                       child: ListView.builder(
-//                         itemCount: episodes.length,
-//                         itemBuilder: (context, index) {
-//                           return InkWell(
-//                             onTap: () {},
-//                             child: Padding(
-//                               padding: const EdgeInsets.only(
-//                                   top: 10, bottom: 10, left: 15, right: 15),
-//                               child: Text(
-//                                 episodes[index].title!,
-//                                 style: TextStyle(
-//                                     color: index == currentIndex
-//                                         ? Theme.of(context).colorScheme.primary
-//                                         : Theme.of(context)
-//                                             .colorScheme
-//                                             .onSurface),
-//                               ),
-//                             ),
-//                           );
-//                         },
-//                       ),
-//                     ),
-//                   ),
-//                 ],
-//               ),
-//             ),
-//           ),
-//           child: Padding(
-//             padding: const EdgeInsets.fromLTRB(8, 12, 8, 12),
-//             child: Row(
-//               children: [
-//                 Expanded(
-//                   child: Text(
-//                     '合集：${ugcSeason.title!}',
-//                     style: Theme.of(context).textTheme.labelMedium,
-//                     overflow: TextOverflow.ellipsis,
-//                   ),
-//                 ),
-//                 const SizedBox(width: 15),
-//                 Image.asset(
-//                   'assets/images/live.gif',
-//                   color: Theme.of(context).colorScheme.primary,
-//                   height: 12,
-//                 ),
-//                 const SizedBox(width: 10),
-//                 Text(
-//                   '${currentIndex + 1}/${ugcSeason.epCount}',
-//                   style: Theme.of(context).textTheme.labelMedium,
-//                 ),
-//                 const SizedBox(width: 6),
-//                 const Icon(
-//                   Icons.arrow_forward_ios_outlined,
-//                   size: 13,
-//                 )
-//               ],
-//             ),
-//           ),
-//         ),
-//       ),
-//     );
-//   });
-// }

pubspec.lock

@@ -1198,6 +1198,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "0.1.3"
+  scrollable_positioned_list:
+    dependency: "direct main"
+    description:
+      name: scrollable_positioned_list
+      sha256: "1b54d5f1329a1e263269abc9e2543d90806131aa14fe7c6062a8054d57249287"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "0.3.8"
   share_plus:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -132,6 +132,7 @@ dependencies:
   # 极验
   gt3_flutter_plugin: ^0.0.8
   uuid: ^3.0.7
+  scrollable_positioned_list: ^0.3.8
 
   
 dev_dependencies: