SwiftUI如何避免HStack内Text自动截断 实现过长用户名自动换行

实现方案 #

你可以通过 ViewThatFits（iOS 16+ 支持）快速实现这个自适应布局逻辑，系统会自动判断可用空间，匹配对应的布局：

// 先把后面的固定元素抽出来避免重复代码
private var trailingBlocks: some View {
    HStack(spacing: 4) {
        // Block 1
        Text(Image(systemName: "network")) +
        Text("12345")
                            
        // Block 2
        Text(Image(systemName: "network")) +
        Text("2.0K")
                            
        // Block 3
        Text(Image(systemName: "network")) +
        Text("2H")
                            
        // Block 4
        Text(Image(systemName: "network"))
        Text(Image(systemName: "network"))
        Text(Image(systemName: "network"))
    }
}

var body: some View {
    ViewThatFits(in: .horizontal) {
        // 优先尝试所有元素同排的布局
        HStack(spacing: 6) {
            Text("longtext username test")
                .lineLimit(1)
            trailingBlocks
        }
        
        // 同排放不下时，自动用垂直布局
        VStack(alignment: .leading, spacing: 4) {
            Text("longtext username test")
                .lineLimit(1)
            trailingBlocks
        }
    }
}

如果需要兼容 iOS 15 及更低版本，可以通过宽度判断动态切换布局：

@State private var usernameWidth: CGFloat = 0
@State private var availableWidth: CGFloat = 0
// 你可以提前计算后面固定元素的总宽度，或用PreferenceKey动态获取实际宽度
private let trailingBlocksWidth: CGFloat = 200 

var body: some View {
    HStack(spacing: 0) {
        GeometryReader { geo in
            Color.clear
                .onAppear { availableWidth = geo.size.width }
        }
        .frame(height: 0)
        
        if usernameWidth + trailingBlocksWidth + 10 < availableWidth { // 10是元素间距容差
            HStack(spacing: 6) {
                usernameText
                trailingBlocks
            }
        } else {
            VStack(alignment: .leading, spacing: 4) {
                usernameText
                trailingBlocks
            }
        }
    }
}

private var usernameText: some View {
    Text("longtext username test")
        .lineLimit(1)
        .background(
            GeometryReader { geo in
                Color.clear
                    .onAppear { usernameWidth = geo.size.width }
            }
        )
}

private var trailingBlocks: some View {
    // 和上文的trailingBlocks实现一致
}

效果说明 #

• 当用户名长度+右侧所有元素总宽度小于行可用宽度时，所有元素同排展示
• 当总宽度超出可用空间时，用户名单独占一行，右侧元素自动换行到下一行左对齐展示

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