more fab anim

Closes #2265

Signed-off-by: dom <githubaccount56556@proton.me>

lib/pages/common/dyn/common_dyn_page.dart

@@ -22,7 +22,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
 abstract class CommonDynPageState<T extends StatefulWidget> extends State<T>
-    with SingleTickerProviderStateMixin, FabMixin {
+    with SingleTickerProviderStateMixin, BaseFabMixin, FabMixin {
   CommonDynController get controller;
 
   late final ScrollController scrollController;

lib/pages/common/fab_mixin.dart

@@ -1,18 +1,19 @@
 import 'package:flutter/material.dart';
 
-mixin FabMixin<T extends StatefulWidget> on State<T>, TickerProvider {
+mixin BaseFabMixin<T extends StatefulWidget> on State<T>, TickerProvider {
-  bool _isFabVisible = true;
+  late bool _isFabVisible = true;
-  late final AnimationController _fabAnimationCtr;
+  AnimationController get fabAnimationCtr;
-  late final Animation<Offset> fabAnimation;
+  Animation<Offset> get fabAnimation;
 
-  @override
+  AnimationController _initController() {
-  void initState() {
+    return AnimationController(
-    super.initState();
-    _fabAnimationCtr = AnimationController(
       vsync: this,
       duration: const Duration(milliseconds: 100),
     );
-    fabAnimation = _fabAnimationCtr.drive(
+  }
+
+  Animation<Offset> _initAnimation() {
+    return fabAnimationCtr.drive(
       Tween<Offset>(
         begin: Offset.zero,
         end: const Offset(0.0, 1.0),
@@ -23,20 +24,51 @@ mixin FabMixin<T extends StatefulWidget> on State<T>, TickerProvider {
   void showFab() {
     if (!_isFabVisible) {
       _isFabVisible = true;
-      _fabAnimationCtr.reverse();
+      fabAnimationCtr.reverse();
     }
   }
 
   void hideFab() {
     if (_isFabVisible) {
       _isFabVisible = false;
-      _fabAnimationCtr.forward();
+      fabAnimationCtr.forward();
     }
   }
+}
+
+mixin FabMixin<T extends StatefulWidget> on BaseFabMixin<T> {
+  @override
+  late final AnimationController fabAnimationCtr;
+  @override
+  late final Animation<Offset> fabAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    fabAnimationCtr = _initController();
+    fabAnimation = _initAnimation();
+  }
 
   @override
   void dispose() {
-    _fabAnimationCtr.dispose();
+    fabAnimationCtr.dispose();
+    super.dispose();
+  }
+}
+
+mixin LazyFabMixin<T extends StatefulWidget> on BaseFabMixin<T> {
+  AnimationController? _fabAnimationCtr;
+  Animation<Offset>? _fabAnimation;
+
+  @override
+  AnimationController get fabAnimationCtr =>
+      _fabAnimationCtr ??= _initController();
+  @override
+  Animation<Offset> get fabAnimation => _fabAnimation ??= _initAnimation();
+
+  @override
+  void dispose() {
+    _fabAnimationCtr?.dispose();
     super.dispose();
   }
 }

lib/pages/dynamics_topic/view.dart

@@ -11,6 +11,7 @@ import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/models/common/image_type.dart';
 import 'package:PiliPlus/models_new/dynamic/dyn_topic_feed/item.dart';
 import 'package:PiliPlus/models_new/dynamic/dyn_topic_top/top_details.dart';
+import 'package:PiliPlus/pages/common/fab_mixin.dart';
 import 'package:PiliPlus/pages/dynamics/widgets/dynamic_panel.dart';
 import 'package:PiliPlus/pages/dynamics_create/view.dart';
 import 'package:PiliPlus/pages/dynamics_topic/controller.dart';
@@ -38,7 +39,8 @@ class DynTopicPage extends StatefulWidget {
   State<DynTopicPage> createState() => _DynTopicPageState();
 }
 
-class _DynTopicPageState extends State<DynTopicPage> with DynMixin {
+class _DynTopicPageState extends State<DynTopicPage>
+    with DynMixin, SingleTickerProviderStateMixin, BaseFabMixin, FabMixin {
   final DynTopicController _controller = Get.put(
     DynTopicController(),
     tag: Utils.generateRandomString(8),
@@ -48,102 +50,130 @@ class _DynTopicPageState extends State<DynTopicPage> with DynMixin {
   Widget build(BuildContext context) {
     final colorScheme = ColorScheme.of(context);
     final padding = MediaQuery.viewPaddingOf(context);
-    return Scaffold(
+    return Material(
-      resizeToAvoidBottomInset: false,
+      child: Stack(
-      floatingActionButton: FloatingActionButton.extended(
+        clipBehavior: .none,
-        onPressed: () {
+        children: [
-          if (_controller.isLogin) {
+          refreshIndicator(
-            CreateDynPanel.onCreateDyn(
+            onRefresh: _controller.onRefresh,
-              context,
+            child: NotificationListener<UserScrollNotification>(
-              topic: Pair(
+              onNotification: (notification) {
-                first: int.parse(_controller.topicId),
+                final direction = notification.direction;
-                second: _controller.topicName,
+                if (direction == .forward) {
-              ),
+                  showFab();
-            );
+                } else if (direction == .reverse) {
-          } else {
+                  hideFab();
-            SmartDialog.showToast('账号未登录');
+                }
-          }
+                return false;
-        },
+              },
-        icon: const Icon(CustomIcons.topic_tag, size: 20),
+              child: CustomScrollView(
-        label: const Text('参与话题'),
+                controller: _controller.scrollController,
-      ),
+                physics: const AlwaysScrollableScrollPhysics(),
-      body: refreshIndicator(
+                slivers: [
-        onRefresh: _controller.onRefresh,
+                  Obx(
-        child: CustomScrollView(
+                    () => _buildAppBar(
-          controller: _controller.scrollController,
+                      colorScheme,
-          physics: const AlwaysScrollableScrollPhysics(),
+                      padding,
-          slivers: [
+                      _controller.topState.value,
-            Obx(
-              () => _buildAppBar(
-                colorScheme,
-                padding,
-                _controller.topState.value,
-              ),
-            ),
-            Obx(() {
-              final allSortBy = _controller.topicSortByConf.value?.allSortBy;
-              if (allSortBy != null && allSortBy.isNotEmpty) {
-                return SliverPinnedHeader(
-                  backgroundColor: colorScheme.surface,
-                  child: Padding(
-                    padding: EdgeInsets.only(
-                      left: 12 + padding.left,
-                      top: 6,
-                      bottom: 6,
-                    ),
-                    child: Builder(
-                      builder: (context) {
-                        return ToggleButtons(
-                          fillColor: colorScheme.secondaryContainer,
-                          selectedColor: colorScheme.onSecondaryContainer,
-                          constraints: const BoxConstraints(
-                            minWidth: 54,
-                            minHeight: 24,
-                          ),
-                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                          borderRadius: const .all(.circular(25)),
-                          onPressed: (index) {
-                            _controller.onSort(allSortBy[index].sortBy!);
-                            (context as Element).markNeedsBuild();
-                          },
-                          isSelected: allSortBy
-                              .map((e) => e.sortBy == _controller.sortBy)
-                              .toList(),
-                          children: allSortBy.map((e) {
-                            return Text(
-                              e.sortName!,
-                              style: const TextStyle(
-                                fontSize: 13,
-                                height: 1,
-                              ),
-                              strutStyle: const StrutStyle(
-                                height: 1,
-                                leading: 0,
-                                fontSize: 13,
-                              ),
-                              textScaler: TextScaler.noScaling,
-                            );
-                          }).toList(),
-                        );
-                      },
                     ),
                   ),
-                );
+                  Obx(() {
-              }
+                    final allSortBy =
-              return const SliverToBoxAdapter();
+                        _controller.topicSortByConf.value?.allSortBy;
-            }),
+                    if (allSortBy != null && allSortBy.isNotEmpty) {
-            SliverPadding(
+                      return SliverPinnedHeader(
-              padding: EdgeInsets.only(
+                        backgroundColor: colorScheme.surface,
-                left: padding.left,
+                        child: Padding(
-                right: padding.right,
+                          padding: EdgeInsets.only(
-                bottom: padding.bottom + 100,
+                            left: 12 + padding.left,
-              ),
+                            top: 6,
-              sliver: buildPage(
+                            bottom: 6,
-                Obx(() => _buildBody(_controller.loadingState.value)),
+                          ),
+                          child: Builder(
+                            builder: (context) {
+                              return ToggleButtons(
+                                fillColor: colorScheme.secondaryContainer,
+                                selectedColor: colorScheme.onSecondaryContainer,
+                                constraints: const BoxConstraints(
+                                  minWidth: 54,
+                                  minHeight: 24,
+                                ),
+                                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                                borderRadius: const .all(.circular(25)),
+                                onPressed: (index) {
+                                  _controller.onSort(allSortBy[index].sortBy!);
+                                  (context as Element).markNeedsBuild();
+                                },
+                                isSelected: allSortBy
+                                    .map((e) => e.sortBy == _controller.sortBy)
+                                    .toList(),
+                                children: allSortBy.map((e) {
+                                  return Text(
+                                    e.sortName!,
+                                    style: const TextStyle(
+                                      fontSize: 13,
+                                      height: 1,
+                                    ),
+                                    strutStyle: const StrutStyle(
+                                      height: 1,
+                                      leading: 0,
+                                      fontSize: 13,
+                                    ),
+                                    textScaler: TextScaler.noScaling,
+                                  );
+                                }).toList(),
+                              );
+                            },
+                          ),
+                        ),
+                      );
+                    }
+                    return const SliverToBoxAdapter();
+                  }),
+                  SliverPadding(
+                    padding: EdgeInsets.only(
+                      left: padding.left,
+                      right: padding.right,
+                      bottom: padding.bottom + 100,
+                    ),
+                    sliver: buildPage(
+                      Obx(() => _buildBody(_controller.loadingState.value)),
+                    ),
+                  ),
+                ],
               ),
             ),
-          ],
+          ),
-        ),
+          Positioned(
+            right: padding.right + kFloatingActionButtonMargin,
+            bottom: 0,
+            child: SlideTransition(
+              position: fabAnimation,
+              child: Padding(
+                padding: .only(
+                  bottom: padding.bottom + kFloatingActionButtonMargin,
+                ),
+                child: FloatingActionButton.extended(
+                  onPressed: () {
+                    if (_controller.isLogin) {
+                      CreateDynPanel.onCreateDyn(
+                        context,
+                        topic: Pair(
+                          first: int.parse(_controller.topicId),
+                          second: _controller.topicName,
+                        ),
+                      );
+                    } else {
+                      SmartDialog.showToast('账号未登录');
+                    }
+                  },
+                  icon: const Icon(CustomIcons.topic_tag, size: 20),
+                  label: const Text('参与话题'),
+                ),
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }

lib/pages/follow/child/child_view.dart

@@ -7,6 +7,7 @@ import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
 import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/models/common/follow_order_type.dart';
 import 'package:PiliPlus/models_new/follow/list.dart';
+import 'package:PiliPlus/pages/common/fab_mixin.dart';
 import 'package:PiliPlus/pages/follow/child/child_controller.dart';
 import 'package:PiliPlus/pages/follow/controller.dart';
 import 'package:PiliPlus/pages/follow/widgets/follow_item.dart';
@@ -37,7 +38,11 @@ class FollowChildPage extends StatefulWidget {
 }
 
 class _FollowChildPageState extends State<FollowChildPage>
-    with AutomaticKeepAliveClientMixin {
+    with
+        AutomaticKeepAliveClientMixin,
+        SingleTickerProviderStateMixin,
+        BaseFabMixin,
+        LazyFabMixin {
   late String _tag;
   late FollowChildController _followController;
 
@@ -107,20 +112,41 @@ class _FollowChildPageState extends State<FollowChildPage>
       return Stack(
         clipBehavior: Clip.none,
         children: [
-          child,
+          NotificationListener<UserScrollNotification>(
+            onNotification: (notification) {
+              final direction = notification.direction;
+              if (direction == .forward) {
+                showFab();
+              } else if (direction == .reverse) {
+                hideFab();
+              }
+              return false;
+            },
+            child: child,
+          ),
           Positioned(
             right: kFloatingActionButtonMargin + padding.right,
-            bottom: kFloatingActionButtonMargin + padding.bottom,
+            bottom: 0,
-            child: FloatingActionButton.extended(
+            child: SlideTransition(
-              onPressed: () => _followController
+              position: fabAnimation,
-                ..setOrderType(
+              child: Padding(
-                  _followController.orderType.value == FollowOrderType.def
+                padding: .only(
-                      ? FollowOrderType.attention
+                  bottom: kFloatingActionButtonMargin + padding.bottom,
-                      : FollowOrderType.def,
+                ),
-                )
+                child: FloatingActionButton.extended(
-                ..onReload(),
+                  onPressed: () => _followController
-              icon: const Icon(Icons.format_list_bulleted, size: 20),
+                    ..setOrderType(
-              label: Obx(() => Text(_followController.orderType.value.title)),
+                      _followController.orderType.value == FollowOrderType.def
+                          ? FollowOrderType.attention
+                          : FollowOrderType.def,
+                    )
+                    ..onReload(),
+                  icon: const Icon(Icons.format_list_bulleted, size: 20),
+                  label: Obx(
+                    () => Text(_followController.orderType.value.title),
+                  ),
+                ),
+              ),
             ),
           ),
         ],

lib/pages/main_reply/view.dart

@@ -40,7 +40,7 @@ class MainReplyPage extends StatefulWidget {
 }
 
 class _MainReplyPageState extends State<MainReplyPage>
-    with SingleTickerProviderStateMixin, FabMixin {
+    with SingleTickerProviderStateMixin, BaseFabMixin, FabMixin {
   final _controller = Get.put(
     MainReplyController(),
     tag: Utils.generateRandomString(8),

lib/pages/member_opus/view.dart

@@ -4,6 +4,7 @@ import 'package:PiliPlus/common/widgets/flutter/refresh_indicator.dart';
 import 'package:PiliPlus/common/widgets/loading_widget/http_error.dart';
 import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/models_new/space/space_opus/item.dart';
+import 'package:PiliPlus/pages/common/fab_mixin.dart';
 import 'package:PiliPlus/pages/member_opus/controller.dart';
 import 'package:PiliPlus/pages/member_opus/widgets/space_opus_item.dart';
 import 'package:PiliPlus/utils/grid.dart';
@@ -30,7 +31,11 @@ class MemberOpus extends StatefulWidget {
 }
 
 class _MemberOpusState extends State<MemberOpus>
-    with AutomaticKeepAliveClientMixin {
+    with
+        AutomaticKeepAliveClientMixin,
+        SingleTickerProviderStateMixin,
+        BaseFabMixin,
+        LazyFabMixin {
   late final MemberOpusController _controller;
 
   @override
@@ -50,71 +55,91 @@ class _MemberOpusState extends State<MemberOpus>
     super.build(context);
     final bottom = MediaQuery.viewPaddingOf(context).bottom;
     return Stack(
+      clipBehavior: .none,
       children: [
         refreshIndicator(
           onRefresh: _controller.onRefresh,
-          child: CustomScrollView(
+          child: NotificationListener<UserScrollNotification>(
-            physics: const AlwaysScrollableScrollPhysics(),
+            onNotification: (notification) {
-            slivers: [
+              final direction = notification.direction;
-              SliverPadding(
+              if (direction == .forward) {
-                padding: EdgeInsets.only(
+                showFab();
-                  top: widget.isSingle ? 12 : 0,
+              } else if (direction == .reverse) {
-                  left: Style.safeSpace,
+                hideFab();
-                  right: Style.safeSpace,
+              }
-                  bottom: bottom + 100,
+              return false;
+            },
+            child: CustomScrollView(
+              physics: const AlwaysScrollableScrollPhysics(),
+              slivers: [
+                SliverPadding(
+                  padding: EdgeInsets.only(
+                    top: widget.isSingle ? 12 : 0,
+                    left: Style.safeSpace,
+                    right: Style.safeSpace,
+                    bottom: bottom + 100,
+                  ),
+                  sliver: Obx(() => _buildBody(_controller.loadingState.value)),
                 ),
-                sliver: Obx(() => _buildBody(_controller.loadingState.value)),
+              ],
-              ),
+            ),
-            ],
           ),
         ),
         if (_controller.filter?.isNotEmpty == true)
           Positioned(
             right: kFloatingActionButtonMargin,
-            bottom: bottom + kFloatingActionButtonMargin,
+            bottom: 0,
-            child: FloatingActionButton.extended(
+            child: SlideTransition(
-              onPressed: () => showDialog(
+              position: fabAnimation,
-                context: context,
+              child: Padding(
-                builder: (context) => AlertDialog(
+                padding: .only(
-                  clipBehavior: Clip.hardEdge,
+                  bottom: bottom + kFloatingActionButtonMargin,
-                  contentPadding: const EdgeInsets.symmetric(vertical: 12),
+                ),
-                  content: Column(
+                child: FloatingActionButton.extended(
-                    mainAxisSize: MainAxisSize.min,
+                  onPressed: () => showDialog(
-                    children: _controller.filter!
+                    context: context,
-                        .map(
+                    builder: (context) => AlertDialog(
-                          (e) => ListTile(
+                      clipBehavior: Clip.hardEdge,
-                            onTap: () {
+                      contentPadding: const EdgeInsets.symmetric(vertical: 12),
-                              if (e == _controller.type.value) {
+                      content: Column(
-                                return;
+                        mainAxisSize: MainAxisSize.min,
-                              }
+                        children: _controller.filter!
-                              Get.back();
+                            .map(
-                              _controller
+                              (e) => ListTile(
-                                ..type.value = e
+                                onTap: () {
-                                ..onReload();
+                                  if (e == _controller.type.value) {
-                            },
+                                    return;
-                            tileColor: e == _controller.type.value
+                                  }
-                                ? Theme.of(
+                                  Get.back();
-                                    context,
+                                  _controller
-                                  ).colorScheme.onInverseSurface
+                                    ..type.value = e
-                                : null,
+                                    ..onReload();
-                            dense: true,
+                                },
-                            title: Text(
+                                tileColor: e == _controller.type.value
-                              e.text ?? e.tabName!,
+                                    ? Theme.of(
-                              style: const TextStyle(fontSize: 14),
+                                        context,
-                            ),
+                                      ).colorScheme.onInverseSurface
-                          ),
+                                    : null,
-                        )
+                                dense: true,
-                        .toList(),
+                                title: Text(
+                                  e.text ?? e.tabName!,
+                                  style: const TextStyle(fontSize: 14),
+                                ),
+                              ),
+                            )
+                            .toList(),
+                      ),
+                    ),
+                  ),
+                  icon: const Icon(size: 20, Icons.sort),
+                  label: Obx(
+                    () {
+                      final type = _controller.type.value;
+                      return Text(type.text ?? type.tabName!);
+                    },
                   ),
                 ),
               ),
-              icon: const Icon(size: 20, Icons.sort),
-              label: Obx(
-                () {
-                  final type = _controller.type.value;
-                  return Text(type.text ?? type.tabName!);
-                },
-              ),
             ),
           ),
       ],

lib/pages/member_video/view.dart

@@ -6,6 +6,7 @@ import 'package:PiliPlus/common/widgets/sliver/sliver_floating_header.dart';
 import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/models/common/member/contribute_type.dart';
 import 'package:PiliPlus/models_new/space/space_archive/item.dart';
+import 'package:PiliPlus/pages/common/fab_mixin.dart';
 import 'package:PiliPlus/pages/member/controller.dart';
 import 'package:PiliPlus/pages/member_video/controller.dart';
 import 'package:PiliPlus/pages/member_video/widgets/video_card_h_member_video.dart';
@@ -41,7 +42,12 @@ class MemberVideo extends StatefulWidget {
 }
 
 class _MemberVideoState extends State<MemberVideo>
-    with AutomaticKeepAliveClientMixin, GridMixin {
+    with
+        AutomaticKeepAliveClientMixin,
+        GridMixin,
+        SingleTickerProviderStateMixin,
+        BaseFabMixin,
+        LazyFabMixin {
   @override
   bool get wantKeepAlive => true;
 
@@ -121,32 +127,53 @@ class _MemberVideoState extends State<MemberVideo>
       return Stack(
         clipBehavior: Clip.none,
         children: [
-          child,
+          NotificationListener<UserScrollNotification>(
+            onNotification: (notification) {
+              final direction = notification.direction;
+              if (direction == .forward) {
+                showFab();
+              } else if (direction == .reverse) {
+                hideFab();
+              }
+              return false;
+            },
+            child: child,
+          ),
           Obx(
             () => !_controller.isLocating.value
                 ? Positioned(
                     right: kFloatingActionButtonMargin,
-                    bottom: kFloatingActionButtonMargin + padding.bottom,
+                    bottom: 0,
-                    child: FloatingActionButton.extended(
+                    child: SlideTransition(
-                      onPressed: () {
+                      position: fabAnimation,
-                        final fromViewAid = _controller.fromViewAid;
+                      child: Padding(
-                        _controller.isLocating.value = true;
+                        padding: .only(
-                        final locatedIndex =
+                          bottom: padding.bottom + kFloatingActionButtonMargin,
-                            _controller.loadingState.value.dataOrNull
+                        ),
-                                ?.indexWhere((i) => i.param == fromViewAid) ??
+                        child: FloatingActionButton.extended(
-                            -1;
+                          onPressed: () {
-                        if (locatedIndex == -1) {
+                            final fromViewAid = _controller.fromViewAid;
-                          _controller
+                            _controller.isLocating.value = true;
-                            ..lastAid = fromViewAid
+                            final locatedIndex =
-                            ..reload = true
+                                _controller.loadingState.value.dataOrNull
-                            ..page = 0
+                                    ?.indexWhere(
-                            ..loadingState.value = LoadingState.loading()
+                                      (i) => i.param == fromViewAid,
-                            ..queryData();
+                                    ) ??
-                        } else {
+                                -1;
-                          _jumpToIndex(locatedIndex);
+                            if (locatedIndex == -1) {
-                        }
+                              _controller
-                      },
+                                ..lastAid = fromViewAid
-                      label: const Text('定位至上次观看'),
+                                ..reload = true
+                                ..page = 0
+                                ..loadingState.value = LoadingState.loading()
+                                ..queryData();
+                            } else {
+                              _jumpToIndex(locatedIndex);
+                            }
+                          },
+                          label: const Text('定位至上次观看'),
+                        ),
+                      ),
                     ),
                   )
                 : const SizedBox.shrink(),

lib/pages/member_video_web/base/view.dart

@@ -121,6 +121,7 @@ abstract class BaseVideoWebState<
       child: Padding(
         padding: const .fromLTRB(14, 0, 8, 4),
         child: Stack(
+          clipBehavior: .none,
           alignment: .centerLeft,
           children: [
             ?buildCount(),

lib/pages/video/reply/view.dart

@@ -36,6 +36,7 @@ class _VideoReplyPanelState extends State<VideoReplyPanel>
     with
         AutomaticKeepAliveClientMixin,
         SingleTickerProviderStateMixin,
+        BaseFabMixin,
         FabMixin {
   late VideoReplyController _videoReplyController;