From e912ab1fb44932776a554297a2492e9e16c5acfa Mon Sep 17 00:00:00 2001 From: zsw Date: Fri, 27 Sep 2024 19:30:36 +0800 Subject: [PATCH] message list image async resize --- lib/im/chat_details_page.dart | 135 ++++++++++++++++++++-------------- 1 file changed, 80 insertions(+), 55 deletions(-) diff --git a/lib/im/chat_details_page.dart b/lib/im/chat_details_page.dart index 7f488884..0e01fae5 100644 --- a/lib/im/chat_details_page.dart +++ b/lib/im/chat_details_page.dart @@ -1,3 +1,4 @@ +import 'dart:async'; import 'dart:convert'; import 'dart:io'; import 'dart:ui'; @@ -107,6 +108,7 @@ class _ChatDetailsPage extends State Future refresh() async { List messagePage = await hxDatabase.queryUList(conversation, page: page + 1, pageSize: 10); + debugPrint("refresh-message-list: ${messagePage.length} page: $page"); if (messagePage.isEmpty) { refreshController.loadNoData(); return; @@ -855,33 +857,31 @@ class _ChatDetailsPage extends State SizedBox( width: 12.w, ), - Expanded( - // flex: 3, - child: Container( - // decoration: BoxDecoration( - // borderRadius: BorderRadius.circular(6), - // color: Color(0xFFFFFFFF), - // boxShadow: [ - // BoxShadow( - // color: Color(0xFFA8A3A3).withAlpha(12), - // offset: Offset(0, 4), - // blurRadius: 4, - // spreadRadius: 0, - // ), - // ], - // ), - child: GestureDetector( - onLongPress: () { - setState(() {}); - }, - child: Image.file( - File(messages[position].attach), - width: 180.h, - height: 200.h, - fit: BoxFit.contain, - ), - ), - ), + GestureDetector( + onLongPress: () { + setState(() {}); + }, + onTap:(){}, + child: FutureBuilder( + future: fetchImageSize(messages[position].attach), + builder: (BuildContext context, AsyncSnapshot snapshot) { + if (snapshot.connectionState == ConnectionState.waiting || snapshot.hasError) { + return Image.file( + File(messages[position].attach), + width: 180.w, + height: 200.h, + fit: BoxFit.contain, + ); + } else { + return Image.file( + File(messages[position].attach), + width: snapshot.data.width, + height: snapshot.data.height, + fit: BoxFit.cover, + ); + } + }, + ), ), Spacer(), ], @@ -895,34 +895,31 @@ class _ChatDetailsPage extends State child: Row( children: [ Spacer(), - Expanded( - // flex: 3, - child: Container( - // decoration: BoxDecoration( - // borderRadius: BorderRadius.circular(6), - // color: Color(0xFFFFFFFF), - // boxShadow: [ - // BoxShadow( - // color: Color(0xFFA8A3A3).withAlpha(12), - // offset: Offset(0, 4), - // blurRadius: 4, - // spreadRadius: 0, - // ), - // ], - // ), - child: GestureDetector( - onLongPress: () { - setState(() {}); - }, - onTap:(){}, - child: Image.file( - File(messages[position].attach), - width: 180.h, - height: 200.h, - fit: BoxFit.contain, - ), - ), - ), + GestureDetector( + onLongPress: () { + setState(() {}); + }, + onTap:(){}, + child: FutureBuilder( + future: fetchImageSize(messages[position].attach), + builder: (BuildContext context, AsyncSnapshot snapshot) { + if (snapshot.connectionState == ConnectionState.waiting || snapshot.hasError) { + return Image.file( + File(messages[position].attach), + width: 180.w, + height: 200.h, + fit: BoxFit.contain, + ); + } else { + return Image.file( + File(messages[position].attach), + width: snapshot.data.width, + height: snapshot.data.height, + fit: BoxFit.cover, + ); + } + }, + ), ), SizedBox( width: 12.w, @@ -959,6 +956,34 @@ class _ChatDetailsPage extends State ); } + Future fetchImageSize(String imagePath) async { + Size size = Size.zero; + Completer completer = Completer(); + Image.file( + File(imagePath), + ).image.resolve(ImageConfiguration()) + .addListener(ImageStreamListener((image, synchronousCall) { + size = Size((image.image.width ?? 0).toDouble(), (image.image.height ?? 0).toDouble()); + size = resizeImage(size); + completer.complete(size); + })); + return completer.future; + } + + // + resizeImage(Size size) { + if (size.width > 180 || size.height > 200) { + if (size.width > size.height) { + int height = size.height ~/ (size.width ~/ 180); + size = Size(180, height.toDouble()); + } else { + int width = size.width ~/ (size.height ~/ 200); + size = Size(width.toDouble(), 200); + } + } + return size; + } + ///富文本输入框 Widget input() { return Container(