在HStack中将ZStack堆在ZStack下面

Question

免责声明:新加入SwiftUI

我知道ZStack()视图允许我重叠视图，这是我想要的标题部分的应用程序。

我将ZStack()设置为不占据整个高度，并预期会出现在ZStack()后面的HStack()。相反，它也与ZStack重叠。

我相信这是一个简单的共存解决方案。下面的图像和代码。

var body: some View {
            GeometryReader { geometry in
                ZStack(alignment: .topLeading) {
                    Ellipse()
                    .fill(self.bgColor)
                    .frame(width: geometry.size.width * 1.4, height: geometry.size.height * 0.28)
                    .position(x: geometry.size.width / 2.35, y: geometry.size.height * 0.1)
                    .shadow(radius: 3)
                    .edgesIgnoringSafeArea(.all)
                    
                    HStack(alignment: .top) {
                        VStack(alignment: .leading) {
                            Text(self.title)
                                .font(.title)
                                .fontWeight(.bold)
                                .foregroundColor(Color.white)
                            
                            Text(self.subtitle)
                                .font(.subheadline)
                                .fontWeight(.regular)
                                .foregroundColor(Color.white)
                        }
                        .padding(.leading, 25)
                        .padding(.top, 20)
                        Spacer()
                        VStack(alignment: .trailing) {
                            Image("SettingsIcon")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 30, height: 30)
                        }
                        .padding(.top, 20)
                        .padding(.trailing, 25)
                    }
                }
                .fixedSize(horizontal: false, vertical: true)
                HStack(alignment: .top) {
                    Text(self.title)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(Color.white)
                }
     
            }
        }

​

​

Answer 1

使用顶级VStack并在上一次HStack之前关闭GeometryReader，尝试以下代码

var body: some View {
    VStack {  // <-- here
        GeometryReader { geometry in
            ZStack(alignment: .topLeading) {
                Ellipse()
                  .fill(self.bgColor)
                    .frame(width: geometry.size.width * 1.4, height: geometry.size.height * 0.28)
                    .position(x: geometry.size.width / 2.35, y: geometry.size.height * 0.1)
                    .shadow(radius: 3)
                    .edgesIgnoringSafeArea(.all)
                
                HStack(alignment: .top) {
                    VStack(alignment: .leading) {
                        Text(self.title)
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        
                        Text(self.subtitle)
                            .font(.subheadline)
                            .fontWeight(.regular)
                            .foregroundColor(Color.white)
                    }
                    .padding(.leading, 25)
                    .padding(.top, 20)
                    Spacer()
                    VStack(alignment: .trailing) {
                        Image("SettingsIcon")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 30, height: 30)
                    }
                    .padding(.top, 20)
                    .padding(.trailing, 25)
                }
            }.fixedSize(horizontal: false, vertical: true)
        } // <-- here end GeometryReader
        
        HStack(alignment: .top) {
            Text(self.title)
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
        }
    } // <-- here end VStack
}