macOS SwiftUI实现文本居中且不覆盖左侧星星的动态布局

问题修复说明 #

针对你遇到的三个问题，通过动态测量元素宽度并调整布局逻辑，实现以下效果：

• 窗口空间充足时文本默认居中
• 窗口缩小至文本即将触碰左侧星星时，自动切换为左对齐并从右侧截断显示省略号
• 彻底避免文本覆盖星星及跳动异常

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    @State private var starAreaWidth: CGFloat = 0
    @State private var textWidth: CGFloat = 0
    
    var body: some View {
        GeometryReader { outerProxy in
            HStack(spacing: 8) {
                // 左侧星星组，同时测量其宽度
                HStack(spacing: 8) {
                    Image(systemName: "star")
                    Image(systemName: "star")
                    Image(systemName: "star")
                }
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .onAppear { starAreaWidth = proxy.size.width }
                            .onChange(of: proxy.size.width) { starAreaWidth = $0 }
                    }
                )
                
                // 文本区域：动态调整对齐方式与宽度限制
                Text("Hello, world! Hello, world! Hello, world! Hello, world! Hello, world!")
                    .lineLimit(1)
                    .truncationMode(.tail)
                    .background(
                        GeometryReader { proxy in
                            Color.clear
                                .onAppear { textWidth = proxy.size.width }
                                .onChange(of: proxy.size.width) { textWidth = $0 }
                        }
                    )
                    .frame(
                        maxWidth: outerProxy.size.width - starAreaWidth - 32,
                        alignment: textWidth < (outerProxy.size.width - starAreaWidth - 32) ? .center : .leading
                    )
                
                Spacer()
            }
            .background(Color.yellow)
            .foregroundColor(.black)
            .padding()
        }
    }
}

关键逻辑解析 #

1. 动态宽度测量：使用GeometryReader分别获取星星组和文本的实际宽度，为布局判断提供准确依据
2. 可用空间计算：文本的最大宽度被限制为「容器总宽度 - 星星组宽度 - 内边距及间距」，确保文本永远不会覆盖左侧星星
3. 对齐方式切换：通过对比文本宽度与可用空间，自动切换文本的对齐方式——空间充足时居中，空间不足时左对齐并触发截断

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