ios - 在 SwiftUI 中将 HStack 堆叠在 ZStack 下方

Question

免责声明：SwiftUI 的新手

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

我将 设置ZStack()为不占据整个高度，并期望将HStack()放置在 之后 就ZStack()可以做到这一点，出现在之后。相反，它也与 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

尝试使用 topVStack并关闭GeometryReaderlast 之前的以下代码HStack：

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
}