opt: images showing

This commit is contained in:
bggRGjQaUbCoE
2024-09-29 19:59:08 +08:00
parent 9db011a4e5
commit bd44bf5c9e
6 changed files with 95 additions and 499 deletions

View File

@@ -6,15 +6,27 @@ import 'package:PiliPalaX/common/widgets/nine_grid_view.dart';
import 'package:PiliPalaX/pages/preview/view.dart'; import 'package:PiliPalaX/pages/preview/view.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ImageModel {
ImageModel({
required this.width,
required this.height,
required this.url,
});
dynamic width;
dynamic height;
String url;
}
Widget image( Widget image(
double maxWidth, double maxWidth,
List<dynamic> picArr, List<ImageModel> picArr,
) { ) {
double imageWidth = (maxWidth - 2 * 5) / 3; double imageWidth = (maxWidth - 2 * 5) / 3;
double imageHeight = imageWidth; double imageHeight = imageWidth;
if (picArr.length == 1) { if (picArr.length == 1) {
dynamic width = picArr[0]['img_width']; dynamic width = picArr[0].width;
dynamic height = picArr[0]['img_height']; dynamic height = picArr[0].height;
double ratioWH = width / height; double ratioWH = width / height;
double ratioHW = height / width; double ratioHW = height / width;
double maxRatio = 22 / 9; double maxRatio = 22 / 9;
@@ -44,7 +56,7 @@ Widget image(
builder: (context) { builder: (context) {
return ImagePreview( return ImagePreview(
initialPage: index, initialPage: index,
imgList: picArr.map((item) => item['img_src'] as String).toList(), imgList: picArr.map((item) => item.url).toList(),
); );
}, },
); );
@@ -54,14 +66,13 @@ Widget image(
ClipRRect( ClipRRect(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
child: NetworkImgLayer( child: NetworkImgLayer(
src: picArr[index]['img_src'], src: picArr[index].url,
width: imageWidth, width: imageWidth,
height: imageHeight, height: imageHeight,
origAspectRatio: origAspectRatio: picArr[index].width / picArr[index].height,
picArr[index]['img_width'] / picArr[index]['img_height'],
), ),
), ),
if (picArr[index]['img_height'] / picArr[index]['img_width'] > 22 / 9) if (picArr[index].height / picArr[index].width > 22 / 9)
const PBadge( const PBadge(
text: '长图', text: '长图',
right: 8, right: 8,

View File

@@ -33,25 +33,25 @@ Widget articlePanel(item, context, {floor = 1}) {
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
], ],
Text( // Text(
item.modules.moduleDynamic.major.opus.title, // item.modules.moduleDynamic.major.opus.title,
style: Theme.of(context) // style: Theme.of(context)
.textTheme // .textTheme
.titleMedium! // .titleMedium!
.copyWith(fontWeight: FontWeight.bold), // .copyWith(fontWeight: FontWeight.bold),
), // ),
const SizedBox(height: 2), // const SizedBox(height: 2),
if (item.modules.moduleDynamic.major.opus.summary.text != // if (item.modules.moduleDynamic.major.opus.summary.text !=
'undefined') ...[ // 'undefined') ...[
Text( // Text(
item.modules.moduleDynamic.major.opus.summary.richTextNodes.first // item.modules.moduleDynamic.major.opus.summary.richTextNodes.first
.text, // .text,
maxLines: 4, // maxLines: 4,
style: const TextStyle(height: 1.55), // style: const TextStyle(height: 1.55),
overflow: TextOverflow.ellipsis, // overflow: TextOverflow.ellipsis,
), // ),
const SizedBox(height: 2), // const SizedBox(height: 2),
], // ],
picWidget(item, context) picWidget(item, context)
], ],
), ),

View File

@@ -1,4 +1,5 @@
// 内容 // 内容
import 'package:PiliPalaX/common/widgets/imageview.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:PiliPalaX/common/widgets/badge.dart'; import 'package:PiliPalaX/common/widgets/badge.dart';
@@ -38,132 +39,21 @@ class _ContentState extends State<Content> {
} }
InlineSpan picsNodes() { InlineSpan picsNodes() {
List<InlineSpan> spanChildren = []; return WidgetSpan(
int len = pics.length; child: LayoutBuilder(
List<String> picList = []; builder: (_, constraints) => image(
constraints.maxWidth,
if (len == 1) { pics
OpusPicsModel pictureItem = pics.first; .map(
picList.add(pictureItem.url!); (item) => ImageModel(
width: item.width,
/// 图片上方的空白间隔 height: item.height,
// spanChildren.add(const TextSpan(text: '\n')); url: item.url ?? '',
spanChildren.add(
WidgetSpan(
child: LayoutBuilder(
builder: (context, BoxConstraints box) {
double maxWidth = box.maxWidth.truncateToDouble();
double maxHeight = box.maxWidth * 0.6; // 设置最大高度
double height = maxWidth *
0.5 *
(pictureItem.height != null && pictureItem.width != null
? pictureItem.height! / pictureItem.width!
: 1);
return Semantics(
label: '图片1,共1张',
child: GestureDetector(
onTap: () {
showDialog(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(initialPage: 0, imgList: picList);
},
);
},
child: Container(
padding: const EdgeInsets.only(top: 4),
constraints: BoxConstraints(maxHeight: maxHeight),
width: box.maxWidth / 2,
height: height,
child: Stack(
children: [
Positioned.fill(
child: NetworkImgLayer(
src: pictureItem.url,
width: maxWidth / 2,
height: height,
),
),
height > Get.size.height * 0.9
? const PBadge(
text: '长图',
right: 8,
bottom: 8,
)
: const SizedBox(),
],
)),
));
},
),
),
);
}
if (len > 1) {
List<Widget> list = [];
for (var i = 0; i < len; i++) {
picList.add(pics[i].url!);
list.add(
LayoutBuilder(
builder: (context, BoxConstraints box) {
double maxWidth = box.maxWidth.truncateToDouble();
return Semantics(
label: '图片${i + 1},共$len张',
child: GestureDetector(
onTap: () {
showDialog(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(initialPage: i, imgList: picList);
},
);
},
child: NetworkImgLayer(
src: pics[i].url,
width: maxWidth,
height: maxWidth,
origAspectRatio:
pics[i].width!.toInt() / pics[i].height!.toInt(),
),
));
},
),
);
}
spanChildren.add(
WidgetSpan(
child: LayoutBuilder(
builder: (context, BoxConstraints box) {
double maxWidth = box.maxWidth.truncateToDouble();
double crossCount = len < 3 ? 2 : 3;
double height = maxWidth /
crossCount *
(len % crossCount == 0
? len ~/ crossCount
: len ~/ crossCount + 1) +
6;
return Container(
padding: const EdgeInsets.only(top: 6),
height: height,
child: GridView.count(
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: crossCount.toInt(),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
childAspectRatio: 1,
children: list,
), ),
); )
}, .toList(),
),
), ),
); ),
}
return TextSpan(
children: spanChildren,
); );
} }
@@ -197,7 +87,7 @@ class _ContentState extends State<Content> {
/// fix 默认20px高度 /// fix 默认20px高度
style: const TextStyle(height: 0), style: const TextStyle(height: 0),
richNode(widget.item, context), richNode(widget.item, context),
maxLines: 999, maxLines: widget.source == 'detail' ? 999 : 6,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
), ),

