feat(flutter): 增加轮播自动播放与站内通知

2026-10-17 16:50:25 +08:00
1 parent b7b1c50427
commit b870956665
@@ -198,6 +198,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
        .toList();
    if (items.isEmpty) return const SizedBox.shrink();
    return CoverCarousel(
+      active: widget.active,
      items: [
        for (final banner in items)
          CoverItem(
@@ -1,7 +1,12 @@
+import 'dart:async';
 import 'dart:math' as math;

 import 'package:flutter/material.dart';
+import '../../../core/theme/app_colors.dart';
 import '../../../core/widgets/remote_image.dart';
+import '../../../l10n/app_localizations.dart';
+
+const Duration _autoPlayInterval = Duration(milliseconds: 4500);

 class CoverItem {
  const CoverItem({
@@ -19,9 +24,10 @@ class CoverItem {

 /// Full-bleed posters that turn as faces of a cube. Titles sit on the image.
 class CoverCarousel extends StatefulWidget {
-  const CoverCarousel({super.key, required this.items});
+  const CoverCarousel({super.key, required this.items, this.active = true});

  final List<CoverItem> items;
+  final bool active;

  @override
  State<CoverCarousel> createState() => _CoverCarouselState();
@@ -36,6 +42,8 @@ class _CoverCarouselState extends State<CoverCarousel>
  int? _pointer;
  double _drag = 0;
  double _dragPage = 0;
+  Timer? _autoTimer;
+  bool _tickerEnabled = true;

  @override
  void initState() {
@@ -45,34 +53,93 @@ class _CoverCarouselState extends State<CoverCarousel>

  @override
  void dispose() {
+    _autoTimer?.cancel();
    _snap.dispose();
    super.dispose();
  }

+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final enabled = TickerMode.valuesOf(context).enabled;
+    if (enabled != _tickerEnabled) {
+      _tickerEnabled = enabled;
+      _syncAutoTimer();
+    } else if (_autoTimer == null) {
+      _syncAutoTimer();
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant CoverCarousel oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (_page > _last) _page = _last;
+    if (oldWidget.items.length != widget.items.length ||
+        oldWidget.active != widget.active) {
+      _syncAutoTimer();
+    }
+  }
+
  double get _last => math.max(0, widget.items.length - 1).toDouble();

  void _onSnap() {
+    if (!mounted) return;
    final t = Curves.easeOutCubic.transform(_snap.value);
    setState(() => _page = _from + (_to - _from) * t);
  }

  void _turnTo(double target) {
+    if (!mounted || widget.items.isEmpty) return;
    _from = _page;
    _to = target.clamp(0, _last);
    _snap.duration = const Duration(milliseconds: 420);
    _snap.forward(from: 0);
  }

+  void _syncAutoTimer() {
+    _autoTimer?.cancel();
+    _autoTimer = null;
+    if (!mounted ||
+        !widget.active ||
+        !_tickerEnabled ||
+        widget.items.length <= 1) {
+      return;
+    }
+    _autoTimer = Timer.periodic(_autoPlayInterval, (_) {
+      if (!mounted || _pointer != null || !widget.active || !_tickerEnabled) {
+        return;
+      }
+      final current = _page.round().clamp(0, _last.toInt());
+      if (current >= _last.toInt()) {
+        setState(() => _page = 0);
+      } else {
+        _turnTo((current + 1).toDouble());
+      }
+    });
+  }
+
  @override
  Widget build(BuildContext context) {
+    if (widget.items.isEmpty) return const SizedBox.shrink();
+    final current = _page.round().clamp(0, widget.items.length - 1);
+    final l10n = AppLocalizations.of(context)!;
    return LayoutBuilder(
      builder: (context, constraints) {
        final width = constraints.maxWidth;
        final height = math.min(width * 0.52, 210).toDouble();
-        return SizedBox(
-          width: double.infinity,
-          height: height,
-          child: _stage(width),
+        return Semantics(
+          container: true,
+          label: l10n.carouselSemantics(current + 1, widget.items.length),
+          child: SizedBox(
+            width: double.infinity,
+            height: height,
+            child: Stack(
+              children: [
+                Positioned.fill(child: _stage(width)),
+                _indicator(l10n, current),
+              ],
+            ),
+          ),
        );
      },
    );
@@ -82,6 +149,8 @@ class _CoverCarouselState extends State<CoverCarousel>
    return Listener(
      behavior: HitTestBehavior.opaque,
      onPointerDown: (event) {
+        _autoTimer?.cancel();
+        _autoTimer = null;
        _snap.stop();
        _pointer = event.pointer;
        _drag = 0;
@@ -98,11 +167,13 @@ class _CoverCarouselState extends State<CoverCarousel>
        if (event.pointer != _pointer) return;
        _pointer = null;
        _turnTo(_page.roundToDouble());
+        _syncAutoTimer();
      },
      onPointerCancel: (event) {
        if (event.pointer != _pointer) return;
        _pointer = null;
        _turnTo(_page.roundToDouble());
+        _syncAutoTimer();
      },
      child: ClipRect(
        child: Stack(
@@ -113,6 +184,35 @@ class _CoverCarouselState extends State<CoverCarousel>
    );
  }

+  Widget _indicator(AppLocalizations l10n, int current) {
+    return Positioned(
+      left: 0,
+      right: 0,
+      bottom: 8,
+      child: Semantics(
+        label: l10n.carouselSemantics(current + 1, widget.items.length),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            for (var index = 0; index < widget.items.length; index++)
+              Container(
+                key: Key('carousel-dot-$index'),
+                width: 6,
+                height: 6,
+                margin: const EdgeInsets.symmetric(horizontal: 3),
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: index == current
+                      ? AppColors.onPrimary
+                      : AppColors.muted.withValues(alpha: 0.4),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
  List<int> get _visible {
    final first = _page.floor();
    final indexes = <int>[first, first + 1];
@@ -154,7 +254,11 @@ class _CoverCarouselState extends State<CoverCarousel>
    return Stack(
      fit: StackFit.expand,
      children: [
-        RemoteImage(item.image),
+        RemoteImage(
+          item.image,
+          showFallbackIcon: true,
+          fallbackIconKey: const Key('carousel-image-fallback'),
+        ),
        const DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
@@ -168,7 +272,7 @@ class _CoverCarouselState extends State<CoverCarousel>
        Positioned(
          left: 20,
          right: 20,
-          bottom: 22,
+          bottom: 30,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
@@ -20,6 +20,7 @@ import 'mine_binding.dart';
 import 'mine_logic.dart';
 import '../watch_records/watch_records_page.dart';
 import '../favorites/favorites_page.dart';
+import '../notices/notices_page.dart';
 import '../downloads/downloads_page.dart';

 class MyPage extends StatefulWidget {
@@ -413,6 +414,19 @@ class _MyPageState extends State<MyPage> {
            onTap: () => _mockSnack(l10n),
          ),
          const Divider(height: 1, color: Color(0xFF2A2C33)),
+          ListTile(
+            key: const Key('mine-notices'),
+            leading: const Icon(
+              Icons.notifications_none_rounded,
+              color: AppColors.blueSoft,
+            ),
+            title: Text(l10n.notices),
+            trailing: const Icon(Icons.chevron_right_rounded),
+            onTap: () => Navigator.of(context).push<void>(
+              MaterialPageRoute(builder: (_) => const NoticesPage()),
+            ),
+          ),
+          const Divider(height: 1, color: Color(0xFF2A2C33)),
          ListTile(
            leading: const Icon(
              Icons.history_rounded,
@@ -0,0 +1,308 @@
+// Author: fruit.com.cn
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../core/data/models/notice.dart';
+import '../../core/data/repositories/notice_repository.dart';
+import '../../core/data/services/notices_controller.dart';
+import '../../core/formatting/error_text.dart';
+import '../../core/formatting/localized_date_time.dart';
+import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_theme.dart';
+import '../../l10n/app_localizations.dart';
+
+/// Anonymous system notice list with pagination and detail dialog.
+class NoticesPage extends StatefulWidget {
+  const NoticesPage({super.key});
+
+  @override
+  State<NoticesPage> createState() => _NoticesPageState();
+}
+
+class _NoticesPageState extends State<NoticesPage> {
+  late final NoticesController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = NoticesController(context.read<NoticeRepository>());
+    unawaited(_controller.load());
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    return Theme(
+      data: AppTheme.dark(),
+      child: Scaffold(
+        key: const Key('notices-page'),
+        backgroundColor: AppColors.ink,
+        appBar: AppBar(
+          backgroundColor: AppColors.ink,
+          foregroundColor: AppColors.onPrimary,
+          title: Text(l10n.notices),
+        ),
+        body: ListenableBuilder(
+          listenable: _controller,
+          builder: (context, _) => _body(l10n),
+        ),
+      ),
+    );
+  }
+
+  Widget _body(AppLocalizations l10n) {
+    if (_controller.loading && _controller.notices.isEmpty) {
+      return const Center(
+        child: CircularProgressIndicator(key: Key('notices-loading')),
+      );
+    }
+    if (_controller.error != null && _controller.notices.isEmpty) {
+      return RefreshIndicator(
+        onRefresh: _controller.refresh,
+        child: ListView(
+          physics: const AlwaysScrollableScrollPhysics(),
+          children: [
+            SizedBox(
+              height: MediaQuery.sizeOf(context).height * 0.7,
+              child: Center(
+                key: const Key('notices-error'),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      errorText(
+                        l10n,
+                        _controller.error,
+                        l10n.noticesLoadFailed,
+                      ),
+                      textAlign: TextAlign.center,
+                      style: const TextStyle(color: AppColors.muted),
+                    ),
+                    const SizedBox(height: 12),
+                    FilledButton(
+                      key: const Key('notices-retry'),
+                      onPressed: _controller.load,
+                      child: Text(l10n.retry),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+    if (_controller.notices.isEmpty) {
+      return RefreshIndicator(
+        onRefresh: _controller.refresh,
+        child: ListView(
+          physics: const AlwaysScrollableScrollPhysics(),
+          children: [
+            SizedBox(
+              height: MediaQuery.sizeOf(context).height * 0.7,
+              child: Center(
+                key: const Key('notices-empty'),
+                child: Text(
+                  l10n.noNotices,
+                  style: const TextStyle(color: AppColors.muted),
+                ),
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+    return RefreshIndicator(
+      onRefresh: _controller.refresh,
+      child: ListView.separated(
+        key: const Key('notices-list'),
+        physics: const AlwaysScrollableScrollPhysics(),
+        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),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _footer(AppLocalizations l10n) {
+    if (_controller.loadingMore) {
+      return const Padding(
+        padding: EdgeInsets.symmetric(vertical: 12),
+        child: Center(child: CircularProgressIndicator()),
+      );
+    }
+    if (_controller.loadMoreError != null) {
+      return TextButton.icon(
+        onPressed: _controller.loadMore,
+        icon: const Icon(Icons.refresh_rounded),
+        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);
+  }
+
+  Future<void> _showDetails(AppNotice notice, AppLocalizations l10n) {
+    final publishAt = notice.publishAt == null
+        ? ''
+        : formatLocalizedDateTime(context, notice.publishAt!);
+    return showDialog<void>(
+      context: context,
+      builder: (dialogContext) => AlertDialog(
+        title: Text(notice.title),
+        content: SizedBox(
+          width: double.maxFinite,
+          child: SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                if (publishAt.isNotEmpty) ...[
+                  Text(
+                    publishAt,
+                    style: const TextStyle(
+                      color: AppColors.muted,
+                      fontSize: 12,
+                    ),
+                  ),
+                  const SizedBox(height: 10),
+                ],
+                SelectableText(
+                  notice.content,
+                  key: const Key('notice-detail-content'),
+                ),
+              ],
+            ),
+          ),
+        ),
+        actions: [
+          TextButton(
+            key: const Key('notice-detail-close'),
+            onPressed: () => Navigator.of(dialogContext).pop(),
+            child: Text(l10n.close),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _NoticeTile extends StatelessWidget {
+  const _NoticeTile({required this.notice, required this.onTap});
+
+  final AppNotice notice;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+    final publishAt = notice.publishAt == null
+        ? ''
+        : formatLocalizedDateTime(context, notice.publishAt!);
+    final type = notice.type.isEmpty ? l10n.noticeAnnouncement : notice.type;
+    return Material(
+      key: ValueKey('notice-item-${notice.id}'),
+      color: AppColors.card,
+      borderRadius: BorderRadius.circular(12),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.all(14),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  Flexible(
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 3,
+                      ),
+                      decoration: BoxDecoration(
+                        color: AppColors.bluePressed,
+                        borderRadius: BorderRadius.circular(10),
+                      ),
+                      child: Text(
+                        type,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          color: AppColors.onPrimary,
+                          fontSize: 11,
+                        ),
+                      ),
+                    ),
+                  ),
+                  if (publishAt.isNotEmpty)
+                    Flexible(
+                      child: Padding(
+                        padding: const EdgeInsets.only(left: 8),
+                        child: Text(
+                          publishAt,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          textAlign: TextAlign.right,
+                          style: const TextStyle(
+                            color: AppColors.muted,
+                            fontSize: 11,
+                          ),
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+              const SizedBox(height: 9),
+              Text(
+                notice.title,
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+                style: const TextStyle(
+                  color: AppColors.onPrimary,
+                  fontSize: 16,
+                  fontWeight: FontWeight.w700,
+                ),
+              ),
+              if (notice.content.isNotEmpty) ...[
+                const SizedBox(height: 6),
+                Text(
+                  notice.content,
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    color: AppColors.muted,
+                    fontSize: 13,
+                    height: 1.35,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}