mirrors/pilipala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mod: 样式、代码优化

Browse Source
This commit is contained in:
guozhigq
2023-04-21 23:32:24 +08:00
parent ebbb0b86a2
commit d668da67b9
4 changed files with 214 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
lib/common/widgets/video_card_h.dart
View File

@ -15,79 +15,147 @@ class VideoCardH extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
int aid = videoItem.aid; int aid = videoItem.aid;
String heroTag = Utils.makeHeroTag(aid); String heroTag = Utils.makeHeroTag(aid);
return Material( return InkWell(
child: Ink( onTap: () async {
child: InkWell( await Future.delayed(const Duration(milliseconds: 200));
onTap: () async { Get.toNamed('/video?aid=$aid',
await Future.delayed(const Duration(milliseconds: 200)); arguments: {'videoItem': videoItem, 'heroTag': heroTag});
Get.toNamed('/video?aid=$aid', },
arguments: {'videoItem': videoItem, 'heroTag': heroTag}); child: Column(
}, children: [
child: Container( Padding(
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(
StyleString.cardSpace, 5, StyleString.cardSpace, 5), StyleString.cardSpace, 7, StyleString.cardSpace, 7),
child: LayoutBuilder(builder: (context, boxConstraints) { child: LayoutBuilder(
double width = builder: (context, boxConstraints) {
(boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; double width =
return SizedBox( (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2;
height: width / StyleString.aspectRatio, return SizedBox(
child: Row( height: width / StyleString.aspectRatio,
mainAxisAlignment: MainAxisAlignment.start, child: Row(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ crossAxisAlignment: CrossAxisAlignment.start,
AspectRatio( children: [
aspectRatio: StyleString.aspectRatio, AspectRatio(
// child: ClipRRect( aspectRatio: StyleString.aspectRatio,
// borderRadius: StyleString.mdRadius, child: LayoutBuilder(
child: LayoutBuilder( builder: (context, boxConstraints) {
builder: (context, boxConstraints) { double maxWidth = boxConstraints.maxWidth;
double maxWidth = boxConstraints.maxWidth; double maxHeight = boxConstraints.maxHeight;
double maxHeight = boxConstraints.maxHeight; double PR = MediaQuery.of(context).devicePixelRatio;
double PR = MediaQuery.of(context).devicePixelRatio; return Stack(
return Stack( children: [
children: [ Hero(
Hero( tag: heroTag,
tag: heroTag, child: NetworkImgLayer(
child: NetworkImgLayer( // src: videoItem['pic'] +
// src: videoItem['pic'] + // '@${(maxWidth * 2).toInt()}w',
// '@${(maxWidth * 2).toInt()}w', src: videoItem.pic + '@.webp',
src: videoItem.pic + '@.webp', width: maxWidth,
width: maxWidth, height: maxHeight,
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),
), ),
), ),
) // 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)
), ],
VideoContent(videoItem: videoItem) ),
], );
), },
); ),
}),
// height: 124,
), ),
), 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)
// ],
// ),
// );
// },
// ),
// ),
); );
} }
} }

2
lib/pages/home/view.dart
View File

@ -80,7 +80,7 @@ class _HomePageState extends State<HomePage>
mainAxisExtent: MediaQuery.of(context).size.width / mainAxisExtent: MediaQuery.of(context).size.width /
_homeController.crossAxisCount / _homeController.crossAxisCount /
StyleString.aspectRatio + StyleString.aspectRatio +
72), 70),
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) { (BuildContext context, int index) {
return videoList.isNotEmpty return videoList.isNotEmpty

187
lib/pages/video/detail/introduction/view.dart
View File

@ -62,7 +62,6 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
); );
} }
} else { } else {
// return _buildView(context, true, videoDetail);
return VideoInfo( return VideoInfo(
loadingStatus: true, loadingStatus: true,
videoDetail: videoDetail, videoDetail: videoDetail,
@ -71,23 +70,6 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
}, },
); );
} }
Widget _buildView(context, loadingStatus, videoDetail) {
// return CustomScrollView(
// key: const PageStorageKey<String>('简介'),
// slivers: <Widget>[
// 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 { class VideoInfo extends StatefulWidget {
@ -183,7 +165,7 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
const SizedBox(width: 4), const SizedBox(width: 4),
], ],
), ),
const SizedBox(height: 18), const SizedBox(height: 13),
// 标题 超过两行收起 // 标题 超过两行收起
// Container( // Container(
// color: Colors.blue[50], // color: Colors.blue[50],
@ -231,73 +213,81 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
// ), // ),
// ], // ],
// ), // ),
SizedBox(
width: double.infinity, Text(
child: Text( !widget.loadingStatus
!widget.loadingStatus ? widget.videoDetail!.title
? widget.videoDetail!.title : videoItem['title'],
: videoItem['title'],
// style: Theme.of(context).textTheme.titleMedium,
// maxLines: 2,
),
), ),
// const SizedBox(height: 5), // 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弧度 InkWell(
if (value == 0) { splashColor: Colors.transparent,
_manualController!.animateTo(0.5); onTap: () {
} else { _manualController!.animateTo(isExpand ? 0 : 0.5);
_manualController!.animateTo(0); setState(() {
} isExpand = !isExpand;
setState(() { });
isExpand = !isExpand; },
}); child: Row(
}, children: [
icon: Icon( const SizedBox(width: 2),
Icons.expand_less, StatView(
color: Theme.of(context).colorScheme.outline, 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), // const SizedBox(height: 5),
// 简介 默认收起 // 简介 默认收起
if (!widget.loadingStatus) if (!widget.loadingStatus)
@ -342,8 +332,7 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
// 喜欢 投币 分享 // 喜欢 投币 分享
Widget _actionGrid(BuildContext context) { Widget _actionGrid(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) { return LayoutBuilder(builder: (context, constraints) {
return Container( return SizedBox(
color: Colors.black12,
height: constraints.maxWidth / 5, height: constraints.maxWidth / 5,
child: GridView.count( child: GridView.count(
primary: false, 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();
}
}

13
lib/pages/video/detail/view.dart
View File

@ -120,13 +120,16 @@ class _VideoDetailPageState extends State<VideoDetailPage> {
context), context),
), ),
const VideoIntroPanel(), const VideoIntroPanel(),
SliverToBoxAdapter( SliverPadding(
child: Divider( padding: const EdgeInsets.only(top: 8, bottom: 5),
color: sliver: SliverToBoxAdapter(
Theme.of(context).dividerColor.withOpacity(0.1), child: Divider(
height: 1,
color:
Theme.of(context).dividerColor.withOpacity(0.1),
),
), ),
), ),
const SliverPadding(padding: EdgeInsets.only(bottom: 5)),
const RelatedVideoPanel(), const RelatedVideoPanel(),
], ],
); );