SwiftUI：强制转换图像后的图像

目标：强制将按钮图像放在另一个图像的后面，这样当其他按钮出现/消失时，它们将不会出现在屏幕上，直到从顶部图像的边缘移出

当前：按钮淡入淡出叠加在“顶部”按钮上

尝试：我调整了不透明度并尝试使用ZStack&两种方法都没有成功

代码：

struct buttonReveal : View {
@State var isShowing = false

var body: some View {
    
    
    HStack{
        ZStack{
            
            Circle()
                .foregroundColor(.white)
                .frame(width: 100, height: 100)
            
            
            Button(action: {
                withAnimation(.linear(duration: 0.5)) { self.isShowing.toggle() }
            }, label: {
                ZStack {
                    Circle()
                        .foregroundColor(.white)
                        .frame(width: 100, height: 100)
                    Image(systemName: "chevron.forward.circle")
                        .buttonModifier()
                }
                .rotationEffect(Angle(degrees: isShowing ? -180 : 0))
                .animation(.spring())
                
            })
        }

    
        if isShowing {
            Button(action: {
                isShowing.toggle()
            }, label: {
                Image(systemName: "trash.circle")
                    .buttonModifier()
            })
            .transition(.moveAndFade(edge: .leading, offsetX: 0, offsetY: 0))
            .animation(.spring())
            
            Button(action: {
                isShowing.toggle()
            }, label: {
                Image(systemName: "gear")
                    .buttonModifier()
            })
            .transition(.moveAndFade(edge: .leading, offsetX: -150, offsetY: 0))
            .animation(.spring())

        } else {
            Spacer()
            
        }
    
    }
    

    
    
}
}


extension AnyTransition {
static func moveAndFade(edge: Edge, offsetX: CGFloat, offsetY: CGFloat) -> AnyTransition {
    AnyTransition.move(edge: edge).combined(with: .opacity).combined(with: offset(x: offsetX, y: offsetY))
}
}


extension Image {
func buttonModifier() -> some View {
    self
        .resizable()
        .frame(width: 100, height: 100)
        .foregroundColor(.primary)
        .padding()
}
}

---

不确定这是否是最佳实践，它没有完美对齐，需要一些清理，但可能会让你朝着正确的方向前进

基本上，我创建了一个次要的HStack，它位于主HStack之下，而不是两个共享同一个HStack

（也许有人可以加入w更好的实践建议）

---

不确定这是否是最佳实践，它没有完美对齐，需要一些清理，但可能会让你朝着正确的方向前进

基本上，我创建了一个次要的HStack，它位于主HStack之下，而不是两个共享同一个HStack

（也许有人可以加入w更好的实践建议）

---

这对你有用吗？在显示时，我没有在屏幕上绘制按钮，而是将它们包含在屏幕顶部按钮后面的ZStack中

struct ButtonReveal: View {
    
    @State var isShowing = false

    var body: some View {
        ZStack {
            Image(systemName: "gear")
                .buttonModifier()
                .offset(x: isShowing ? 300 : 0)

            Image(systemName: "trash.circle")
                .buttonModifier()
                .offset(x: isShowing ? 150 : 0)

            Image(systemName: "chevron.forward.circle")
                .buttonModifier()
                .rotationEffect(Angle(degrees: isShowing ? -180 : 0))
        }
        .animation(.spring())
        .onTapGesture {
            isShowing.toggle()
        }
    }
}

struct ButtonReveal_Previews: PreviewProvider {
    static var previews: some View {
        ButtonReveal()
            .frame(maxWidth: .infinity, alignment: .leading)
    }
}


extension Image {
    func buttonModifier() -> some View {
        self
            .resizable()
            .frame(width: 100, height: 100)
            .foregroundColor(.primary)
            .padding()
            .background(
                Circle()
                    .fill(Color.white)
            )
    }
}

---

这对你有用吗？在显示时，我没有在屏幕上绘制按钮，而是将它们包含在屏幕顶部按钮后面的ZStack中

struct ButtonReveal: View {
    
    @State var isShowing = false

    var body: some View {
        ZStack {
            Image(systemName: "gear")
                .buttonModifier()
                .offset(x: isShowing ? 300 : 0)

            Image(systemName: "trash.circle")
                .buttonModifier()
                .offset(x: isShowing ? 150 : 0)

            Image(systemName: "chevron.forward.circle")
                .buttonModifier()
                .rotationEffect(Angle(degrees: isShowing ? -180 : 0))
        }
        .animation(.spring())
        .onTapGesture {
            isShowing.toggle()
        }
    }
}

struct ButtonReveal_Previews: PreviewProvider {
    static var previews: some View {
        ButtonReveal()
            .frame(maxWidth: .infinity, alignment: .leading)
    }
}


extension Image {
    func buttonModifier() -> some View {
        self
            .resizable()
            .frame(width: 100, height: 100)
            .foregroundColor(.primary)
            .padding()
            .background(
                Circle()
                    .fill(Color.white)
            )
    }
}