View File

@@ -1,4 +1,5 @@
// 转发 // 转发
import 'package:PiliPalaX/common/widgets/imageview.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
@@ -17,134 +18,24 @@ import 'rich_node_panel.dart';
import 'video_panel.dart'; import 'video_panel.dart';
InlineSpan picsNodes(List<OpusPicsModel> pics) { InlineSpan picsNodes(List<OpusPicsModel> pics) {
List<InlineSpan> spanChildren = []; return WidgetSpan(
int len = pics.length; child: LayoutBuilder(
List<String> picList = []; builder: (_, constraints) => image(
constraints.maxWidth,
if (len == 1) { pics
OpusPicsModel pictureItem = pics.first; .map(
picList.add(pictureItem.url!); (item) => ImageModel(
width: item.width,
/// 图片上方的空白间隔 height: item.height,
// spanChildren.add(const TextSpan(text: '\n')); url: item.url ?? '',
spanChildren.add(
WidgetSpan(
child: LayoutBuilder(
builder: (context, BoxConstraints box) {
double maxWidth = box.maxWidth.truncateToDouble();
double maxHeight = box.maxWidth * 0.6; // 设置最大高度
double height = maxWidth *
0.5 *
(pictureItem.height != null && pictureItem.width != null
? pictureItem.height! / pictureItem.width!
: 1);
return Semantics(
label: '图片1,共1张',
child: GestureDetector(
onTap: () {
showDialog(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(initialPage: 0, imgList: picList);
},
);
},
child: Container(
padding: const EdgeInsets.only(top: 4),
constraints: BoxConstraints(maxHeight: maxHeight),
width: box.maxWidth / 2,
height: height,
child: Stack(
children: [
Positioned.fill(
child: NetworkImgLayer(
src: pictureItem.url,
width: maxWidth / 2,
height: height,
),
),
height > Get.size.height * 0.9
? const PBadge(
text: '长图',
right: 8,
bottom: 8,
)
: const SizedBox(),
],
)),
));
},
),
),
);
}
if (len > 1) {
List<Widget> list = [];
for (var i = 0; i < len; i++) {
picList.add(pics[i].url!);
list.add(
LayoutBuilder(
builder: (context, BoxConstraints box) {
double maxWidth = box.maxWidth.truncateToDouble();
return Semantics(
label: '图片${i + 1},共$len张',
child: GestureDetector(
onTap: () {
showDialog(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(initialPage: i, imgList: picList);
},
);
},
child: NetworkImgLayer(
src: pics[i].url,
width: maxWidth,
height: maxWidth,
origAspectRatio:
pics[i].width!.toInt() / pics[i].height!.toInt(),
),
));
},
),
);
}
spanChildren.add(
WidgetSpan(
child: LayoutBuilder(
builder: (context, BoxConstraints box) {
double maxWidth = box.maxWidth.truncateToDouble();
double crossCount = len < 3 ? 2 : 3;
double height = maxWidth /
crossCount *
(len % crossCount == 0
? len ~/ crossCount
: len ~/ crossCount + 1) +
6;
return Container(
padding: const EdgeInsets.only(top: 6),
height: height,
child: GridView.count(
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: crossCount.toInt(),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
childAspectRatio: 1,
children: list,
), ),
); )
}, .toList(),
),
), ),
); ),
}
return TextSpan(
children: spanChildren,
); );
} }
Widget forWard(item, context, ctr, source, {floor = 1}) { Widget forWard(item, context, ctr, source, {floor = 1}) {
TextStyle authorStyle = TextStyle authorStyle =
TextStyle(color: Theme.of(context).colorScheme.primary); TextStyle(color: Theme.of(context).colorScheme.primary);
@@ -237,11 +128,12 @@ Widget forWard(item, context, ctr, source, {floor = 1}) {
return videoSeasonWidget(item, context, 'archive', floor: floor); return videoSeasonWidget(item, context, 'archive', floor: floor);
// 文章 // 文章
case 'DYNAMIC_TYPE_ARTICLE': case 'DYNAMIC_TYPE_ARTICLE':
return Container( return articlePanel(item, context, floor: floor);
padding: // return Container(
const EdgeInsets.only(left: 10, top: 12, right: 10, bottom: 10), // padding:
color: Theme.of(context).dividerColor.withOpacity(0.08), // const EdgeInsets.only(left: 10, top: 12, right: 10, bottom: 10),
child: articlePanel(item, context, floor: floor)); // color: Theme.of(context).dividerColor.withOpacity(0.08),
// child: articlePanel(item, context, floor: floor));
// 转发 // 转发
case 'DYNAMIC_TYPE_FORWARD': case 'DYNAMIC_TYPE_FORWARD':
return InkWell( return InkWell(

View File

@@ -1,105 +1,25 @@
import 'package:PiliPalaX/common/widgets/imageview.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:PiliPalaX/common/constants.dart';
import 'package:PiliPalaX/common/widgets/badge.dart';
import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
import 'package:PiliPalaX/pages/preview/index.dart';
Widget picWidget(item, context) { Widget picWidget(item, context) {
String type = item.modules.moduleDynamic.major.type; String type = item.modules.moduleDynamic.major.type;
List pictures = [];
if (type == 'MAJOR_TYPE_OPUS') { if (type == 'MAJOR_TYPE_OPUS') {
/// fix 图片跟rich_node_panel重复 /// fix 图片跟rich_node_panel重复
// pictures = item.modules.moduleDynamic.major.opus.pics; // pictures = item.modules.moduleDynamic.major.opus.pics;
return const SizedBox(); return const SizedBox();
} }
if (type == 'MAJOR_TYPE_DRAW') {
pictures = item.modules.moduleDynamic.major.draw.items;
}
int len = pictures.length;
List<String> picList = [];
List<Widget> list = [];
for (var i = 0; i < len; i++) {
picList.add(pictures[i].src ?? pictures[i].url);
list.add(
LayoutBuilder(
builder: (context, BoxConstraints box) {
return GestureDetector(
onTap: () {
showDialog(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(initialPage: i, imgList: picList);
},
);
},
child: NetworkImgLayer(
src: pictures[i].src ?? pictures[i].url,
width: box.maxWidth,
height: box.maxWidth,
),
// ),
);
},
),
);
}
return LayoutBuilder( return LayoutBuilder(
builder: (context, BoxConstraints box) { builder: (_, constraints) => image(
double maxWidth = box.maxWidth; constraints.maxWidth,
double aspectRatio = 1.0; (item.modules.moduleDynamic.major.draw.items as List)
double origAspectRatio = 0.0; .map(
double crossCount = 3; (item) => ImageModel(
width: item.width,
double height = 0.0; height: item.height,
if (len == 1) { url: item.url ?? '',
try {
origAspectRatio =
aspectRatio = pictures.first.width / pictures.first.height;
} catch (_) {}
if (aspectRatio < 0.4) {
aspectRatio = 0.4;
}
if (origAspectRatio < 0.5 || pictures.first.width < 1920) {
crossCount = 2;
height = maxWidth / 2 / aspectRatio;
}
} else {
aspectRatio = 1;
height =
maxWidth / crossCount * ((len + crossCount - 1) ~/ crossCount) + 6;
}
return Container(
padding: const EdgeInsets.only(top: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(StyleString.imgRadius.x),
),
clipBehavior: Clip.hardEdge,
height: height,
child: Stack(
children: [
GridView.count(
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: crossCount.toInt(),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
childAspectRatio: aspectRatio,
children: list,
), ),
if (len == 1 && height > Get.size.height * 0.9) )
const PBadge( .toList(),
text: '长图', ),
top: null,
right: null,
bottom: 6.0,
left: 6.0,
type: 'gray',
)
],
),
);
},
); );
} }

View File

@@ -927,142 +927,25 @@ InlineSpan buildContent(
} }
// 图片渲染 // 图片渲染
if (content.pictures.isNotEmpty) { if (content.pictures.isNotEmpty) {
// final List<String> picList = <String>[];
// final int len = content.pictures.length;
spanChildren.add(const TextSpan(text: '\n')); spanChildren.add(const TextSpan(text: '\n'));
spanChildren.add( spanChildren.add(
WidgetSpan( WidgetSpan(
child: LayoutBuilder( child: LayoutBuilder(
builder: (_, constraints) => image( builder: (_, constraints) => image(
constraints.maxWidth, constraints.maxWidth,
content.pictures, (content.pictures as List)
.map(
(item) => ImageModel(
width: item['img_width'],
height: item['img_height'],
url: item['img_src'],
),
)
.toList(),
), ),
), ),
), ),
); );
// if (len == 1) {
// Map pictureItem = content.pictures.first;
// picList.add(pictureItem['img_src']);
// spanChildren.add(
// WidgetSpan(
// child: LayoutBuilder(
// builder: (BuildContext context, BoxConstraints box) {
// double maxHeight = box.maxWidth * 0.6; // 设置最大高度
// // double width = (box.maxWidth / 2).truncateToDouble();
// double height = 100;
// try {
// height = ((box.maxWidth /
// 2 *
// pictureItem['img_height'] /
// pictureItem['img_width']))
// .truncateToDouble();
// } catch (_) {}
// return GestureDetector(
// onTap: () {
// showDialog(
// useSafeArea: false,
// context: context,
// builder: (BuildContext context) {
// return ImagePreview(initialPage: 0, imgList: picList);
// },
// );
// },
// child: Container(
// padding: const EdgeInsets.only(top: 4),
// constraints: BoxConstraints(maxHeight: maxHeight),
// width: box.maxWidth / 2,
// height: height,
// child: Stack(
// children: [
// Positioned.fill(
// child: NetworkImgLayer(
// src: pictureItem['img_src'],
// width: box.maxWidth / 2,
// height: height,
// semanticsLabel: '图片1共1张',
// ),
// ),
// height > Get.size.height * 0.9
// ? const PBadge(
// text: '长图',
// right: 8,
// bottom: 8,
// )
// : const SizedBox(),
// ],
// ),
// ),
// );
// },
// ),
// ),
// );
// } else if (len > 1) {
// List<Widget> list = [];
// for (var i = 0; i < len; i++) {
// picList.add(content.pictures[i]['img_src']);
// list.add(
// LayoutBuilder(
// builder: (context, BoxConstraints box) {
// return GestureDetector(
// onTap: () {
// showDialog(
// useSafeArea: false,
// context: context,
// builder: (context) {
// return ImagePreview(initialPage: i, imgList: picList);
// },
// );
// },
// child: NetworkImgLayer(
// src: content.pictures[i]['img_src'],
// width: box.maxWidth,
// height: box.maxWidth,
// origAspectRatio: content.pictures[i]['img_width'] /
// content.pictures[i]['img_height'],
// semanticsLabel: '图片${i + 1},共$len张',
// ),
// );
// },
// ),
// );
// }
// spanChildren.add(
// WidgetSpan(
// // child: NineGridView(),
// child: Semantics(
// explicitChildNodes: true,
// container: true,
// child: LayoutBuilder(
// builder: (context, BoxConstraints box) {
// double maxWidth = box.maxWidth;
// double crossCount = len < 3 ? 2 : 3;
// double height = maxWidth /
// crossCount *
// (len % crossCount == 0
// ? len ~/ crossCount
// : len ~/ crossCount + 1) +
// 6;
// return Container(
// padding: const EdgeInsets.only(top: 6),
// height: height,
// child: GridView.count(
// padding: EdgeInsets.zero,
// physics: const NeverScrollableScrollPhysics(),
// crossAxisCount: crossCount.toInt(),
// mainAxisSpacing: 4.0,
// crossAxisSpacing: 4.0,
// childAspectRatio: 1,
// children: list,
// ),
// );
// },
// ),
// ),
// ),
// );
// }
} }
// 笔记链接 // 笔记链接