From d668da67b9d5679628e1fc3cfe392d209e2965f8 Mon Sep 17 00:00:00 2001 From: guozhigq Date: Fri, 21 Apr 2023 23:32:24 +0800 Subject: [PATCH] =?UTF-8?q?mod:=20=E6=A0=B7=E5=BC=8F=E3=80=81=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/common/widgets/video_card_h.dart | 202 ++++++++++++------ lib/pages/home/view.dart | 2 +- lib/pages/video/detail/introduction/view.dart | 187 ++++++---------- lib/pages/video/detail/view.dart | 13 +- 4 files changed, 214 insertions(+), 190 deletions(-) diff --git a/lib/common/widgets/video_card_h.dart b/lib/common/widgets/video_card_h.dart index 5156a191..b14b6911 100644 --- a/lib/common/widgets/video_card_h.dart +++ b/lib/common/widgets/video_card_h.dart @@ -15,79 +15,147 @@ class VideoCardH extends StatelessWidget { Widget build(BuildContext context) { int aid = videoItem.aid; String heroTag = Utils.makeHeroTag(aid); - return Material( - child: Ink( - child: InkWell( - onTap: () async { - await Future.delayed(const Duration(milliseconds: 200)); - Get.toNamed('/video?aid=$aid', - arguments: {'videoItem': videoItem, 'heroTag': heroTag}); - }, - child: Container( + return InkWell( + onTap: () async { + await Future.delayed(const Duration(milliseconds: 200)); + Get.toNamed('/video?aid=$aid', + arguments: {'videoItem': videoItem, 'heroTag': heroTag}); + }, + child: Column( + children: [ + Padding( padding: const EdgeInsets.fromLTRB( - StyleString.cardSpace, 5, StyleString.cardSpace, 5), - child: LayoutBuilder(builder: (context, boxConstraints) { - double width = - (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; - return SizedBox( - height: width / StyleString.aspectRatio, - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - AspectRatio( - aspectRatio: StyleString.aspectRatio, - // child: ClipRRect( - // borderRadius: StyleString.mdRadius, - child: LayoutBuilder( - builder: (context, boxConstraints) { - double maxWidth = boxConstraints.maxWidth; - double maxHeight = boxConstraints.maxHeight; - double PR = MediaQuery.of(context).devicePixelRatio; - return Stack( - children: [ - Hero( - tag: heroTag, - child: NetworkImgLayer( - // src: videoItem['pic'] + - // '@${(maxWidth * 2).toInt()}w', - src: videoItem.pic + '@.webp', - width: maxWidth, - height: maxHeight, - ), - ), - // Image.network( videoItem['pic'], width: double.infinity, height: double.infinity,), - Positioned( - right: 4, - bottom: 4, - child: Container( - padding: const EdgeInsets.symmetric( - vertical: 1, horizontal: 6), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(4), - color: Colors.black54.withOpacity(0.4)), - child: Text( - Utils.timeFormat(videoItem.duration!), - style: const TextStyle( - fontSize: 11, color: Colors.white), + StyleString.cardSpace, 7, StyleString.cardSpace, 7), + child: LayoutBuilder( + builder: (context, boxConstraints) { + double width = + (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; + return SizedBox( + height: width / StyleString.aspectRatio, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AspectRatio( + aspectRatio: StyleString.aspectRatio, + child: LayoutBuilder( + builder: (context, boxConstraints) { + double maxWidth = boxConstraints.maxWidth; + double maxHeight = boxConstraints.maxHeight; + double PR = MediaQuery.of(context).devicePixelRatio; + return Stack( + children: [ + Hero( + tag: heroTag, + child: NetworkImgLayer( + // src: videoItem['pic'] + + // '@${(maxWidth * 2).toInt()}w', + src: videoItem.pic + '@.webp', + width: maxWidth, + height: maxHeight, ), ), - ) - ], - ); - }, + // Image.network( videoItem['pic'], width: double.infinity, height: double.infinity,), + Positioned( + right: 4, + bottom: 4, + child: Container( + padding: const EdgeInsets.symmetric( + vertical: 1, horizontal: 6), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(4), + color: Colors.black54.withOpacity(0.4)), + child: Text( + Utils.timeFormat(videoItem.duration!), + style: const TextStyle( + fontSize: 11, color: Colors.white), + ), + ), + ) + ], + ); + }, + ), ), - // ), - ), - VideoContent(videoItem: videoItem) - ], - ), - ); - }), - // height: 124, + VideoContent(videoItem: videoItem) + ], + ), + ); + }, + ), ), - ), + Divider( + height: 1, + indent: 8, + endIndent: 12, + color: Theme.of(context).dividerColor.withOpacity(0.08), + ) + ], ), + // Container( + // padding: const EdgeInsets.fromLTRB( + // StyleString.cardSpace, 5, StyleString.cardSpace, 5), + // child: LayoutBuilder( + // builder: (context, boxConstraints) { + // double width = + // (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; + // return SizedBox( + // height: width / StyleString.aspectRatio, + // child: Row( + // mainAxisAlignment: MainAxisAlignment.start, + // crossAxisAlignment: CrossAxisAlignment.start, + // children: [ + // AspectRatio( + // aspectRatio: StyleString.aspectRatio, + // // child: ClipRRect( + // // borderRadius: StyleString.mdRadius, + // child: LayoutBuilder( + // builder: (context, boxConstraints) { + // double maxWidth = boxConstraints.maxWidth; + // double maxHeight = boxConstraints.maxHeight; + // double PR = MediaQuery.of(context).devicePixelRatio; + // return Stack( + // children: [ + // Hero( + // tag: heroTag, + // child: NetworkImgLayer( + // // src: videoItem['pic'] + + // // '@${(maxWidth * 2).toInt()}w', + // src: videoItem.pic + '@.webp', + // width: maxWidth, + // height: maxHeight, + // ), + // ), + // // Image.network( videoItem['pic'], width: double.infinity, height: double.infinity,), + // Positioned( + // right: 4, + // bottom: 4, + // child: Container( + // padding: const EdgeInsets.symmetric( + // vertical: 1, horizontal: 6), + // decoration: BoxDecoration( + // borderRadius: BorderRadius.circular(4), + // color: Colors.black54.withOpacity(0.4)), + // child: Text( + // Utils.timeFormat(videoItem.duration!), + // style: const TextStyle( + // fontSize: 11, color: Colors.white), + // ), + // ), + // ) + // ], + // ); + // }, + // ), + // // ), + // ), + // VideoContent(videoItem: videoItem) + // ], + // ), + // ); + // }, + // ), + // ), ); } } diff --git a/lib/pages/home/view.dart b/lib/pages/home/view.dart index fba2f82c..1adb482b 100644 --- a/lib/pages/home/view.dart +++ b/lib/pages/home/view.dart @@ -80,7 +80,7 @@ class _HomePageState extends State mainAxisExtent: MediaQuery.of(context).size.width / _homeController.crossAxisCount / StyleString.aspectRatio + - 72), + 70), delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return videoList.isNotEmpty diff --git a/lib/pages/video/detail/introduction/view.dart b/lib/pages/video/detail/introduction/view.dart index de89e948..66b577fc 100644 --- a/lib/pages/video/detail/introduction/view.dart +++ b/lib/pages/video/detail/introduction/view.dart @@ -62,7 +62,6 @@ class _VideoIntroPanelState extends State ); } } else { - // return _buildView(context, true, videoDetail); return VideoInfo( loadingStatus: true, videoDetail: videoDetail, @@ -71,23 +70,6 @@ class _VideoIntroPanelState extends State }, ); } - - Widget _buildView(context, loadingStatus, videoDetail) { - // return CustomScrollView( - // key: const PageStorageKey('简介'), - // slivers: [ - // SliverOverlapInjector( - // handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)), - // VideoInfo(loadingStatus: loadingStatus, videoDetail: videoDetail), - // SliverToBoxAdapter( - // child: - // Divider(color: Theme.of(context).dividerColor.withOpacity(0.1)), - // ), - // const RecommendList() - // ], - // ); - return VideoInfo(loadingStatus: loadingStatus, videoDetail: videoDetail); - } } class VideoInfo extends StatefulWidget { @@ -183,7 +165,7 @@ class _VideoInfoState extends State with TickerProviderStateMixin { const SizedBox(width: 4), ], ), - const SizedBox(height: 18), + const SizedBox(height: 13), // 标题 超过两行收起 // Container( // color: Colors.blue[50], @@ -231,73 +213,81 @@ class _VideoInfoState extends State with TickerProviderStateMixin { // ), // ], // ), - SizedBox( - width: double.infinity, - child: Text( - !widget.loadingStatus - ? widget.videoDetail!.title - : videoItem['title'], - // style: Theme.of(context).textTheme.titleMedium, - // maxLines: 2, - ), + + Text( + !widget.loadingStatus + ? widget.videoDetail!.title + : videoItem['title'], ), // const SizedBox(height: 5), // 播放量、评论、日期 - Row( - children: [ - const SizedBox(width: 2), - StatView( - theme: 'gray', - view: !widget.loadingStatus - ? widget.videoDetail!.stat!.view - : videoItem['stat'].view, - size: 'medium', - ), - const SizedBox(width: 10), - StatDanMu( - theme: 'gray', - danmu: !widget.loadingStatus - ? widget.videoDetail!.stat!.danmaku - : videoItem['stat'].danmaku, - size: 'medium', - ), - const SizedBox(width: 10), - Text( - Utils.dateFormat( - !widget.loadingStatus - ? widget.videoDetail!.pubdate - : videoItem['pubdate'], - formatType: 'detail'), - style: TextStyle( - fontSize: 12, - color: Theme.of(context).colorScheme.outline), - ), - const Spacer(), - RotationTransition( - turns: _manualAnimation!, - child: IconButton( - onPressed: () { - /// 获取动画当前的值 - var value = _manualController!.value; - /// 0.5代表 180弧度 - if (value == 0) { - _manualController!.animateTo(0.5); - } else { - _manualController!.animateTo(0); - } - setState(() { - isExpand = !isExpand; - }); - }, - icon: Icon( - Icons.expand_less, - color: Theme.of(context).colorScheme.outline, + InkWell( + splashColor: Colors.transparent, + onTap: () { + _manualController!.animateTo(isExpand ? 0 : 0.5); + setState(() { + isExpand = !isExpand; + }); + }, + child: Row( + children: [ + const SizedBox(width: 2), + StatView( + theme: 'gray', + view: !widget.loadingStatus + ? widget.videoDetail!.stat!.view + : videoItem['stat'].view, + size: 'medium', + ), + const SizedBox(width: 10), + StatDanMu( + theme: 'gray', + danmu: !widget.loadingStatus + ? widget.videoDetail!.stat!.danmaku + : videoItem['stat'].danmaku, + size: 'medium', + ), + const SizedBox(width: 10), + Text( + Utils.dateFormat( + !widget.loadingStatus + ? widget.videoDetail!.pubdate + : videoItem['pubdate'], + formatType: 'detail'), + style: TextStyle( + fontSize: 12, + color: Theme.of(context).colorScheme.outline), + ), + const Spacer(), + RotationTransition( + turns: _manualAnimation!, + child: SizedBox( + width: 35, + height: 35, + child: IconButton( + padding: const EdgeInsets.all(2.0), + onPressed: () { + /// 0.5代表 180弧度 + _manualController! + .animateTo(isExpand ? 0 : 0.5); + setState(() { + isExpand = !isExpand; + }); + }, + icon: Icon( + Icons.expand_less, + size: 22, + color: Theme.of(context).colorScheme.outline, + ), + ), ), ), - ), - ], + const SizedBox(width: 10), + ], + ), ), + // const SizedBox(height: 5), // 简介 默认收起 if (!widget.loadingStatus) @@ -342,8 +332,7 @@ class _VideoInfoState extends State with TickerProviderStateMixin { // 喜欢 投币 分享 Widget _actionGrid(BuildContext context) { return LayoutBuilder(builder: (context, constraints) { - return Container( - color: Colors.black12, + return SizedBox( height: constraints.maxWidth / 5, child: GridView.count( primary: false, @@ -444,39 +433,3 @@ class ActionItem extends StatelessWidget { )); } } - -class RecommendList extends StatelessWidget { - const RecommendList({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return SliverList( - delegate: SliverChildBuilderDelegate((context, index) { - return Material( - child: InkWell( - onTap: () {}, - child: Padding( - padding: const EdgeInsets.fromLTRB(20, 10, 20, 10), - child: Text( - '$index」 求推荐一些高质量的系统地介绍 ChatGPT 及相关技术的视频、文章或者书', - style: Theme.of(context) - .textTheme - .titleSmall! - .copyWith(height: 1.6), - ), - ), - ), - ); - }, childCount: 50), - ); - } -} - -class ActionGrid extends StatelessWidget { - const ActionGrid({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return const Placeholder(); - } -} diff --git a/lib/pages/video/detail/view.dart b/lib/pages/video/detail/view.dart index 78beb58b..d8cf35df 100644 --- a/lib/pages/video/detail/view.dart +++ b/lib/pages/video/detail/view.dart @@ -120,13 +120,16 @@ class _VideoDetailPageState extends State { context), ), const VideoIntroPanel(), - SliverToBoxAdapter( - child: Divider( - color: - Theme.of(context).dividerColor.withOpacity(0.1), + SliverPadding( + padding: const EdgeInsets.only(top: 8, bottom: 5), + sliver: SliverToBoxAdapter( + child: Divider( + height: 1, + color: + Theme.of(context).dividerColor.withOpacity(0.1), + ), ), ), - const SliverPadding(padding: EdgeInsets.only(bottom: 5)), const RelatedVideoPanel(), ], );