mod: 视频详情页样式

2023-07-22 22:30:50 +08:00
parent 057b00f538
commit 8076848df3
7 changed files with 552 additions and 278 deletions
--- a/lib/pages/video/detail/introduction/widgets/menu_row.dart
+++ b/lib/pages/video/detail/introduction/widgets/menu_row.dart
@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+
+class MenuRow extends StatelessWidget {
+  bool? loadingStatus;
+  MenuRow({
+    Key? key,
+    this.loadingStatus,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      color: Theme.of(context).colorScheme.background,
+      padding: const EdgeInsets.only(top: 9, bottom: 9, left: 12),
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Row(children: [
+          actionRowLineItem(
+            context,
+            () => {},
+            loadingStatus,
+            '推荐',
+            selectStatus: true,
+          ),
+          const SizedBox(width: 8),
+          actionRowLineItem(
+            context,
+            () => {},
+            loadingStatus,
+            '弹幕',
+            selectStatus: false,
+          ),
+          const SizedBox(width: 8),
+          actionRowLineItem(
+            context,
+            () => {},
+            loadingStatus,
+            '评论列表',
+            selectStatus: false,
+          ),
+          const SizedBox(width: 8),
+          actionRowLineItem(
+            context,
+            () => {},
+            loadingStatus,
+            '播放列表',
+            selectStatus: false,
+          ),
+        ]),
+      ),
+    );
+  }
+
+  Widget actionRowLineItem(
+      context, Function? onTap, bool? loadingStatus, String? text,
+      {bool selectStatus = false}) {
+    return Material(
+      color: selectStatus
+          ? Theme.of(context).highlightColor.withOpacity(0.2)
+          : Colors.transparent,
+      borderRadius: const BorderRadius.all(Radius.circular(30)),
+      clipBehavior: Clip.hardEdge,
+      child: InkWell(
+        onTap: () => onTap!(),
+        child: Container(
+          padding: const EdgeInsets.fromLTRB(13, 5.5, 13, 5.5),
+          decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(Radius.circular(30)),
+            border: Border.all(
+              color: selectStatus
+                  ? Colors.transparent
+                  : Theme.of(context).highlightColor.withOpacity(0.2),
+            ),
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              AnimatedOpacity(
+                opacity: loadingStatus! ? 0 : 1,
+                duration: const Duration(milliseconds: 200),
+                child: Text(
+                  text!,
+                  style: TextStyle(
+                      fontSize:
+                          Theme.of(context).textTheme.labelMedium?.fontSize),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}