Flutter聊天界面：如何将消息时间置于头像右上角

要把最后一条消息的时间放在头像右上角，你可以用Stack组件实现叠加布局，完全不会影响用户名和消息内容的原有位置。具体修改如下：

将原来单独的头像组件替换成Stack，把时间文本通过Positioned定位到头像右上角：

child: Column(
  children: [
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 用Stack包裹头像和时间，实现叠加
        Stack(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(60),
              child: Image.asset(
                "images/churka.jpg",
                height: 60,
                width: 60,
                fit: BoxFit.cover,
              ),
            ),
            // 定位时间到头像右上角
            Positioned(
              right: 2,
              top: 2,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  '11:11',
                  style: TextStyle(
                    color: Color.fromRGBO(87, 87, 87, 1.0),
                    fontSize: 12, // 缩小字体适配头像尺寸
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ),
            ),
          ],
        ),
        SizedBox(width: 10.0),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 10),
            Text(
              'Человек',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
            ),
            Text(
              'Как дела',
              style: TextStyle(
                color: Color.fromRGBO(87, 87, 87, 1.0),
                fontSize: 16,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
        // 移除原来单独放在Row右侧的时间文本
      ],
    ),
  ],
),

关键说明： #

• Stack让头像和时间处于同一层级，实现叠加效果，不会干扰其他布局
• Positioned的right和top属性可以调整时间在头像上的具体位置，可根据需求修改数值
• 给时间加白色背景和圆角，避免和头像图案混淆，提升可读性
• 缩小时间字体尺寸，更贴合头像大小

内容的提问来源于stack exchange，提问作者Faer Bot