作者:阁下贵姓 | 来源:互联网 | 2022-12-01 19:46
许多本地移动聊天Messenger(例如电报,whatsapp等)都实现了这种包装行为:在没有足够的文本空间时,将时间标签包装到新的一行。
简单的聊天气泡由两部分组成:文本和时间标签。在简单的情况下,它们几乎位于同一基线上。即使文本是多行(基线与最后一行)。但是在某些情况下,当没有可用空间并且文本试图相交时,会在气泡底部添加一个缩进。
如果我通过图片和视频显示它,将很容易理解:
和2个视频:
多行https://youtu.be/eigLIHWaub8
单行https://youtu.be/9GMDFYwMqdU
如何在Flutter上实现它?
1> 小智..:
您可以在第一层上使用带有假占位符的Stack作为时间(或其他信息),在第二层上使用实际定位的文本。
class CustomCard extends StatelessWidget {
final String msg;
final String additionalInfo;
CustomCard({
@required this.msg,
this.additiOnalInfo= ""
});
@override
Widget build(BuildContext context) {
return Card(
child: Stack(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: RichText(
text: TextSpan(
children: [
//real message
TextSpan(
text: msg + " ",
style: Theme.of(context).textTheme.subtitle,
),
//fake additionalInfo as placeholder
TextSpan(
text: additionalInfo,
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1)
)
),
],
),
),
),
//real additionalInfo
Positioned(
child: Text(
additionalInfo,
style: TextStyle(
fontSize: 12.0,
),
),
right: 8.0,
bottom: 4.0,
)
],
),
);
}
结果可以像这样:
结果截图