mod: 首页样式修改

2023-07-16 16:43:45 +08:00
parent a0427c672b
commit eb3017faf4
8 changed files with 126 additions and 75 deletions
--- a/lib/pages/home/controller.dart
+++ b/lib/pages/home/controller.dart
@ -6,9 +6,30 @@ import 'package:pilipala/pages/rcmd/index.dart';
 class HomeController extends GetxController with GetTickerProviderStateMixin {
  bool flag = false;
  List tabs = [
-    {'label': '直播', 'type': 'live'},
-    {'label': '推荐', 'type': 'rcm'},
-    {'label': '热门', 'type': 'hot'},
+    {
+      'icon': const Icon(
+        Icons.live_tv_outlined,
+        size: 15,
+      ),
+      'label': '直播',
+      'type': 'live'
+    },
+    {
+      'icon': const Icon(
+        Icons.thumb_up_off_alt_outlined,
+        size: 15,
+      ),
+      'label': '推荐',
+      'type': 'rcm'
+    },
+    {
+      'icon': const Icon(
+        Icons.whatshot_outlined,
+        size: 15,
+      ),
+      'label': '热门',
+      'type': 'hot'
+    },
  ];
  int initialIndex = 1;
  late TabController tabController;
--- a/lib/pages/home/view.dart
+++ b/lib/pages/home/view.dart
@ -29,7 +29,7 @@ class _HomePageState extends State<HomePage>
      appBar: AppBar(
        titleSpacing: 0,
        title: Padding(
-          padding: const EdgeInsets.only(left: 4, right: 4),
+          padding: const EdgeInsets.only(left: 8, right: 8),
          child: Stack(
            children: [
              const Align(
@ -55,26 +55,43 @@ class _HomePageState extends State<HomePage>
                    splashColor: Colors.transparent, // 点击时的水波纹颜色设置为透明
                    highlightColor: Colors.transparent, // 点击时的背景高亮颜色设置为透明
                  ),
-                  child: TabBar(
-                    controller: _homeController.tabController,
-                    tabs: [
-                      for (var i in _homeController.tabs) Tab(text: i['label']),
-                    ],
-                    isScrollable: true,
-                    indicatorWeight: 0,
-                    indicatorPadding:
-                        const EdgeInsets.symmetric(horizontal: 3, vertical: 8),
-                    indicator: BoxDecoration(
-                      color: Theme.of(context).colorScheme.secondaryContainer,
-                      borderRadius: const BorderRadius.all(Radius.circular(20)),
+                  child: Padding(
+                    padding: const EdgeInsets.only(top: 4),
+                    child: TabBar(
+                      controller: _homeController.tabController,
+                      tabs: [
+                        for (var i in _homeController.tabs)
+                          // Tab(text: i['label'])
+                          Padding(
+                            padding: const EdgeInsets.symmetric(
+                                horizontal: 0, vertical: 11),
+                            child: Row(
+                              children: [
+                                i['icon'],
+                                const SizedBox(width: 4),
+                                Text(i['label'])
+                              ],
+                            ),
+                          ),
+                      ],
+                      isScrollable: true,
+                      indicatorWeight: 0,
+                      indicatorPadding: const EdgeInsets.symmetric(
+                          horizontal: 4, vertical: 5),
+                      indicator: BoxDecoration(
+                        color: Theme.of(context).colorScheme.secondaryContainer,
+                        borderRadius:
+                            const BorderRadius.all(Radius.circular(20)),
+                      ),
+                      indicatorSize: TabBarIndicatorSize.tab,
+                      labelColor:
+                          Theme.of(context).colorScheme.onSecondaryContainer,
+                      labelStyle: const TextStyle(fontSize: 13),
+                      dividerColor: Colors.transparent,
+                      unselectedLabelColor:
+                          Theme.of(context).colorScheme.outline,
+                      onTap: (value) => {_homeController.initialIndex = value},
                    ),
-                    indicatorSize: TabBarIndicatorSize.tab,
-                    labelColor:
-                        Theme.of(context).colorScheme.onSecondaryContainer,
-                    labelStyle: const TextStyle(fontSize: 13),
-                    dividerColor: Colors.transparent,
-                    unselectedLabelColor: Theme.of(context).colorScheme.outline,
-                    onTap: (value) => {_homeController.initialIndex = value},
                  ),
                ),
              ),
--- a/lib/pages/live/view.dart
+++ b/lib/pages/live/view.dart
@ -50,7 +50,7 @@ class _LivePageState extends State<LivePage> {
          SliverPadding(
            // 单列布局 EdgeInsets.zero
            padding: const EdgeInsets.fromLTRB(
-                StyleString.cardSpace, 0, StyleString.cardSpace, 8),
+                StyleString.safeSpace, 0, StyleString.safeSpace, 0),
            sliver: FutureBuilder(
              future: _liveController.queryLiveList('init'),
              builder: (context, snapshot) {
@ -97,13 +97,13 @@ class _LivePageState extends State<LivePage> {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // 行间距
-        mainAxisSpacing: StyleString.cardSpace,
+        mainAxisSpacing: StyleString.cardSpace + 2,
        // 列间距
        crossAxisSpacing: StyleString.cardSpace,
        // 列数
        crossAxisCount: ctr.crossAxisCount,
        mainAxisExtent:
-            Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 70,
+            Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 60,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
--- a/lib/pages/live/widgets/live_item.dart
+++ b/lib/pages/live/widgets/live_item.dart
@ -23,11 +23,11 @@ class LiveCardV extends StatelessWidget {
  Widget build(BuildContext context) {
    String heroTag = Utils.makeHeroTag(liveItem.roomId);
    return Card(
-      elevation: 0.8,
+      elevation: 0,
      clipBehavior: Clip.hardEdge,
-      shape: RoundedRectangleBorder(
-        borderRadius: StyleString.mdRadius,
-      ),
+      // shape: RoundedRectangleBorder(
+      //   borderRadius: StyleString.mdRadius,
+      // ),
      margin: EdgeInsets.zero,
      child: GestureDetector(
        onLongPress: () {
@ -52,6 +52,8 @@ class LiveCardV extends StatelessWidget {
                borderRadius: const BorderRadius.only(
                  topLeft: StyleString.imgRadius,
                  topRight: StyleString.imgRadius,
+                  bottomLeft: StyleString.imgRadius,
+                  bottomRight: StyleString.imgRadius,
                ),
                child: AspectRatio(
                  aspectRatio: StyleString.aspectRatio,
@ -90,15 +92,17 @@ class LiveContent extends StatelessWidget {
    return Expanded(
      child: Padding(
        // 多列
-        padding: const EdgeInsets.fromLTRB(8, 8, 6, 4),
+        padding: const EdgeInsets.fromLTRB(4, 6, 6, 4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              liveItem.title,
              textAlign: TextAlign.start,
-              style: const TextStyle(
-                fontSize: 13,
+              style: TextStyle(
+                fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
+                fontWeight: FontWeight.w600,
+                letterSpacing: 0.3,
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
@ -111,8 +115,9 @@ class LiveContent extends StatelessWidget {
                  child: Text(
                    liveItem.uname,
                    textAlign: TextAlign.start,
-                    style: const TextStyle(
-                      fontSize: 13,
+                    style: TextStyle(
+                      fontSize:
+                          Theme.of(context).textTheme.labelMedium!.fontSize,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
--- a/lib/pages/rcmd/view.dart
+++ b/lib/pages/rcmd/view.dart
@ -53,7 +53,7 @@ class _RcmdPageState extends State<RcmdPage>
            padding: _rcmdController.crossAxisCount == 1
                ? EdgeInsets.zero
                : const EdgeInsets.fromLTRB(
-                    StyleString.cardSpace, 0, StyleString.cardSpace, 8),
+                    StyleString.safeSpace, 0, StyleString.safeSpace, 0),
            sliver: FutureBuilder(
              future: _rcmdController.queryRcmdFeed('init'),
              builder: (context, snapshot) {
@ -99,13 +99,13 @@ class _RcmdPageState extends State<RcmdPage>
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // 行间距
-        mainAxisSpacing: StyleString.cardSpace,
+        mainAxisSpacing: StyleString.cardSpace + 2,
        // 列间距
        crossAxisSpacing: StyleString.cardSpace,
        // 列数
        crossAxisCount: ctr.crossAxisCount,
        mainAxisExtent:
-            Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 70,
+            Get.size.width / ctr.crossAxisCount / StyleString.aspectRatio + 60,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {