SwiftUI中如何在Label与图标下方居中显示文本？元素偏移问题

问题核心是未将每个Label与其对应的副标题封装为独立布局单元，直接添加Text会破坏原有Label的对齐逻辑。以下是修复方案：

修改要点 #

• 将每个Label和副标题文本包裹在居中对齐的VStack中，确保副标题始终在对应Label正下方居中
• 移除Label内部Text上无效的.labelStyle(.titleAndIcon)（该修饰符应作用于Label本身，而非Text）
• 简化冗余的三元表达式（true ? "xxx" : "xxx"可直接写图标名称）

修复后的完整代码 #

struct ContentView: View {
    var body: some View {
        VStack {
            Text("My Title")
                .font(.system(.title))
                .fontWeight(.bold)
                .padding()
            
            // MARK: LABELS
            VStack(spacing: 20) { // 增加间距优化布局
                
                // 第一个Label+副标题组
                VStack(alignment: .center, spacing: 8) {
                    Label {
                        Text("Design")
                            .font(.title)
                            .foregroundColor(.systemGray)
                    } icon: {
                        Image(systemName: "pencil.circle")
                            .foregroundColor(.systemBlue)
                            .font(.title)
                    }
                    .labelStyle(.titleAndIcon) // 正确设置Label样式
                    
                    Text("Create beautiful interfaces")
                        .foregroundColor(.systemGray)
                        .multilineTextAlignment(.center)
                        .font(.subheadline)
                }
                
                // 第二个Label+副标题组
                VStack(alignment: .center, spacing: 8) {
                    Label {
                        Text("Develop")
                            .font(.title)
                            .foregroundColor(.systemGray)
                    } icon: {
                        Image(systemName: "qrcode")
                            .foregroundColor(.systemBlue)
                            .font(.title)
                    }
                    .labelStyle(.titleAndIcon)
                    
                    Text("Build functional applications")
                        .foregroundColor(.systemGray)
                        .multilineTextAlignment(.center)
                        .font(.subheadline)
                }
                
                // 第三个Label+副标题组
                VStack(alignment: .center, spacing: 8) {
                    Label {
                        Text("Launch")
                            .font(.title)
                            .foregroundColor(.systemGray)
                    } icon: {
                        Image(systemName: "cart.circle")
                            .foregroundColor(.systemBlue)
                            .font(.title)
                    }
                    .labelStyle(.titleAndIcon)
                    
                    Text("Release your product to users")
                        .foregroundColor(.systemGray)
                        .multilineTextAlignment(.center)
                        .font(.subheadline)
                }
                
            } // END Label VSTACK
            .padding()
            
        }
        .padding()
    }
}

关键说明 #

1. 独立布局单元：每个Label与副标题被包裹在单独的VStack(alignment: .center)中，确保副标题始终相对于当前Label居中
2. 间距控制：外层Label VStack使用spacing: 20控制各组垂直间距，提升可读性
3. 层级区分：给副标题添加.font(.subheadline)强化层级，保留.multilineTextAlignment(.center)确保多行文本居中

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