mod: 布局

2024-09-27 00:21:07 +08:00
parent 982a52372f
commit 620b32aa71
3 changed files with 311 additions and 199 deletions
--- a/lib/models/read/opus.dart
+++ b/lib/models/read/opus.dart
@ -149,16 +149,19 @@ class ModuleAuthor {
    this.face,
    this.mid,
    this.name,
+    this.pubTime,
  });

  String? face;
  int? mid;
  String? name;
+  String? pubTime;

  ModuleAuthor.fromJson(Map<String, dynamic> json) {
    face = json['face'];
    mid = json['mid'];
    name = json['name'];
+    pubTime = json['pub_time'];
  }
 }

--- a/lib/pages/opus/controller.dart
+++ b/lib/pages/opus/controller.dart
@ -1,23 +1,31 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:pilipala/http/read.dart';
 import 'package:pilipala/models/read/opus.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:pilipala/plugin/pl_gallery/hero_dialog_route.dart';
+import 'package:pilipala/plugin/pl_gallery/interactiveviewer_gallery.dart';

 class OpusController extends GetxController {
  late String url;
-  late String title;
+  RxString title = ''.obs;
  late String id;
  late String articleType;
  Rx<OpusDataModel> opusData = OpusDataModel().obs;
+  final ScrollController scrollController = ScrollController();
+  final StreamController<bool> appbarStream = StreamController<bool>();

  @override
  void onInit() {
    super.onInit();
-    title = Get.parameters['title']!;
+    title.value = Get.parameters['title'] ?? '';
    id = Get.parameters['id']!;
    articleType = Get.parameters['articleType']!;
    if (articleType == 'opus') {
      url = 'https://www.bilibili.com/opus/$id';
    }
+    scrollController.addListener(_scrollListener);
  }

  Future fetchOpusData() async {
@ -27,4 +35,57 @@ class OpusController extends GetxController {
    }
    return res;
  }
+
+  void _scrollListener() {
+    final double offset = scrollController.position.pixels;
+    if (offset > 100) {
+      appbarStream.add(true);
+    } else {
+      appbarStream.add(false);
+    }
+  }
+
+  void onPreviewImg(picList, initIndex, context) {
+    Navigator.of(context).push(
+      HeroDialogRoute<void>(
+        builder: (BuildContext context) => InteractiveviewerGallery(
+          sources: picList,
+          initIndex: initIndex,
+          itemBuilder: (
+            BuildContext context,
+            int index,
+            bool isFocus,
+            bool enablePageView,
+          ) {
+            return GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () {
+                if (enablePageView) {
+                  Navigator.of(context).pop();
+                }
+              },
+              child: Center(
+                child: Hero(
+                  tag: picList[index],
+                  child: CachedNetworkImage(
+                    fadeInDuration: const Duration(milliseconds: 0),
+                    imageUrl: picList[index],
+                    fit: BoxFit.contain,
+                  ),
+                ),
+              ),
+            );
+          },
+          onPageChanged: (int pageIndex) {},
+        ),
+      ),
+    );
+  }
+
+  @override
+  void onClose() {
+    scrollController.removeListener(_scrollListener);
+    appbarStream.close();
+    super.onClose();
+  }
 }
--- a/lib/pages/opus/view.dart
+++ b/lib/pages/opus/view.dart
@ -1,10 +1,7 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:pilipala/common/widgets/network_img_layer.dart';
 import 'package:pilipala/models/read/opus.dart';
-import 'package:pilipala/plugin/pl_gallery/hero_dialog_route.dart';
-import 'package:pilipala/plugin/pl_gallery/interactiveviewer_gallery.dart';
 import 'controller.dart';
 import 'text_helper.dart';

@ -25,47 +22,43 @@ class _OpusPageState extends State<OpusPage> {
    _futureBuilderFuture = controller.fetchOpusData();
  }

-  void onPreviewImg(picList, initIndex, context) {
-    Navigator.of(context).push(
-      HeroDialogRoute<void>(
-        builder: (BuildContext context) => InteractiveviewerGallery(
-          sources: picList,
-          initIndex: initIndex,
-          itemBuilder: (
-            BuildContext context,
-            int index,
-            bool isFocus,
-            bool enablePageView,
-          ) {
-            return GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onTap: () {
-                if (enablePageView) {
-                  Navigator.of(context).pop();
-                }
-              },
-              child: Center(
-                child: Hero(
-                  tag: picList[index],
-                  child: CachedNetworkImage(
-                    fadeInDuration: const Duration(milliseconds: 0),
-                    imageUrl: picList[index],
-                    fit: BoxFit.contain,
-                  ),
-                ),
-              ),
-            );
-          },
-          onPageChanged: (int pageIndex) {},
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: _buildAppBar(),
+      body: SingleChildScrollView(
+        controller: controller.scrollController,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildTitle(),
+            _buildFutureContent(),
+          ],
        ),
      ),
    );
  }

