mod: 样式、代码优化
This commit is contained in:
guozhigq
@ -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)
|
||||
// ],
|
||||
// ),
|
||||
// );
|
||||
// },
|
||||
// ),
|
||||
// ),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@ class _HomePageState extends State<HomePage>
|
||||
mainAxisExtent: MediaQuery.of(context).size.width /
|
||||
_homeController.crossAxisCount /
|
||||
StyleString.aspectRatio +
|
||||
72),
|
||||
70),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(BuildContext context, int index) {
|
||||
return videoList.isNotEmpty
|
||||
|
||||
@ -62,7 +62,6 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// return _buildView(context, true, videoDetail);
|
||||
return VideoInfo(
|
||||
loadingStatus: true,
|
||||
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 {
|
||||
@ -183,7 +165,7 @@ class _VideoInfoState extends State<VideoInfo> 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<VideoInfo> 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<VideoInfo> 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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,13 +120,16 @@ class _VideoDetailPageState extends State<VideoDetailPage> {
|
||||
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(),
|
||||
],
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user