flutter - Flutter 以最小宽度对齐列中的特定小部件
问题描述
我正在我的颤振应用程序上实现聊天,我希望我的聊天时间在列的右侧对齐(所有其他小部件都应该向左对齐)。
我的问题是,当我alignment.bottomRight
在列中使用时,它会将列宽扩展到max
(并且我想保留它min
)。
问题:
我想要达到的目标:
我的专栏:
return Bubble(
margin: BubbleEdges.only(top: 5, bottom: 5),
elevation: 0.6,
alignment: Alignment.topLeft,
nip: BubbleNip.leftTop,
radius: Radius.circular(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
getUserChatTitle(document['userId']),
Padding(
padding: const EdgeInsets.only(top: 3, bottom: 5),
child: SelectableLinkify(
onOpen: onOpenLink,
text: "Text Text Text",
textAlign:
intl.Bidi.detectRtlDirectionality(document['content'])
? TextAlign.right
: TextAlign.left,
textDirection:
intl.Bidi.detectRtlDirectionality(document['content'])
? ui.TextDirection.rtl
: ui.TextDirection.ltr,
style: TextStyle(
fontSize: 16,
height: 1.35,
letterSpacing: -0.1,
fontFamily: 'Arimo',
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Text(
formatTimestampToString(document['timestamp']),
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.grey,
fontSize: 12,
),
),
),
],
),
);
解决方案
这确实不是那么容易,因为您希望气泡具有“未定义”的宽度 - 它应该适应实际消息的长度,在运行时实际放置/绘制小部件之前,该长度是未知的。我的建议是使用 a Stack
- 我也在 a 中使用它,ListView.builder
这可能是所需的用例。请务必阅读我在代码块中的评论:
ListView.builder(
itemCount: 5,
itemBuilder: (context, index) => UnconstrainedBox(
/// Decide whether a message has been received or written by yourself (left or right side)
alignment:
index % 2 == 0 ? Alignment.centerLeft : Alignment.centerRight,
/// ConstrainedBox to make sure chat bubbles don't go from left to right if they are too big - you can change it or even remove it if it's not what you want
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width / 1.5),
child: Bubble(
margin: BubbleEdges.only(top: 5, bottom: 5),
elevation: 0.6,
/// Alignment and nip has to be adjusted here too
alignment:
index % 2 == 0 ? Alignment.topLeft : Alignment.topRight,
nip: index % 2 == 0 ? BubbleNip.leftTop : BubbleNip.rightTop,
radius: Radius.circular(10),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('TestUser'),
Padding(
padding: const EdgeInsets.only(top: 3, bottom: 5),
child: Text(
'Text ' * Random().nextInt(50),
style: TextStyle(
fontSize: 16,
height: 1.35,
letterSpacing: -0.1,
),
),
),
/// Adjust the space you want between the actual message and the timestamp here, you could also use a Text widget to use the same height as the actual timestamp - as you like
SizedBox(height: 18.0),
],
),
Positioned(
bottom: 0,
right: 0,
child: Text(
'08.09.2021',
style: TextStyle(
color: Colors.grey,
fontSize: 12,
),
),
),
],
),
),
),
),
),
推荐阅读
- python - 使用 pip 安装后的 matplotlib 错误
- oracle - 在 oracle PLSQL 中以以下给定方式对特定列应用分组并设置记录的顺序
- html - 如何使用 CSS/SVG 创建这个形状?
- algorithm - 如何找到元素之间的最小距离大于某个值且元素值之和最大的子集?
- sqldatareader - 如何使用 SQL Data Reader 查看数据库中的数量?
- ios - iOS 中最简单的 webview 应用程序 - 无法运行
- visual-studio-code - 从 VScode 打开 JupyterNotebook 到浏览器
- python - 使用 OpenCV 检测人脸时相机滞后
- c++ - CMake 不会链接我的库,make 文件会
- python - 如何在 python 中不使用 itertools 组合数据框?