[SwiftUI] zstack button not working, ZStack에서의 버튼 동작, zIndex()

오류 코드

ZStack{
	// Stack 배열
}

ZStack에 alignment를 안줬더니 버튼이 안눌린다. 

 

 

수정한 코드

ZStack(alignment: .bottomTrailing){

ZStack에 alignment를 지정

ZStack(alignment: .bottomTrailing){

               //1) 위에 올라오는 버튼
                HStack{
                    Button {
                        print("button pressed")
                        if isStopedtimer == false{
                            isStopedtimer = true
                        } else {
                            isStopedtimer = false
                            withAnimation {
                                
                                index = index < images.count ? index + 1 : 1
                                // selectedNum 값은 images 배열의 element 값
                                selectedImageName = images[index - 1]
                            }
                        }
                    } label: {
                        Image(systemName: isStopedtimer ? "play.fill": "pause.fill")
                            .foregroundStyle(.black)
                    }
                }
                .background(.blue)
                .zIndex(1)
                
                //2) 아래에 놓이는 map
                HStack{
                    TabView(selection: $selectedImageName) {
                        ForEach(images, id: \.self) {
                            // 이미지의 크기
                            Image($0)
                                .resizable()
                                .scaledToFit()
                                .frame(width: CGFloat.screenWidth*0.7)
                        }
                    }
                    .tabViewStyle(.page)
                    // 이미지를 감싼 TabView의 크기
                    .frame( width: CGFloat.screenWidth*0.7, height: CGFloat.screenHeight * 0.655)
                    
                    .onReceive(timer, perform: { _ in
                        withAnimation {
                            // index값을 증가, 아니면 1
                            // (selectedNum의 값을 변경해주기 위함)
                            
                            if isStopedtimer {
                                
                            } else {
                                index = index < images.count ? index + 1 : 1
                                // selectedNum 값은 images 배열의 element 값
                                selectedImageName = images[index - 1]
                            }
                        }
                    })
                }
                .background(.red)
            }

 

 

 

+a) ZStack에서의 위계 설정

.zIndex(1)

func zIndex(_ value: Double) -> some View

 

In this example there are two overlapping rotated rectangles. The frontmost is represented by the larger index value.

숫자가 클 수록 위쪽(앞쪽에 놓임)

VStack {
    Rectangle()
        .fill(Color.yellow)
        .frame(width: 100, height: 100, alignment: .center)
        .zIndex(1) // Top layer.


    Rectangle()
        .fill(Color.red)
        .frame(width: 100, height: 100, alignment: .center)
        .rotationEffect(.degrees(45))
        // Here a zIndex of 0 is the default making
        // this the bottom layer.
}

: zIndex VStack안에서도 쓸 수 있다.