如何将ZStack内宽度为80%的VStack及其中文本居中对齐？

你的代码核心问题是：GeometryReader虽占据了全屏空间，但内部VStack仅设置了宽度，未指定在GeometryReader中垂直/水平居中，同时缺少背景透明度设置。以下是两种可行的修改方案：

方案1：保留GeometryReader并强制居中 #

通过position方法直接将VStack定位在GeometryReader的中心，同时添加背景透明度：

ZStack {
    Image("demo-bg")
        .resizable()
        .scaledToFill()
        .edgesIgnoringSafeArea(.all)
    
    GeometryReader { proxy in
        VStack {
            Text("Test1")
                .font(.largeTitle)
                .foregroundStyle(.green)
            Text("Test2")
                .font(.largeTitle)
                .foregroundStyle(.red)
            Text("Test3")
                .font(.largeTitle)
                .foregroundStyle(.green)
            Text("Test4")
                .font(.largeTitle)
            TextField("Result", text: $result).keyboardType(.numberPad)
        }
        .frame(width: proxy.size.width * 0.8)
        .background(.white.opacity(0.5)) // 设置50%透明度的白色背景
        .position(x: proxy.size.width / 2, y: proxy.size.height / 2) // 强制居中
    }
}

方案2：移除GeometryReader，用更简洁的布局实现 #

利用frame的参数让VStack容器占满ZStack空间并自动居中，同时设置固定宽度：

ZStack {
    Image("demo-bg")
        .resizable()
        .scaledToFill()
        .edgesIgnoringSafeArea(.all)
    
    VStack {
        Text("Test1")
            .font(.largeTitle)
            .foregroundStyle(.green)
        Text("Test2")
            .font(.largeTitle)
            .foregroundStyle(.red)
        Text("Test3")
            .font(.largeTitle)
            .foregroundStyle(.green)
        Text("Test4")
            .font(.largeTitle)
        TextField("Result", text: $result).keyboardType(.numberPad)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center) // 占满父容器并居中
    .frame(width: UIScreen.main.bounds.width * 0.8) // 设置宽度为屏幕的80%
    .background(.white.opacity(0.5))
}

如果需要适配多场景（如分屏），可结合GeometryReader获取准确宽度：

ZStack {
    Image("demo-bg")
        .resizable()
        .scaledToFill()
        .edgesIgnoringSafeArea(.all)
    
    GeometryReader { proxy in
        VStack {
            // 内容保持不变
        }
        .frame(width: proxy.size.width * 0.8)
        .background(.white.opacity(0.5))
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
}

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