1

我想实现一个 UI,它有

  1. 背景图像,全屏并随设备大小缩放
  2. 背景图像上方和主 UI 下方的渐变,底部对齐,其大小取决于主 UI 中一个元素的位置
  3. 具有多个界面元素 VStack 的主 UI。有一个顶部区域和一个底部区域,它们都是固定对齐和大小的,中间有一个可变间隔

这个模型显示了 3 层 ZStack 的预期排列(从左到右):查看样机

这是我在 SwiftUI 中得到的:

struct TestView: View {
    
    var body: some View {
        ZStack() {
            // BG Image
            Image("BgImg")
                .resizable()
                .scaledToFill()
                .frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.width)
            
            // Gradient
            VStack {
                Spacer()
                Rectangle()
                    .fill(
                        LinearGradient(gradient: Gradient(stops: [
                            Gradient.Stop(color: Color(.black).opacity(0.0), location: 0),
                            Gradient.Stop(color: Color(.black), location: 0.5),
                        ]), startPoint: .top, endPoint: .bottom)
                    )
                    // HOW TO GET THE RIGHT SIZE HERE?
                    .frame(height:500)
            }
            
            // Main UI
            VStack {
                // VStack 1
                VStack {
                    Text("ABC")
                    Text("DEF")
                }.frame(height:260)
                
                // Fixed spacer
                Spacer().frame(height:26)
                
                // VStack 2
                VStack {
                    Text("123").foregroundColor(.white)
                    Text("456").foregroundColor(.white)
                }.frame(height:162)
                
                // Variable spacer
                Spacer()
                
                // VStack 2
                VStack {
                    Text("!!!").foregroundColor(.white)
                    Text("???").foregroundColor(.white)
                }.frame(height:304)
            }
            // Fixed spacer top
            .padding(.top, 26)
            // Fixed spacer bottom
            .padding(.bottom, 32)
            
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
            .previewDevice("iPhone 13 Pro")
            .preferredColorScheme(.light)
    }
}

我的问题是:

  1. 如何以正确的方式调整渐变的大小?
  2. 为什么渐变现在对齐到底部,为什么背景图像不能缩放到全屏,请参见预览截图的底部

Xcode 预览

4

1 回答 1

3

对于没有全屏的图像,你需要让该图像忽略安全区域,而不仅仅是 ZStack;

您需要使用几何阅读器读取直到堆栈末尾的高度,然后将其分配给用于调整渐变大小的值。

于 2022-01-22T15:40:13.960 回答