From bd44bf5c9ea177b744a24f02b0f27bfd07ced0fb Mon Sep 17 00:00:00 2001 From: bggRGjQaUbCoE Date: Sun, 29 Sep 2024 19:59:08 +0800 Subject: [PATCH] opt: images showing --- lib/common/widgets/imageview.dart | 27 +++- lib/pages/dynamics/widgets/article_panel.dart | 38 ++--- lib/pages/dynamics/widgets/content_panel.dart | 140 ++-------------- lib/pages/dynamics/widgets/forward_panel.dart | 150 +++--------------- lib/pages/dynamics/widgets/pic_panel.dart | 104 ++---------- .../detail/reply/widgets/reply_item.dart | 135 ++-------------- 6 files changed, 95 insertions(+), 499 deletions(-) diff --git a/lib/common/widgets/imageview.dart b/lib/common/widgets/imageview.dart index 7aa729ef..2ea47189 100644 --- a/lib/common/widgets/imageview.dart +++ b/lib/common/widgets/imageview.dart @@ -6,15 +6,27 @@ import 'package:PiliPalaX/common/widgets/nine_grid_view.dart'; import 'package:PiliPalaX/pages/preview/view.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( double maxWidth, - List picArr, + List picArr, ) { double imageWidth = (maxWidth - 2 * 5) / 3; double imageHeight = imageWidth; if (picArr.length == 1) { - dynamic width = picArr[0]['img_width']; - dynamic height = picArr[0]['img_height']; + dynamic width = picArr[0].width; + dynamic height = picArr[0].height; double ratioWH = width / height; double ratioHW = height / width; double maxRatio = 22 / 9; @@ -44,7 +56,7 @@ Widget image( builder: (context) { return ImagePreview( 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( borderRadius: BorderRadius.circular(12), child: NetworkImgLayer( - src: picArr[index]['img_src'], + src: picArr[index].url, width: imageWidth, height: imageHeight, - origAspectRatio: - picArr[index]['img_width'] / picArr[index]['img_height'], + origAspectRatio: picArr[index].width / picArr[index].height, ), ), - if (picArr[index]['img_height'] / picArr[index]['img_width'] > 22 / 9) + if (picArr[index].height / picArr[index].width > 22 / 9) const PBadge( text: '长图', right: 8, diff --git a/lib/pages/dynamics/widgets/article_panel.dart b/lib/pages/dynamics/widgets/article_panel.dart index c48c619f..73e26fda 100644 --- a/lib/pages/dynamics/widgets/article_panel.dart +++ b/lib/pages/dynamics/widgets/article_panel.dart @@ -33,25 +33,25 @@ Widget articlePanel(item, context, {floor = 1}) { ), const SizedBox(height: 8), ], - Text( - item.modules.moduleDynamic.major.opus.title, - style: Theme.of(context) - .textTheme - .titleMedium! - .copyWith(fontWeight: FontWeight.bold), - ), - const SizedBox(height: 2), - if (item.modules.moduleDynamic.major.opus.summary.text != - 'undefined') ...[ - Text( - item.modules.moduleDynamic.major.opus.summary.richTextNodes.first - .text, - maxLines: 4, - style: const TextStyle(height: 1.55), - overflow: TextOverflow.ellipsis, - ), - const SizedBox(height: 2), - ], + // Text( + // item.modules.moduleDynamic.major.opus.title, + // style: Theme.of(context) + // .textTheme + // .titleMedium! + // .copyWith(fontWeight: FontWeight.bold), + // ), + // const SizedBox(height: 2), + // if (item.modules.moduleDynamic.major.opus.summary.text != + // 'undefined') ...[ + // Text( + // item.modules.moduleDynamic.major.opus.summary.richTextNodes.first + // .text, + // maxLines: 4, + // style: const TextStyle(height: 1.55), + // overflow: TextOverflow.ellipsis, + // ), + // const SizedBox(height: 2), + // ], picWidget(item, context) ], ), diff --git a/lib/pages/dynamics/widgets/content_panel.dart b/lib/pages/dynamics/widgets/content_panel.dart index 107d0032..204f3d7a 100644 --- a/lib/pages/dynamics/widgets/content_panel.dart +++ b/lib/pages/dynamics/widgets/content_panel.dart @@ -1,4 +1,5 @@ // 内容 +import 'package:PiliPalaX/common/widgets/imageview.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:PiliPalaX/common/widgets/badge.dart'; @@ -38,132 +39,21 @@ class _ContentState extends State { } InlineSpan picsNodes() { - List spanChildren = []; - int len = pics.length; - List picList = []; - - if (len == 1) { - OpusPicsModel pictureItem = pics.first; - picList.add(pictureItem.url!); - - /// 图片上方的空白间隔 - // spanChildren.add(const TextSpan(text: '\n')); - 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 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, + return WidgetSpan( + child: LayoutBuilder( + builder: (_, constraints) => image( + constraints.maxWidth, + pics + .map( + (item) => ImageModel( + width: item.width, + height: item.height, + url: item.url ?? '', ), - ); - }, - ), + ) + .toList(), ), - ); - } - return TextSpan( - children: spanChildren, + ), ); } @@ -197,7 +87,7 @@ class _ContentState extends State { /// fix 默认20px高度 style: const TextStyle(height: 0), richNode(widget.item, context), - maxLines: 999, + maxLines: widget.source == 'detail' ? 999 : 6, overflow: TextOverflow.ellipsis, ), ), diff --git a/lib/pages/dynamics/widgets/forward_panel.dart b/lib/pages/dynamics/widgets/forward_panel.dart index 16b75b9e..e7f57b1b 100644 --- a/lib/pages/dynamics/widgets/forward_panel.dart +++ b/lib/pages/dynamics/widgets/forward_panel.dart @@ -1,4 +1,5 @@ // 转发 +import 'package:PiliPalaX/common/widgets/imageview.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:get/get.dart'; @@ -17,134 +18,24 @@ import 'rich_node_panel.dart'; import 'video_panel.dart'; InlineSpan picsNodes(List pics) { - List spanChildren = []; - int len = pics.length; - List picList = []; - - if (len == 1) { - OpusPicsModel pictureItem = pics.first; - picList.add(pictureItem.url!); - - /// 图片上方的空白间隔 - // spanChildren.add(const TextSpan(text: '\n')); - 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 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, + return WidgetSpan( + child: LayoutBuilder( + builder: (_, constraints) => image( + constraints.maxWidth, + pics + .map( + (item) => ImageModel( + width: item.width, + height: item.height, + url: item.url ?? '', ), - ); - }, - ), + ) + .toList(), ), - ); - } - return TextSpan( - children: spanChildren, + ), ); } + Widget forWard(item, context, ctr, source, {floor = 1}) { TextStyle authorStyle = 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); // 文章 case 'DYNAMIC_TYPE_ARTICLE': - return Container( - padding: - const EdgeInsets.only(left: 10, top: 12, right: 10, bottom: 10), - color: Theme.of(context).dividerColor.withOpacity(0.08), - child: articlePanel(item, context, floor: floor)); + return articlePanel(item, context, floor: floor); + // return Container( + // padding: + // const EdgeInsets.only(left: 10, top: 12, right: 10, bottom: 10), + // color: Theme.of(context).dividerColor.withOpacity(0.08), + // child: articlePanel(item, context, floor: floor)); // 转发 case 'DYNAMIC_TYPE_FORWARD': return InkWell( diff --git a/lib/pages/dynamics/widgets/pic_panel.dart b/lib/pages/dynamics/widgets/pic_panel.dart index 354f830a..0652d054 100644 --- a/lib/pages/dynamics/widgets/pic_panel.dart +++ b/lib/pages/dynamics/widgets/pic_panel.dart @@ -1,105 +1,25 @@ +import 'package:PiliPalaX/common/widgets/imageview.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) { String type = item.modules.moduleDynamic.major.type; - List pictures = []; if (type == 'MAJOR_TYPE_OPUS') { /// fix 图片跟rich_node_panel重复 // pictures = item.modules.moduleDynamic.major.opus.pics; return const SizedBox(); } - if (type == 'MAJOR_TYPE_DRAW') { - pictures = item.modules.moduleDynamic.major.draw.items; - } - int len = pictures.length; - List picList = []; - List 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( - builder: (context, BoxConstraints box) { - double maxWidth = box.maxWidth; - double aspectRatio = 1.0; - double origAspectRatio = 0.0; - double crossCount = 3; - - double height = 0.0; - if (len == 1) { - 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, + builder: (_, constraints) => image( + constraints.maxWidth, + (item.modules.moduleDynamic.major.draw.items as List) + .map( + (item) => ImageModel( + width: item.width, + height: item.height, + url: item.url ?? '', ), - if (len == 1 && height > Get.size.height * 0.9) - const PBadge( - text: '长图', - top: null, - right: null, - bottom: 6.0, - left: 6.0, - type: 'gray', - ) - ], - ), - ); - }, + ) + .toList(), + ), ); } diff --git a/lib/pages/video/detail/reply/widgets/reply_item.dart b/lib/pages/video/detail/reply/widgets/reply_item.dart index ce16e051..2e381285 100644 --- a/lib/pages/video/detail/reply/widgets/reply_item.dart +++ b/lib/pages/video/detail/reply/widgets/reply_item.dart @@ -927,142 +927,25 @@ InlineSpan buildContent( } // 图片渲染 if (content.pictures.isNotEmpty) { - // final List picList = []; - // final int len = content.pictures.length; spanChildren.add(const TextSpan(text: '\n')); spanChildren.add( WidgetSpan( child: LayoutBuilder( builder: (_, constraints) => image( 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 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, - // ), - // ); - // }, - // ), - // ), - // ), - // ); - // } } // 笔记链接