Better link expand layout on large screen

This commit is contained in:
LittleSheep 2024-08-19 20:13:08 +08:00
parent e45d9b39d5
commit 32e6658f3d
2 changed files with 87 additions and 72 deletions

View File

@ -32,83 +32,90 @@ class LinkExpansion extends StatelessWidget {
final LinkExpandController expandController = Get.find(); final LinkExpandController expandController = Get.find();
return Column( return Wrap(
children: matches.map((x) { children: matches.map((x) {
return FutureBuilder( return Container(
future: expandController.expandLink(x.group(0)!), constraints: BoxConstraints(
builder: (context, snapshot) { maxWidth: matches.length == 1 ? 480 : 340,
if (!snapshot.hasData) { ),
return const SizedBox(); child: FutureBuilder(
} future: expandController.expandLink(x.group(0)!),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const SizedBox();
}
final isRichDescription = [ final isRichDescription = [
"solsynth.dev", "solsynth.dev",
].contains(Uri.parse(snapshot.data!.url).host); ].contains(Uri.parse(snapshot.data!.url).host);
return GestureDetector( return GestureDetector(
child: Card( child: Card(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
if ([ if ([
(snapshot.data!.icon?.isNotEmpty ?? false), (snapshot.data!.icon?.isNotEmpty ?? false),
snapshot.data!.siteName != null snapshot.data!.siteName != null
].any((x) => x)) ].any((x) => x))
Row( Row(
children: [ children: [
if (snapshot.data!.icon?.isNotEmpty ?? false) if (snapshot.data!.icon?.isNotEmpty ?? false)
ClipRRect( ClipRRect(
borderRadius: const BorderRadius.all( borderRadius: const BorderRadius.all(
Radius.circular(8), Radius.circular(8),
),
child: _buildImage(
snapshot.data!.icon!,
width: 32,
height: 32,
),
).paddingOnly(right: 8),
if (snapshot.data!.siteName != null)
Text(
snapshot.data!.siteName!,
style: Theme.of(context).textTheme.labelLarge,
), ),
child: _buildImage( ],
snapshot.data!.icon!, ).paddingOnly(
width: 32, bottom: (snapshot.data!.icon?.isNotEmpty ?? false)
height: 32, ? 8
), : 4,
).paddingOnly(right: 8),
if (snapshot.data!.siteName != null)
Text(
snapshot.data!.siteName!,
style: Theme.of(context).textTheme.labelLarge,
),
],
).paddingOnly(
bottom:
(snapshot.data!.icon?.isNotEmpty ?? false) ? 8 : 4,
),
if (snapshot.data!.image != null &&
(snapshot.data!.image?.startsWith('http') ?? false))
ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(8),
), ),
child: _buildImage( if (snapshot.data!.image != null &&
snapshot.data!.image!, (snapshot.data!.image?.startsWith('http') ?? false))
), ClipRRect(
).paddingOnly(bottom: 8), borderRadius: const BorderRadius.all(
Text( Radius.circular(8),
snapshot.data!.title ?? 'No Title', ),
maxLines: 1, child: _buildImage(
overflow: TextOverflow.fade, snapshot.data!.image!,
style: Theme.of(context).textTheme.bodyLarge, ),
), ).paddingOnly(bottom: 8),
if (snapshot.data!.description != null && isRichDescription)
MarkdownBody(data: snapshot.data!.description!)
else if (snapshot.data!.description != null)
Text( Text(
snapshot.data!.description!, snapshot.data!.title ?? 'No Title',
maxLines: 3, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.bodyLarge,
), ),
], if (snapshot.data!.description != null &&
).paddingAll(12), isRichDescription)
), MarkdownBody(data: snapshot.data!.description!)
onTap: () { else if (snapshot.data!.description != null)
launchUrlString(x.group(0)!); Text(
}, snapshot.data!.description!,
); maxLines: 3,
}, overflow: TextOverflow.ellipsis,
),
],
).paddingAll(12),
),
onTap: () {
launchUrlString(x.group(0)!);
},
);
},
),
); );
}).toList(), }).toList(),
); );

View File

@ -447,9 +447,17 @@ class _PostItemState extends State<PostItem> {
], ],
), ),
if (widget.item.replyTo != null && widget.isShowEmbed) if (widget.item.replyTo != null && widget.isShowEmbed)
_buildReply(context).paddingOnly(top: 4), Container(
constraints: const BoxConstraints(maxWidth: 480),
padding: const EdgeInsets.only(top: 4),
child: _buildReply(context),
),
if (widget.item.repostTo != null && widget.isShowEmbed) if (widget.item.repostTo != null && widget.isShowEmbed)
_buildRepost(context).paddingOnly(top: 4), Container(
constraints: const BoxConstraints(maxWidth: 480),
padding: const EdgeInsets.only(top: 4),
child: _buildRepost(context),
),
_buildFooter().paddingOnly(left: 12), _buildFooter().paddingOnly(left: 12),
LinkExpansion(content: item.body['content']) LinkExpansion(content: item.body['content'])
.paddingOnly(top: 4), .paddingOnly(top: 4),