-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
+  AppBar _buildAppBar() {
+    return AppBar(
+      title: StreamBuilder(
+        stream: controller.appbarStream.stream.distinct(),
+        initialData: false,
+        builder: (BuildContext context, AsyncSnapshot snapshot) {
+          return AnimatedOpacity(
+            opacity: snapshot.data ? 1 : 0,
+            curve: Curves.easeOut,
+            duration: const Duration(milliseconds: 500),
+            child: Obx(
+              () => Text(
+                controller.title.value,
+                style: const TextStyle(fontSize: 16),
+              ),
+            ),
+          );
+        },
+      ),
      actions: [
        IconButton(
          icon: const Icon(Icons.more_vert_rounded),
@ -73,16 +66,15 @@ class _OpusPageState extends State<OpusPage> {
        ),
        const SizedBox(width: 16),
      ],
-      ),
-      body: SingleChildScrollView(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.start,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Padding(
+    );
+  }
+
+  Widget _buildTitle() {
+    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
-              child: Text(
-                controller.title,
+      child: Obx(
+        () => Text(
+          controller.title.value,
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
@ -91,7 +83,11 @@ class _OpusPageState extends State<OpusPage> {
          ),
        ),
      ),
-            FutureBuilder(
+    );
+  }
+
+  Widget _buildFutureContent() {
+    return FutureBuilder(
      future: _futureBuilderFuture,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
@ -99,18 +95,26 @@ class _OpusPageState extends State<OpusPage> {
            return const SizedBox();
          }
          if (snapshot.data['status']) {
-                    final modules = controller.opusData.value.detail!.modules!;
-                    final ModuleStat moduleStat = modules.last.moduleStat!;
-                    late ModuleContent moduleContent;
-                    final int moduleIndex = modules
-                        .indexWhere((module) => module.moduleContent != null);
-                    if (moduleIndex != -1) {
-                      moduleContent = modules[moduleIndex].moduleContent!;
+            return _buildContent(controller.opusData.value);
          } else {
-                      print('No moduleContent found');
+            return _buildError(snapshot.data['message']);
          }
+        } else {
+          return _buildLoading();
+        }
+      },
+    );
+  }
+
+  Widget _buildContent(OpusDataModel opusData) {
+    final modules = opusData.detail!.modules!;
+    late ModuleContent moduleContent;
    // 获取所有的图片链接
    final List<String> picList = [];
+    final int moduleIndex =
+        modules.indexWhere((module) => module.moduleContent != null);
+    if (moduleIndex != -1) {
+      moduleContent = modules[moduleIndex].moduleContent!;
      for (var paragraph in moduleContent.paragraphs!) {
        if (paragraph.paraType == 2) {
          for (var pic in paragraph.pic!.pics!) {
@ -118,35 +122,24 @@ class _OpusPageState extends State<OpusPage> {
          }
        }
      }
+    } else {
+      print('No moduleContent found');
+    }
+
    return Padding(
-                      padding: EdgeInsets.fromLTRB(16, 0, 16,
-                          MediaQuery.of(context).padding.bottom + 40),
+      padding: EdgeInsets.fromLTRB(
+          16, 0, 16, MediaQuery.of(context).padding.bottom + 40),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
-                            padding: const EdgeInsets.fromLTRB(0, 0, 0, 20),
-                            child: SelectableText.rich(
-                              TextSpan(
-                                style: TextStyle(
-                                  color: Theme.of(context).colorScheme.outline,
-                                  fontSize: 12,
-                                  letterSpacing: 1,
-                                ),
-                                children: [
-                                  TextSpan(
-                                      text: '${moduleStat.comment!.count}评论'),
-                                  const TextSpan(text: ' '),
-                                  const TextSpan(text: ' '),
-                                  TextSpan(text: '${moduleStat.like!.count}赞'),
-                                  const TextSpan(text: ' '),
-                                  const TextSpan(text: ' '),
-                                  TextSpan(
-                                      text: '${moduleStat.favorite!.count}转发'),
-                                ],
-                              ),
+            padding: const EdgeInsets.only(bottom: 30),
+            child: _buildStatsWidget(opusData),
          ),
+          Padding(
+            padding: const EdgeInsets.only(bottom: 20),
+            child: _buildAuthorWidget(opusData),
          ),
          ...moduleContent.paragraphs!.map(
            (ModuleParagraph paragraph) {
@ -154,17 +147,13 @@ class _OpusPageState extends State<OpusPage> {
                children: [
                  if (paragraph.paraType == 1) ...[
                    Container(
-                                      alignment: TextHelper.getAlignment(
-                                          paragraph.align),
+                      alignment: TextHelper.getAlignment(paragraph.align),
                      margin: const EdgeInsets.only(bottom: 10),
                      child: Text.rich(
                        TextSpan(
-                                          children: paragraph.text?.nodes
-                                                  ?.map((node) {
+                          children: paragraph.text?.nodes?.map((node) {
                                return TextHelper.buildTextSpan(
-                                                    node,
-                                                    paragraph.align,
-                                                    context);
+                                    node, paragraph.align, context);
                              }).toList() ??
                              [],
                        ),
@ -174,11 +163,11 @@ class _OpusPageState extends State<OpusPage> {
                    ...paragraph.pic?.pics?.map(
                          (Pic pic) => Center(
                            child: Padding(
-                                              padding: const EdgeInsets.only(
-                                                  top: 10, bottom: 10),
+                              padding:
+                                  const EdgeInsets.only(top: 10, bottom: 10),
                              child: InkWell(
                                onTap: () {
-                                                  onPreviewImg(
+                                  controller.onPreviewImg(
                                    picList,
                                    picList.indexOf(pic.url!),
                                    context,
@ -186,10 +175,8 @@ class _OpusPageState extends State<OpusPage> {
                                },
                                child: NetworkImgLayer(
                                  src: pic.url,
-                                                  width: (Get.size.width - 32) *
-                                                      pic.scale!,
-                                                  height:
-                                                      (Get.size.width - 32) *
+                                  width: (Get.size.width - 32) * pic.scale!,
+                                  height: (Get.size.width - 32) *
                                      pic.scale! /
                                      pic.aspectRatio!,
                                  type: 'emote',
@ -208,16 +195,67 @@ class _OpusPageState extends State<OpusPage> {
        ],
      ),
    );
+  }
+
+  Widget _buildAuthorWidget(OpusDataModel opusData) {
+    final modules = opusData.detail!.modules!;
+    late ModuleAuthor moduleAuthor;
+    final int moduleIndex =
+        modules.indexWhere((module) => module.moduleAuthor != null);
+    if (moduleIndex != -1) {
+      moduleAuthor = modules[moduleIndex].moduleAuthor!;
    } else {
-                    // 请求错误
+      return const SizedBox();
+    }
+    return Row(
+      children: [
+        NetworkImgLayer(
+          width: 48,
+          height: 48,
+          type: 'avatar',
+          src: moduleAuthor.face,
+        ),
+        const SizedBox(width: 10),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              moduleAuthor.name!,
+              style: const TextStyle(
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+            StyledText(moduleAuthor.pubTime!),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _buildStatsWidget(OpusDataModel opusData) {
+    final modules = opusData.detail!.modules!;
+    final ModuleStat moduleStat = modules.last.moduleStat!;
+    return Row(
+      children: [
+        StyledText('${moduleStat.comment!.count}评论'),
+        const SizedBox(width: 10),
+        StyledText('${moduleStat.like!.count}赞'),
+        const SizedBox(width: 10),
+        StyledText('${moduleStat.favorite!.count}转发'),
+      ],
+    );
+  }
+
+  Widget _buildError(String message) {
    return SizedBox(
      height: 100,
      child: Center(
-                        child: Text(snapshot.data['message']),
+        child: Text(message),
      ),
    );
  }
-                } else {
+
+  Widget _buildLoading() {
    return const SizedBox(
      height: 100,
      child: Center(
@ -225,10 +263,20 @@ class _OpusPageState extends State<OpusPage> {
      ),
    );
  }
-              },
-            )
-          ],
-        ),
+}
+
+class StyledText extends StatelessWidget {
+  final String text;
+
+  const StyledText(this.text, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      style: TextStyle(
+        fontSize: 13,
+        color: Theme.of(context).colorScheme.outline,
      ),
    );
  }