From eb3017faf49708f193bf16a92db4e4043006a89d Mon Sep 17 00:00:00 2001 From: guozhigq Date: Sun, 16 Jul 2023 16:43:45 +0800 Subject: [PATCH] =?UTF-8?q?mod:=20=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/common/constants.dart | 5 ++- lib/common/widgets/video_card_h.dart | 20 +++++----- lib/common/widgets/video_card_v.dart | 57 +++++++++++++++------------ lib/pages/home/controller.dart | 27 +++++++++++-- lib/pages/home/view.dart | 57 +++++++++++++++++---------- lib/pages/live/view.dart | 6 +-- lib/pages/live/widgets/live_item.dart | 23 ++++++----- lib/pages/rcmd/view.dart | 6 +-- 8 files changed, 126 insertions(+), 75 deletions(-) diff --git a/lib/common/constants.dart b/lib/common/constants.dart index 25168d23..f0baddb9 100644 --- a/lib/common/constants.dart +++ b/lib/common/constants.dart @@ -2,7 +2,8 @@ import 'package:flutter/material.dart'; class StyleString { static const double cardSpace = 8; - static BorderRadius mdRadius = BorderRadius.circular(6); - static const Radius imgRadius = Radius.circular(6); + static const double safeSpace = 14; + static BorderRadius mdRadius = BorderRadius.circular(16); + static const Radius imgRadius = Radius.circular(16); static const double aspectRatio = 16 / 10; } diff --git a/lib/common/widgets/video_card_h.dart b/lib/common/widgets/video_card_h.dart index 435b4826..8b885e42 100644 --- a/lib/common/widgets/video_card_h.dart +++ b/lib/common/widgets/video_card_h.dart @@ -57,7 +57,7 @@ class VideoCardH extends StatelessWidget { child: LayoutBuilder( builder: (context, boxConstraints) { double width = - (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; + (boxConstraints.maxWidth - StyleString.cardSpace * 9) / 2; return SizedBox( height: width / StyleString.aspectRatio, child: Row( @@ -104,12 +104,12 @@ class VideoCardH extends StatelessWidget { }, ), ), - Divider( - height: 1, - indent: 8, - endIndent: 12, - color: Theme.of(context).dividerColor.withOpacity(0.08), - ) + // Divider( + // height: 1, + // indent: 8, + // endIndent: 12, + // color: Theme.of(context).dividerColor.withOpacity(0.08), + // ) ], ), ), @@ -134,8 +134,10 @@ class VideoContent extends StatelessWidget { videoItem.title, textAlign: TextAlign.start, style: TextStyle( - fontSize: Theme.of(context).textTheme.titleSmall!.fontSize, - fontWeight: FontWeight.w500), + fontSize: Theme.of(context).textTheme.labelMedium!.fontSize, + fontWeight: FontWeight.w600, + letterSpacing: 0.3, + ), maxLines: 2, overflow: TextOverflow.ellipsis, ), diff --git a/lib/common/widgets/video_card_v.dart b/lib/common/widgets/video_card_v.dart index 279ba9ad..cd879376 100644 --- a/lib/common/widgets/video_card_v.dart +++ b/lib/common/widgets/video_card_v.dart @@ -25,11 +25,11 @@ class VideoCardV extends StatelessWidget { Widget build(BuildContext context) { String heroTag = Utils.makeHeroTag(videoItem.id); 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: () { @@ -51,10 +51,14 @@ class VideoCardV extends StatelessWidget { }, child: Column( children: [ - ClipRRect( - borderRadius: const BorderRadius.only( - topLeft: StyleString.imgRadius, - topRight: StyleString.imgRadius, + Container( + decoration: const BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: StyleString.imgRadius, + topRight: StyleString.imgRadius, + bottomLeft: StyleString.imgRadius, + bottomRight: StyleString.imgRadius, + ), ), child: AspectRatio( aspectRatio: StyleString.aspectRatio, @@ -74,20 +78,20 @@ class VideoCardV extends StatelessWidget { height: maxHeight, ), ), - Positioned( - left: 0, - right: 0, - bottom: 0, - child: AnimatedOpacity( - opacity: 1, - duration: const Duration(milliseconds: 200), - child: VideoStat( - view: videoItem.stat.view, - danmaku: videoItem.stat.danmaku, - duration: videoItem.duration, - ), - ), - ), + // Positioned( + // left: 0, + // right: 0, + // bottom: 0, + // child: AnimatedOpacity( + // opacity: 1, + // duration: const Duration(milliseconds: 200), + // child: VideoStat( + // view: videoItem.stat.view, + // danmaku: videoItem.stat.danmaku, + // duration: videoItem.duration, + // ), + // ), + // ), ], ); }), @@ -110,7 +114,7 @@ class VideoContent extends StatelessWidget { return Expanded( child: Padding( // 多列 - padding: const EdgeInsets.fromLTRB(8, 8, 6, 7), + padding: const EdgeInsets.fromLTRB(4, 6, 6, 7), // 单列 // padding: const EdgeInsets.fromLTRB(14, 10, 4, 8), child: Column( @@ -120,9 +124,10 @@ class VideoContent extends StatelessWidget { Text( videoItem.title, textAlign: TextAlign.start, - style: const TextStyle( - // fontSize: Theme.of(context).textTheme.titleSmall!.fontSize, - fontSize: 13, + style: TextStyle( + fontSize: Theme.of(context).textTheme.labelMedium!.fontSize, + fontWeight: FontWeight.w600, + letterSpacing: 0.3, ), maxLines: Get.find().crossAxisCount, overflow: TextOverflow.ellipsis, diff --git a/lib/pages/home/controller.dart b/lib/pages/home/controller.dart index 0cbedcc5..05ecefb8 100644 --- 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; diff --git a/lib/pages/home/view.dart b/lib/pages/home/view.dart index d5aebe17..3c34d2c7 100644 --- a/lib/pages/home/view.dart +++ b/lib/pages/home/view.dart @@ -29,7 +29,7 @@ class _HomePageState extends State 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 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}, ), ), ), diff --git a/lib/pages/live/view.dart b/lib/pages/live/view.dart index 99904fe0..8c733000 100644 --- a/lib/pages/live/view.dart +++ b/lib/pages/live/view.dart @@ -50,7 +50,7 @@ class _LivePageState extends State { 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 { 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) { diff --git a/lib/pages/live/widgets/live_item.dart b/lib/pages/live/widgets/live_item.dart index 4768a4eb..e589ea2d 100644 --- 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, diff --git a/lib/pages/rcmd/view.dart b/lib/pages/rcmd/view.dart index 448e5477..10257461 100644 --- a/lib/pages/rcmd/view.dart +++ b/lib/pages/rcmd/view.dart @@ -53,7 +53,7 @@ class _RcmdPageState extends State 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 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) {