SwiftUI中HStack文本对齐优化：固定用户名位置与数字右对齐

要实现无论数字位数多少、是否高亮，用户名都保持垂直对齐，同时数字右对齐的效果，核心是给数字文本设置固定宽度的容器并让数字在容器内右对齐，避免数字宽度变化影响用户名的位置。

修改后的代码 #

struct ContentFirst: Identifiable {
    var id = UUID()
    let number: Int
    let userName: String
    let info: String
}

struct FirstViewFourthSegment: View {
    var contentFirst: [ContentFirst] = [
        ContentFirst(number: 5, userName: "user5", info: "123"),
        ContentFirst(number: 11, userName: "user11", info: "123"),
        ContentFirst(number: 3, userName: "user3", info: "123"),
        ContentFirst(number: 7, userName: "user7", info: "123"),
        ContentFirst(number: 8, userName: "user8", info: "123"),
        ContentFirst(number: 10, userName: "user10", info: "123"),
        ContentFirst(number: 2, userName: "user2", info: "123"),
        ContentFirst(number: 4, userName: "user4", info: "123"),
        ContentFirst(number: 6, userName: "user6", info: "123"),
        ContentFirst(number: 9, userName: "user9", info: "123"),
        ContentFirst(number: 12, userName: "user12", info: "123"),
        ContentFirst(number: 13, userName: "user13", info: "123"),
        ContentFirst(number: 15, userName: "user15", info: "123"),
        ContentFirst(number: 14, userName: "user14", info: "123"),
        ContentFirst(number: 16, userName: "user16", info: "123"),
        ContentFirst(number: 1, userName: "user1", info: "123"),
        ContentFirst(number: 100, userName: "user100", info: "123"),
        ContentFirst(number: 1000, userName: "user1000", info: "123")
    ]

    var body: some View {
        VStack {
            List(contentFirst) { item in
                HStack {
                    Text("\(item.number)")
                        .font(.system(size: 12, weight: .regular))
                        .padding([.top, .bottom, .leading, .trailing], 7.5)
                        .background(item.number <= 3 ? Color(Const.grayText) : Color.clear)
                        .clipShape(Circle())
                        .foregroundColor(item.number <= 3 ? Color.white : Color(Const.grayText))
                        .frame(width: 40, alignment: .trailing) // 关键修改：固定宽度+右对齐
                    
                    Text(item.userName)
                        .font(.system(size: 12, weight: .regular))
                        .foregroundColor(Color.black)
                    
                    Spacer()
                    
                    Text(item.info)
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(Color.black)
                        .padding(.trailing, 18)
                }
                .listRowSeparator(.hidden)
            }
        }
    }
}

关键修改说明 #

• 给数字文本添加frame(width: 40, alignment: .trailing)：固定容器宽度，确保所有数字的占位空间一致；设置.trailing对齐让数字靠右显示，符合需求。
• 宽度值40可根据实际字体大小和最长数字（比如1000）的显示需求调整，确保能容纳带padding的圆形背景和数字内容。

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