SwiftUI实现文本末尾右上角显示圆点指示器的问题

我希望蓝色圆点指示器显示在文本（比如"Building O"）的末尾右上角（如截图中红点位置），但目前设置的.topTrailing让它出现在列表单元格的末尾，而非文本末尾。

代码：

HStack {
    Text("Building O")
        .frame(maxWidth: .infinity, alignment: .leading)
        .fixedSize(horizontal: false, vertical: true)
        .overlay(alignment: .topTrailing) {
            Image(systemName:"circle.fill").resizable().foregroundColor(.blue).frame(width: 5.0, height: 5.0)
        }
    Spacer()
    Image(systemName: "checkmark").padding(.trailing, 5.0).font(.body).foregroundColor(.blue)
}

截图：

解决方案 #

问题核心是你给Text添加了frame(maxWidth: .infinity)，这会让文本框宽度撑满整个可用区域，导致overlay的.topTrailing定位到了整个单元格的右上角，而非文本本身的右上角。

方法1：用HStack包裹文本和圆点（推荐） #

直接把文本和圆点放在同一个HStack里，通过微调偏移让圆点贴合文本右上角：

HStack {
    HStack(alignment: .top, spacing: 2) {
        Text("Building O")
            .fixedSize(horizontal: false, vertical: true)
        Image(systemName:"circle.fill")
            .resizable()
            .foregroundColor(.blue)
            .frame(width: 5.0, height: 5.0)
            .offset(y: -2) // 向上偏移，贴合文本右上角
    }
    Spacer()
    Image(systemName: "checkmark")
        .padding(.trailing, 5.0)
        .font(.body)
        .foregroundColor(.blue)
}

方法2：移除撑满宽度的frame #

如果需要保留overlay的写法，只需移除frame(maxWidth: .infinity)，让文本框宽度仅包裹自身内容，这样.topTrailing就会对应文本的右上角：

HStack {
    Text("Building O")
        .fixedSize(horizontal: false, vertical: true)
        .overlay(alignment: .topTrailing) {
            Image(systemName:"circle.fill").resizable().foregroundColor(.blue).frame(width: 5.0, height: 5.0)
        }
    Spacer()
    Image(systemName: "checkmark").padding(.trailing, 5.0).font(.body).foregroundColor(.blue)
}

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