From 44ef189f326fd644fd67d68a197320d6f399d455 Mon Sep 17 00:00:00 2001 From: guozhigq Date: Sun, 10 Nov 2024 22:51:36 +0800 Subject: [PATCH] opt: layout --- lib/common/pages_bottom_sheet.dart | 222 ++++++++++++++++++----------- 1 file changed, 137 insertions(+), 85 deletions(-) diff --git a/lib/common/pages_bottom_sheet.dart b/lib/common/pages_bottom_sheet.dart index 1e88e863..dd8c5490 100644 --- a/lib/common/pages_bottom_sheet.dart +++ b/lib/common/pages_bottom_sheet.dart @@ -105,7 +105,8 @@ class _PagesBottomSheetState extends State List? _listScrollControllerList; final String heroTag = Get.arguments['heroTag']; VideoDetailController? _videoDetailController; - late RxInt isSubscribe = (-1).obs; + RxInt isSubscribe = (-1).obs; + bool isVisible = false; @override void initState() { @@ -224,6 +225,13 @@ class _PagesBottomSheetState extends State } } + // 更改展开状态 + void _changeVisible() { + setState(() { + isVisible = !isVisible; + }); + } + @override void dispose() { try { @@ -255,7 +263,9 @@ class _PagesBottomSheetState extends State UgcSeasonBuild( ugcSeason: widget.ugcSeason!, isSubscribe: isSubscribe, + isVisible: isVisible, changeFucCall: _changeSubscribeStatus, + changeVisible: _changeVisible, ), ], Expanded( @@ -325,19 +335,23 @@ class _PagesBottomSheetState extends State Widget buildTabBar() { return Column( children: [ - TabBar( - controller: tabController, - isScrollable: true, - indicatorSize: TabBarIndicatorSize.label, - tabAlignment: TabAlignment.start, - splashBorderRadius: BorderRadius.circular(4), - tabs: [ - ...widget.ugcSeason!.sections!.map((SectionItem section) { - return Tab( - text: section.title, - ); - }).toList() - ], + // 背景色 + Container( + color: Theme.of(context).colorScheme.surface, + child: TabBar( + controller: tabController, + isScrollable: true, + indicatorSize: TabBarIndicatorSize.label, + tabAlignment: TabAlignment.start, + splashBorderRadius: BorderRadius.circular(4), + tabs: [ + ...widget.ugcSeason!.sections!.map((SectionItem section) { + return Tab( + text: section.title, + ); + }).toList() + ], + ), ), Expanded( child: TabBarView( @@ -678,95 +692,133 @@ class EpisodeGridItem extends StatelessWidget { class UgcSeasonBuild extends StatelessWidget { final UgcSeason ugcSeason; final RxInt isSubscribe; + final bool isVisible; final Function changeFucCall; + final Function changeVisible; const UgcSeasonBuild({ Key? key, required this.ugcSeason, required this.isSubscribe, + required this.isVisible, required this.changeFucCall, + required this.changeVisible, }) : super(key: key); @override Widget build(BuildContext context) { - final ThemeData t = Theme.of(context); - final Color outline = t.colorScheme.outline; - return Container( - padding: const EdgeInsets.fromLTRB(12, 0, 12, 0), - color: Theme.of(context).colorScheme.surface, - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Divider( - height: 1, - thickness: 1, - color: Theme.of(context).dividerColor.withOpacity(0.1), - ), - const SizedBox(height: 10), - Text( - '合集：${ugcSeason.title}', - style: Theme.of(context).textTheme.titleMedium, - overflow: TextOverflow.ellipsis, - ), - if (ugcSeason.intro != null && ugcSeason.intro != '') ...[ - const SizedBox(height: 4), - Row( + final ThemeData theme = Theme.of(context); + final Color outline = theme.colorScheme.outline; + final Color surface = theme.colorScheme.surface; + final Color primary = theme.colorScheme.primary; + final Color onPrimary = theme.colorScheme.onPrimary; + final Color onInverseSurface = theme.colorScheme.onInverseSurface; + final TextStyle titleMedium = theme.textTheme.titleMedium!; + final TextStyle labelMedium = theme.textTheme.labelMedium!; + final Color dividerColor = theme.dividerColor.withOpacity(0.1); + + return isVisible + ? Container( + padding: const EdgeInsets.fromLTRB(12, 0, 12, 0), + color: surface, + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Expanded( - child: Text(ugcSeason.intro ?? '', - style: TextStyle( - color: Theme.of(context).colorScheme.outline)), - ), - Obx( - () => isSubscribe.value == -1 - ? const SizedBox(height: 32) - : SizedBox( - height: 32, - child: FilledButton.tonal( - onPressed: () => changeFucCall.call(), - style: TextButton.styleFrom( - padding: const EdgeInsets.only( - left: 8, - right: 8, + Divider(height: 1, thickness: 1, color: dividerColor), + const SizedBox(height: 10), + Row( + children: [ + Expanded( + child: Text( + '合集：${ugcSeason.title}', + style: titleMedium, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + ), + const SizedBox(width: 10), + Obx( + () => isSubscribe.value == -1 + ? const SizedBox(height: 32) + : SizedBox( + height: 32, + child: FilledButton.tonal( + onPressed: () => changeFucCall.call(), + style: TextButton.styleFrom( + padding: + const EdgeInsets.only(left: 8, right: 8), + foregroundColor: isSubscribe.value == 1 + ? outline + : onPrimary, + backgroundColor: isSubscribe.value == 1 + ? onInverseSurface + : primary, + ), + child: + Text(isSubscribe.value == 1 ? '已订阅' : '订阅'), ), - foregroundColor: isSubscribe.value == 1 - ? outline - : t.colorScheme.onPrimary, - backgroundColor: isSubscribe.value == 1 - ? t.colorScheme.onInverseSurface - : t.colorScheme.primary, // 设置按钮背景色 ), - child: Text(isSubscribe.value == 1 ? '已订阅' : '订阅'), - ), - ), + ), + ], ), - const SizedBox(width: 6), + if (ugcSeason.intro != null && ugcSeason.intro != '') ...[ + const SizedBox(height: 4), + Text( + ugcSeason.intro!, + style: TextStyle(color: outline, fontSize: 12), + ), + ], + const SizedBox(height: 4), + Text.rich( + TextSpan( + style: TextStyle( + fontSize: labelMedium.fontSize, color: outline), + children: [ + TextSpan( + text: '${Utils.numFormat(ugcSeason.stat!.view)}播放'), + const TextSpan(text: ' · '), + TextSpan( + text: + '${Utils.numFormat(ugcSeason.stat!.danmaku)}弹幕'), + ], + ), + ), + const SizedBox(height: 14), + Align( + alignment: Alignment.center, + child: Material( + color: surface, + child: InkWell( + onTap: () => changeVisible.call(), + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 10, horizontal: 0), + child: Text( + '收起简介', + style: TextStyle(color: primary, fontSize: 12), + ), + ), + ), + ), + ), + Divider(height: 1, thickness: 1, color: dividerColor), ], ), - ], - const SizedBox(height: 4), - Text.rich( - TextSpan( - style: TextStyle( - fontSize: Theme.of(context).textTheme.labelMedium!.fontSize, - color: Theme.of(context).colorScheme.outline, + ) + : Align( + alignment: Alignment.center, + child: InkWell( + onTap: () => changeVisible.call(), + child: Padding( + padding: + const EdgeInsets.symmetric(vertical: 10, horizontal: 0), + child: Text( + '展开简介', + style: TextStyle(color: primary, fontSize: 12), + ), ), - children: [ - TextSpan(text: '${Utils.numFormat(ugcSeason.stat!.view)}播放'), - const TextSpan(text: ' · '), - TextSpan(text: '${Utils.numFormat(ugcSeason.stat!.danmaku)}弹幕'), - ], ), - ), - const SizedBox(height: 14), - Divider( - height: 1, - thickness: 1, - color: Theme.of(context).dividerColor.withOpacity(0.1), - ), - ], - ), - ); + ); } }