CODEWITHSUNDEEP
iosswiftswiftui
Konstantin.Efimenko
Konstantin.Efimenko

Reputation: 1460

SwiftUI ZStack takes all screen height but should be fixed height

My code:

public var body: some View {
    ZStack(alignment: .bottom) {
        Ellipse()
            .fill(.yellow)
        Text("Text")
            .padding(.bottom, 42)
            .foregroundColor(.red)
    }
    .frame(width: 546, height: 364)
    .position(x: UIScreen.main.bounds.size.width / 2, y: Spacing.padding_0_5)
    .edgesIgnoringSafeArea(.top)
    .background(Color.red)
}

makes ZStack takes almost all screen height. But I expect it will take height from .frame() method.

Upvotes: 0

Views: 2573

Answers (1)

Asad
Asad

Reputation: 311

I have a workaround for you, it's a bit messed up but works

 public var body: some View {
        ZStack {
            ZStack(alignment: .bottom) {
                Ellipse()
                    .fill(.yellow)
                
            }
            .frame(width: 546, height: 364)
            .position(x: UIScreen.main.bounds.size.width / 2, y: Spacing.padding_0_5)
            .edgesIgnoringSafeArea(.top)
            .zIndex(0)
            ZStack {
                VStack {
                    VStack {
                        Text("Text")
                            .padding(.top, 42)
                            .foregroundColor(.red)
                    }
                    .frame(width: UIScreen.main.bounds.width, height: 182)
                    VStack {
                        Text("Your texts here")
                    }
                    .frame(width: UIScreen.main.bounds.width)
                    Spacer()
                }
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            }
            .zIndex(1)
        }
        .background(Color.red)
    }

I simply made your ellipse on another layer and text on the other.

ZStack(alignment: .bottom) {
   Ellipse()
       .fill(.yellow)
   }
   .frame(width: 546, height: 364)
   .position(x: UIScreen.main.bounds.size.width / 2, y: Spacing.padding_0_5)
   .edgesIgnoringSafeArea(.top)
   .zIndex(0)

The .zIndex(0) makes sure that the view is in the background.

ZStack {
    VStack { // This VStack contains all your text
        VStack { // First VStack
            Text("Text")
                .padding(.top, 42)
                .foregroundColor(.red)
        }
       .frame(width: UIScreen.main.bounds.width, height: 182)
        VStack { //Second VStack
             Text("Your texts here")
        }
        .frame(width: UIScreen.main.bounds.width)
         Spacer()
    }
    .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
}
.zIndex(1)

Here, the ZStack takes up the entire screen. We added a VStack which contains your texts.

  • The first VStack has your main label over the Ellipse, and its frame is hardcoded according to the height of the Ellipse (1/2 the height as the other half of the ellipse is outside the screen).
  • The second VStack starts from the end of our first VStack which was the functionality needed, finally added a spacer() so that the text is placed at the top rather than middle.

The zIndex(1) makes sure that is placed over the elements at zIndex(0)

Upvotes: 1

Related Questions