merge: 统一下拉与加载指示器

This commit is contained in:
Zhou Weidong committed 2026-10-22 22:07:21 +08:00
commit db8433ace3
26 files changed
+127 -241

No files matched your search

+6
View File
@@ -1282,3 +1282,9 @@ $ flutter test
- 普通二级页标题栏改为透明、白色标题与返回图标;统一卡片 12 圆角、1px 描边和无阴影策略。
- 覆盖新剧、筛选、榜单、预约、收藏、观看历史、下载、设置、钱包、VIP、通知、详情、登录、关于;播放器沉浸区保持纯黑。
- `flutter analyze`:No issues found。
## 2026-10-22 统一下拉与加载指示器
- 下拉刷新统一为 40×40、60% 黑底圆角指示器内嵌 20 白色加载圈,不再显示任何状态文字。
- 网络分页与本地分页 footer 统一仅显示白色加载圈,无更多状态完全隐藏;通知页补触底自动加载。
- 移除不再使用的刷新提示与无更多文案;`flutter analyze`:No issues found。
+1
View File
@@ -187,6 +187,7 @@ abstract final class AppColors {
/// 播放器控件胶囊与圆形底色。
static const playerOverlayPill = Color(0xB3000000);
static const refreshIndicatorSurface = Color(0x99000000);
static const cardBottomScrimStart = Color(0x00000000);
static const cardBottomScrimEnd = Color(0x40000000);
+5
View File
@@ -53,6 +53,11 @@ abstract final class AppDimens {
static const double progressHeight = 3;
static const double progressRadius = 2;
static const double progressLineHeight = 3;
static const double refreshIndicatorSize = 40;
static const double refreshIndicatorRadius = 20;
static const double refreshSpinnerSize = 20;
static const double refreshSpinnerStroke = 2;
static const double loadMoreIndicatorHeight = 40;
static const double searchHeight = 40;
static const double searchRadius = 8;
+22 -48
View File
@@ -4,19 +4,18 @@ import 'dart:async';
import 'package:flutter/material.dart';
import '../../l10n/app_localizations.dart';
import '../theme/app_colors.dart';
import '../theme/app_dimens.dart';
const double _maxPullDistance = 96;
const double _refreshThreshold = 56;
const double _indicatorHeight = 56;
const double _indicatorDisplacement = 40;
const Duration _arrowTurnDuration = Duration(milliseconds: 160);
const Duration _settleDuration = Duration(milliseconds: 200);
enum _PullState { idle, pull, armed, refreshing }
/// 带文字状态提示的下拉刷新容器,指示区悬浮在内容上方。
/// 下拉刷新容器,指示区只显示统一的白色加载圈。
class AppPullToRefresh extends StatefulWidget {
const AppPullToRefresh({
super.key,
@@ -172,7 +171,7 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
top: widget.edgeOffset,
left: 0,
right: 0,
child: IgnorePointer(child: _indicatorLayer(context, offset)),
child: IgnorePointer(child: _indicatorLayer(offset)),
),
],
);
@@ -181,7 +180,7 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
);
}
Widget _indicatorLayer(BuildContext context, double offset) {
Widget _indicatorLayer(double offset) {
final progress = (offset / _refreshThreshold).clamp(0.0, 1.0);
return SizedBox(
height: _indicatorHeight,
@@ -193,7 +192,7 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.only(top: 8),
child: _indicator(context),
child: _indicator(),
),
),
),
@@ -201,50 +200,25 @@ class _AppPullToRefreshState extends State<AppPullToRefresh>
);
}
Widget _indicator(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
if (_state == _PullState.refreshing) {
return _label(
const SizedBox.square(
dimension: 18,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColors.navSelected,
),
),
l10n.refreshingLabel,
);
}
final armed = _state == _PullState.armed;
return _label(
AnimatedRotation(
turns: armed ? 0.5 : 0,
duration: _arrowTurnDuration,
child: Icon(
Icons.arrow_downward_rounded,
size: 18,
color: AppColors.navSelected,
Widget _indicator() {
return Container(
key: const Key('pull-refresh-indicator'),
width: AppDimens.refreshIndicatorSize,
height: AppDimens.refreshIndicatorSize,
padding: const EdgeInsets.all(
(AppDimens.refreshIndicatorSize - AppDimens.refreshSpinnerSize) / 2,
),
decoration: BoxDecoration(
color: AppColors.refreshIndicatorSurface,
borderRadius: BorderRadius.circular(AppDimens.refreshIndicatorRadius),
),
child: const SizedBox.square(
dimension: AppDimens.refreshSpinnerSize,
child: CircularProgressIndicator(
strokeWidth: AppDimens.refreshSpinnerStroke,
color: AppColors.textPrimary,
),
),
armed ? l10n.releaseToRefresh : l10n.pullToRefresh,
);
}
Widget _label(Widget icon, String text) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
icon,
const SizedBox(width: 6),
Text(
text,
style: const TextStyle(
color: AppColors.navSelected,
fontSize: 13,
fontWeight: FontWeight.w600,
),
),
],
);
}
}
+7 -30
View File
@@ -5,22 +5,19 @@ import 'dart:async';
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import '../theme/app_dimens.dart';
import '../../l10n/app_localizations.dart';
/// 网络分页列表底部状态:加载、重试、手动加载与无更多。
/// 网络分页列表底部状态:仅保留加载圈与错误重试。
class PagedListFooter extends StatelessWidget {
const PagedListFooter({
super.key,
required this.loading,
required this.hasMore,
required this.hasItems,
required this.onRetry,
this.errorMessage,
});
final bool loading;
final bool hasMore;
final bool hasItems;
final String? errorMessage;
final Future<void> Function() onRetry;
@@ -49,38 +46,18 @@ class PagedListFooter extends StatelessWidget {
if (loading) {
return const SizedBox(
key: Key('paged-list-loading'),
height: 56,
height: AppDimens.loadMoreIndicatorHeight,
child: Center(
child: SizedBox.square(
dimension: 20,
dimension: AppDimens.refreshSpinnerSize,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColors.blue,
strokeWidth: AppDimens.refreshSpinnerStroke,
color: AppColors.textPrimary,
),
),
),
);
}
if (hasMore) {
return Center(
child: TextButton(
key: const Key('paged-list-load-more'),
onPressed: () => unawaited(onRetry()),
child: Text(l10n.loadMore),
),
);
}
if (hasItems) {
return Padding(
key: const Key('paged-list-no-more'),
padding: const EdgeInsets.symmetric(vertical: 14),
child: Text(
l10n.noMore,
textAlign: TextAlign.center,
style: const TextStyle(color: AppColors.muted, fontSize: 12),
),
);
}
return const SizedBox(height: 16);
return const SizedBox.shrink();
}
}
+7 -25
View File
@@ -3,6 +3,7 @@
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import '../theme/app_dimens.dart';
const int _defaultPageSize = 20;
const Duration _defaultLoadDelay = Duration(milliseconds: 300);
@@ -64,53 +65,34 @@ class PagedLocalListController<T> extends ChangeNotifier {
}
}
/// 分页列表底部加载态与到底提示。
/// 分页列表底部加载态。
class PagedLoadFooter extends StatelessWidget {
const PagedLoadFooter({
super.key,
required this.loading,
required this.hasMore,
required this.hasItems,
required this.loadMoreKey,
required this.noMoreKey,
required this.noMoreLabel,
});
final bool loading;
final bool hasMore;
final bool hasItems;
final Key loadMoreKey;
final Key noMoreKey;
final String noMoreLabel;
@override
Widget build(BuildContext context) {
if (loading) {
return SizedBox(
key: loadMoreKey,
height: 56,
height: AppDimens.loadMoreIndicatorHeight,
child: const Center(
child: SizedBox.square(
dimension: 20,
dimension: AppDimens.refreshSpinnerSize,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColors.blue,
strokeWidth: AppDimens.refreshSpinnerStroke,
color: AppColors.textPrimary,
),
),
),
);
}
if (hasItems && !hasMore) {
return Padding(
key: noMoreKey,
padding: const EdgeInsets.symmetric(vertical: 14),
child: Text(
noMoreLabel,
textAlign: TextAlign.center,
style: const TextStyle(color: AppColors.muted, fontSize: 12),
),
);
}
return const SizedBox(height: 16);
return const SizedBox.shrink();
}
}
-4
View File
@@ -344,10 +344,6 @@
}
},
"retry": "Retry",
"pullToRefresh": "Pull to refresh",
"releaseToRefresh": "Release to refresh",
"refreshingLabel": "Refreshing…",
"noMore": "No more",
"backToSeries": "Back to series",
"nextEpisode": "Next episode",
"pause": "Pause",
-4
View File
@@ -318,10 +318,6 @@
}
},
"retry": "Coba lagi",
"pullToRefresh": "Tarik untuk menyegarkan",
"releaseToRefresh": "Lepaskan untuk menyegarkan",
"refreshingLabel": "Menyegarkan…",
"noMore": "Tidak ada lagi",
"backToSeries": "Kembali ke serial",
"nextEpisode": "Episode berikutnya",
"pause": "Jeda",
-24
View File
@@ -1342,30 +1342,6 @@ abstract class AppLocalizations {
/// **'Retry'**
String get retry;
/// No description provided for @pullToRefresh.
///
/// In en, this message translates to:
/// **'Pull to refresh'**
String get pullToRefresh;
/// No description provided for @releaseToRefresh.
///
/// In en, this message translates to:
/// **'Release to refresh'**
String get releaseToRefresh;
/// No description provided for @refreshingLabel.
///
/// In en, this message translates to:
/// **'Refreshing…'**
String get refreshingLabel;
/// No description provided for @noMore.
///
/// In en, this message translates to:
/// **'No more'**
String get noMore;
/// No description provided for @backToSeries.
///
/// In en, this message translates to:
-12
View File
@@ -681,18 +681,6 @@ class AppLocalizationsEn extends AppLocalizations {
@override
String get retry => 'Retry';
@override
String get pullToRefresh => 'Pull to refresh';
@override
String get releaseToRefresh => 'Release to refresh';
@override
String get refreshingLabel => 'Refreshing…';
@override
String get noMore => 'No more';
@override
String get backToSeries => 'Back to series';
-12
View File
@@ -684,18 +684,6 @@ class AppLocalizationsId extends AppLocalizations {
@override
String get retry => 'Coba lagi';
@override
String get pullToRefresh => 'Tarik untuk menyegarkan';
@override
String get releaseToRefresh => 'Lepaskan untuk menyegarkan';
@override
String get refreshingLabel => 'Menyegarkan…';
@override
String get noMore => 'Tidak ada lagi';
@override
String get backToSeries => 'Kembali ke serial';
-12
View File
@@ -673,18 +673,6 @@ class AppLocalizationsZh extends AppLocalizations {
@override
String get retry => '重试';
@override
String get pullToRefresh => '下拉刷新';
@override
String get releaseToRefresh => '松手刷新';
@override
String get refreshingLabel => '正在刷新…';
@override
String get noMore => '没有更多了';
@override
String get backToSeries => '返回剧集详情';
-4
View File
@@ -280,10 +280,6 @@
}
},
"retry": "重试",
"pullToRefresh": "下拉刷新",
"releaseToRefresh": "松手刷新",
"refreshingLabel": "正在刷新…",
"noMore": "没有更多了",
"backToSeries": "返回剧集详情",
"nextEpisode": "下一集",
"pause": "暂停",
-2
View File
@@ -176,8 +176,6 @@ class _FavoritesBody extends StatelessWidget {
],
PagedListFooter(
loading: favorites.loadingMore,
hasMore: favorites.hasMore,
hasItems: favorites.cards.isNotEmpty,
errorMessage: favorites.loadMoreError == null
? null
: errorText(l10n, favorites.loadMoreError, l10n.favoritesError),
@@ -130,8 +130,6 @@ class FollowingPagedGrid extends StatelessWidget {
SliverToBoxAdapter(
child: PagedListFooter(
loading: loadingMore,
hasMore: hasMore,
hasItems: hasItems,
errorMessage: loadMoreError,
onRetry: onLoadMore,
),
@@ -218,8 +218,6 @@ class _HomeFeedGridState extends State<HomeFeedGrid> {
padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
child: PagedListFooter(
loading: widget.feedController.loadingMore,
hasMore: widget.feedController.hasMore,
hasItems: dramas.isNotEmpty,
errorMessage: widget.feedController.lastError == null
? null
: l10n.catalogError,
@@ -192,13 +192,9 @@ class _NewReleasesPageState extends State<NewReleasesPage> {
),
PagedLoadFooter(
loading: pager.loading,
hasMore: pager.hasMore,
hasItems: pager.items.isNotEmpty,
loadMoreKey: const Key(
'new-releases-load-more',
),
noMoreKey: const Key('new-releases-no-more'),
noMoreLabel: l10n.noMore,
),
],
),
+46 -25
View File
@@ -18,6 +18,8 @@ import '../../core/widgets/empty_state.dart';
import '../../core/widgets/plain_page_scaffold.dart';
import '../../l10n/app_localizations.dart';
const double _loadMoreThreshold = 240;
/// Anonymous system notice list with pagination and detail dialog.
class NoticesPage extends StatefulWidget {
const NoticesPage({super.key});
@@ -111,29 +113,55 @@ class _NoticesPageState extends State<NoticesPage> {
}
return AppPullToRefresh(
onRefresh: _controller.refresh,
child: ListView.separated(
key: const Key('notices-list'),
physics: AppPullToRefresh.physics,
padding: const EdgeInsets.fromLTRB(16, 12, 16, 28),
itemCount: _controller.notices.length + 1,
separatorBuilder: (_, _) => const SizedBox(height: 10),
itemBuilder: (context, index) {
if (index == _controller.notices.length) return _footer(l10n);
final notice = _controller.notices[index];
return _NoticeTile(
notice: notice,
onTap: () => _showDetails(notice, l10n),
);
},
child: NotificationListener<ScrollNotification>(
onNotification: _onScroll,
child: ListView.separated(
key: const Key('notices-list'),
physics: AppPullToRefresh.physics,
padding: const EdgeInsets.fromLTRB(16, 12, 16, 28),
itemCount: _controller.notices.length + 1,
separatorBuilder: (_, _) => const SizedBox(height: 10),
itemBuilder: (context, index) {
if (index == _controller.notices.length) return _footer(l10n);
final notice = _controller.notices[index];
return _NoticeTile(
notice: notice,
onTap: () => _showDetails(notice, l10n),
);
},
),
),
);
}
bool _onScroll(ScrollNotification notification) {
if (notification.depth != 0 ||
!_controller.hasMore ||
_controller.loadingMore) {
return false;
}
if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
if (notification is ScrollUpdateNotification ||
notification is ScrollEndNotification ||
notification is OverscrollNotification) {
unawaited(_controller.loadMore());
}
return false;
}
Widget _footer(AppLocalizations l10n) {
if (_controller.loadingMore) {
return const Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: Center(child: CircularProgressIndicator()),
return const SizedBox(
height: AppDimens.loadMoreIndicatorHeight,
child: Center(
child: SizedBox.square(
dimension: AppDimens.refreshSpinnerSize,
child: CircularProgressIndicator(
strokeWidth: AppDimens.refreshSpinnerStroke,
color: AppColors.textPrimary,
),
),
),
);
}
if (_controller.loadMoreError != null) {
@@ -143,14 +171,7 @@ class _NoticesPageState extends State<NoticesPage> {
label: Text(l10n.retry),
);
}
if (_controller.hasMore) {
return TextButton(
key: const Key('notices-load-more'),
onPressed: _controller.loadMore,
child: Text(l10n.loadMore),
);
}
return const SizedBox(height: 8);
return const SizedBox.shrink();
}
Future<void> _showDetails(AppNotice notice, AppLocalizations l10n) {
-4
View File
@@ -153,11 +153,7 @@ class _RankingPageState extends State<RankingPage> {
],
PagedLoadFooter(
loading: pager.loading,
hasMore: pager.hasMore,
hasItems: pager.items.isNotEmpty,
loadMoreKey: const Key('ranking-load-more'),
noMoreKey: const Key('ranking-no-more'),
noMoreLabel: l10n.noMore,
),
],
),
@@ -115,8 +115,6 @@ class _AllDramasFilterGridState extends State<AllDramasFilterGrid> {
),
child: PagedListFooter(
loading: widget.feedController.loadingMore,
hasMore: widget.feedController.hasMore,
hasItems: dramas.isNotEmpty,
errorMessage:
widget.feedController.lastError == null
? null
@@ -145,8 +145,6 @@ class _WatchRecordsBodyState extends State<_WatchRecordsBody> {
],
PagedListFooter(
loading: controller.loadingMore,
hasMore: controller.hasMore,
hasItems: controller.records.isNotEmpty,
errorMessage: controller.loadMoreError == null
? null
: errorText(l10n, controller.loadMoreError, l10n.progressError),
+22 -15
View File
@@ -44,28 +44,32 @@ void main() {
find.descendant(of: list, matching: find.byType(Scrollable)).first,
);
expect(scrollable.position.pixels, 0);
expect(find.text('Pull to refresh'), findsOneWidget);
expect(_contentOffset(tester), greaterThan(0));
final indicator = find.byKey(const Key('pull-refresh-indicator'));
expect(indicator, findsOneWidget);
expect(
tester.widget<Text>(find.text('Pull to refresh')).style?.color,
AppColors.navSelected,
find.descendant(
of: indicator,
matching: find.byType(CircularProgressIndicator),
),
findsOneWidget,
);
expect(tester.getSize(indicator), const Size(40, 40));
final background = tester.widget<Container>(indicator).decoration;
final backgroundDecoration = background! as BoxDecoration;
expect(backgroundDecoration.color, AppColors.refreshIndicatorSurface);
expect(backgroundDecoration.borderRadius, BorderRadius.circular(20));
expect(find.text('Pull to refresh'), findsNothing);
expect(_contentOffset(tester), greaterThan(0));
await gesture.moveBy(const Offset(0, 120));
await tester.pump();
expect(find.text('Release to refresh'), findsOneWidget);
expect(
tester.widget<Text>(find.text('Release to refresh')).style?.color,
AppColors.navSelected,
);
expect(indicator, findsOneWidget);
expect(find.text('Release to refresh'), findsNothing);
await gesture.up();
await tester.pump();
expect(find.text('Refreshing…'), findsOneWidget);
expect(
tester.widget<Text>(find.text('Refreshing…')).style?.color,
AppColors.navSelected,
);
expect(indicator, findsOneWidget);
expect(find.text('Refreshing…'), findsNothing);
expect(calls, 1);
final releaseOffset = _contentOffset(tester);
expect(releaseOffset, greaterThan(56));
@@ -87,6 +91,7 @@ void main() {
await tester.pump();
await tester.pumpAndSettle();
expect(_contentOffset(tester), closeTo(0, 0.1));
expect(indicator, findsNothing);
expect(find.text('Refreshing…'), findsNothing);
expect(find.text('Pull to refresh'), findsNothing);
});
@@ -122,7 +127,8 @@ void main() {
final releaseOffset = _contentOffset(tester);
expect(releaseOffset, greaterThan(0));
expect(releaseOffset, lessThan(56));
expect(find.text('Pull to refresh'), findsOneWidget);
expect(find.byKey(const Key('pull-refresh-indicator')), findsOneWidget);
expect(find.text('Pull to refresh'), findsNothing);
await gesture.up();
await tester.pump();
@@ -136,6 +142,7 @@ void main() {
await tester.pumpAndSettle();
expect(_contentOffset(tester), closeTo(0, 0.1));
expect(find.byKey(const Key('pull-refresh-indicator')), findsNothing);
expect(find.text('Pull to refresh'), findsNothing);
});
}
+2 -1
View File
@@ -388,7 +388,8 @@ void main() {
);
await tester.drag(_verticalFeed, const Offset(0, 240));
await tester.pump();
expect(find.text('Refreshing…'), findsOneWidget);
expect(find.byKey(const Key('pull-refresh-indicator')), findsOneWidget);
expect(find.text('Refreshing…'), findsNothing);
await tester.pumpAndSettle();
});
}
+3 -3
View File
@@ -198,7 +198,7 @@ void main() {
await tester.pump();
expect(find.byKey(const Key('ranking-row-39')), findsOneWidget);
expect(find.byKey(const Key('ranking-row-40')), findsNothing);
expect(find.byKey(const Key('ranking-no-more')), findsOneWidget);
expect(find.byKey(const Key('ranking-no-more')), findsNothing);
position.jumpTo(0);
await tester.pump();
@@ -211,7 +211,7 @@ void main() {
expect(position.pixels, 0);
position.jumpTo(position.maxScrollExtent);
await tester.pump();
expect(find.byKey(const Key('ranking-load-more')), findsOneWidget);
expect(find.byKey(const Key('ranking-load-more')), findsNothing);
expect(find.byKey(const Key('ranking-no-more')), findsNothing);
await tester.pumpAndSettle();
});
@@ -243,7 +243,7 @@ void main() {
await tester.pumpAndSettle();
position.jumpTo(position.maxScrollExtent);
await tester.pumpAndSettle();
expect(find.byKey(const Key('new-releases-no-more')), findsOneWidget);
expect(find.byKey(const Key('new-releases-no-more')), findsNothing);
position.jumpTo(0);
await tester.pump();
+2 -1
View File
@@ -99,7 +99,8 @@ void main() {
);
await tester.drag(find.byType(ListView), const Offset(0, 240));
await tester.pump();
expect(find.text('Refreshing…'), findsOneWidget);
expect(find.byKey(const Key('pull-refresh-indicator')), findsOneWidget);
expect(find.text('Refreshing…'), findsNothing);
await tester.pumpAndSettle();
await tester.tap(find.byKey(const Key('favorite-remove-signal')));
+4 -3
View File
@@ -24,9 +24,10 @@ void main() {
await _pump(tester, repository);
expect(find.text('Notice 1'), findsOneWidget);
expect(find.byKey(const Key('notices-load-more')), findsOneWidget);
await tester.tap(find.byKey(const Key('notices-load-more')));
await tester.drag(
find.byKey(const Key('notices-list')),
const Offset(0, -300),
);
await tester.pumpAndSettle();
expect(find.text('Notice 3'), findsOneWidget);