jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-22 22:07:13 +08:00
1 parent 397483d339
commit 6f1da5aa39
26 files changed
+127 -241
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/theme/app_colors.dart
+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);
lib/core/theme/app_dimens.dart
+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;
lib/core/widgets/app_pull_to_refresh.dart
+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,
),
),
],
);
}
}
lib/core/widgets/paged_list_footer.dart
+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();
}
}
lib/core/widgets/paged_local_list.dart
+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();
}
}
lib/l10n/app_en.arb
-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",
lib/l10n/app_id.arb
-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",
lib/l10n/app_localizations.dart
-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:
lib/l10n/app_localizations_en.dart
-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';
lib/l10n/app_localizations_id.dart
-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';
lib/l10n/app_localizations_zh.dart
-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 => '返回剧集详情';
lib/l10n/app_zh.arb
-4
View File
@@ -280,10 +280,6 @@
}
},
"retry": "重试",
"pullToRefresh": "下拉刷新",
"releaseToRefresh": "松手刷新",
"refreshingLabel": "正在刷新…",
"noMore": "没有更多了",
"backToSeries": "返回剧集详情",
"nextEpisode": "下一集",
"pause": "暂停",
lib/pages/favorites/favorites_page.dart
-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),
lib/pages/following/following_paged_grid.dart
-2
View File
@@ -130,8 +130,6 @@ class FollowingPagedGrid extends StatelessWidget {
SliverToBoxAdapter(
child: PagedListFooter(
loading: loadingMore,
hasMore: hasMore,
hasItems: hasItems,
errorMessage: loadMoreError,
onRetry: onLoadMore,
),
lib/pages/home/widgets/home_feed_grid.dart
-2
View File
@@ -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,
lib/pages/new_releases/new_releases_page.dart
-4
View File
@@ -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,
),
],
),
lib/pages/notices/notices_page.dart
+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) {
lib/pages/ranking/ranking_page.dart
-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,
),
],
),
lib/pages/recommend/widgets/all_dramas_filter_grid.dart
-2
View File
@@ -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
lib/pages/watch_records/watch_records_page.dart
-2
View File
@@ -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),