如何在SwiftUI的List中实现同一行文本左右分栏显示

要实现List行内文本左右分栏，用HStack结合Spacer是最合理的方案，完全替代空格凑位置的方式，适配所有设备宽度，代码也更易维护。

核心实现逻辑 #

在List的行中嵌套HStack：

• 左侧放置Text("Status")
• 中间添加Spacer()，它会自动占据左右文本之间的所有可用空间，把右侧文本推到最右边
• 右侧放置Text("Online")并设置绿色字体

整合到你的现有代码 #

修改后的完整代码如下：

NavigationView{
    List{
        // 头像与用户名行
        VStack(alignment: .center, spacing: 8) {
            Text("EdwardCullen")
            AsyncImage(url: URL(string: "你的头像URL")) { image in
                image
                    .resizable()
                    .scaledToFit()
                    .frame(width: 80, height: 80)
            } placeholder: {
                ProgressView()
            }
        }
        .padding(.vertical, 12) // 替换负padding，避免布局错乱
        
        // 状态行（左右分栏）
        HStack {
            Text("Status")
            Spacer()
            Text("Online")
                .foregroundColor(.green)
        }
        
        Text("Test")
    }
    .navigationTitle("EdwardCullen's Profile")
    .navigationBarTitleDisplayMode(.inline)
}

额外优化点 #

1. 移除了原代码中padding(.vertical, -20)的负padding，这种写法容易导致内容被裁剪或布局错乱，改用合理的正padding调整间距
2. 给AsyncImage添加了resizable()和固定尺寸，避免头像拉伸或大小异常

其他可选方案 #

如果需要更复杂的布局（比如多行文本对齐），可以用HStack配合frame(maxWidth: .infinity, alignment: .leading/trailing)：

HStack {
    Text("Status")
        .frame(maxWidth: .infinity, alignment: .leading)
    Text("Online")
        .foregroundColor(.green)
        .frame(maxWidth: .infinity, alignment: .trailing)
}

不过这种写法不如Spacer简洁，一般优先用Spacer方案。

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