SwiftUI中如何让HStack内的Text分别居左和水平居中

你的代码问题在于HStack的默认布局逻辑：HStack会将子视图按自身尺寸依次排列，即便外层HStack设置了width: .infinity撑满父视图，内部的Text仍只会占据自身所需空间，且HStack默认会让整体内容居中，所以两个Text会挤在视图中间区域。你给Text添加的frame未指定宽度，无法改变它们的布局空间分配。

下面提供两种简单有效的解决方案：

方案一：使用ZStack分层布局（推荐） #

ZStack可以让两个Text处于同一层，分别控制它们的位置，更贴合你的需求：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .leading) {
            // 固定在视图最左侧
            Text("1")
            // 撑满整个宽度并居中，正好处于视图水平中心
            Text("2")
                .frame(maxWidth: .infinity, alignment: .center)
        }
        .frame(maxWidth: .infinity)
    }
}

方案二：基于HStack的调整 #

如果坚持使用HStack，可以通过占位空间和容器视图来实现：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            // 固定在左侧
            Text("1")
            // 用Spacer撑满剩余空间，同时在其中居中放置Text("2")
            Spacer()
                .overlay(Text("2").frame(maxWidth: .infinity, alignment: .center))
        }
        .frame(maxWidth: .infinity)
    }
}

两种方案都能实现：Text("1")在ContentView最左侧，Text("2")精确处于视图水平中心的效果。

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