SwiftUI 如何获取自定义幻灯片转换的视图大小？

Question

SwiftUI 有默认的幻灯片切换.transition(.slide)。它运作良好，但只进行了一半。我的意思是，我必须滑动我的视图，然后将它们向后滑动（我需要向后滑动动画）。由于无法设置幻灯片过渡的方向，所以我实现了自定义过渡。实现很简单并且运行良好。但我无法获取视图大小来计算起点和终点偏移点。

extension AnyTransition {
    static func slide(direction: SlideModifier.Direction) -> AnyTransition {
        .asymmetric(insertion: .modifier(active: SlideModifier(positiveOffset: true, direction: direction), identity: SlideModifier(positiveOffset: nil, direction: direction)),
                    removal: .modifier(active: SlideModifier(positiveOffset: false, direction: direction), identity: SlideModifier(positiveOffset: nil, direction: direction)))
    }
}

internal struct SlideModifier: ViewModifier {
    let positiveOffset: Bool?
    let direction: Direction
    let offsetSize: CGFloat = 200 // How can I get this value programmatically?
    
    enum Direction {
        case leading, top, trailing, bottom
    }
    
    func body(content: Content) -> some View {
        switch direction {
        case .leading:
            return content.offset(x: positiveOffset == nil ? 0 : (positiveOffset! ? offsetSize : -offsetSize))
        case .top:
            return content.offset(y: positiveOffset == nil ? 0 : (positiveOffset! ? offsetSize : -offsetSize))
        case .trailing:
            return content.offset(x: positiveOffset == nil ? 0 : (positiveOffset! ? -offsetSize : offsetSize))
        case .bottom:
            return content.offset(y: positiveOffset == nil ? 0 : (positiveOffset! ? -offsetSize : offsetSize))
        }
    }
}

我想定义等于视图大小的偏移大小。我的实验表明，这就是标准幻灯片过渡的工作方式。我尝试使用GeometryReader 和PreferenceKey 来获取大小。也许我做错了什么，但没有奏效。

这是一个使用我的自定义过渡的简单示例。

struct ContentView: View {
    @State private var isShowingRed = false

    var body: some View {
        ZStack {
            if isShowingRed {
                Color.red
                    .frame(width: 200, height: 200)
                    .transition(.slide(direction: .trailing))
            } else {
                Color.blue
                    .frame(width: 200, height: 200)
                    .transition(.slide(direction: .leading))
            }
        }
        .onTapGesture {
            withAnimation {
                isShowingRed.toggle()
            }
        }
    }
}

Answer 1

有几种方法可以获取视图的大小。在您的情况下，我假设您正在寻找屏幕尺寸。以下是获得它的方法。请记住，我没有打开我的 IDE 来完全测试它，它可能存在语法问题。当我打开我的 IDE 时，我会更新我的答案。

热点提示

习惯使用内联条件，在处理 Swift UI 中的动画和视图时会有很大帮助

someBool ? varIfTrue : varIfFalse
someValue == someTest ? varIfTrue : varIfFalse
//(boolCondition) ? (Value if True) : (Value If False)

//You can even chain them together, but be careful to keep it 
//organized if you do this.
someBool ? someBool2 ? val1 : val2 : someBool2 ? val3 : val4

原始屏幕尺寸

Nice Extension Provided Here

var width = UIScreen.main.bounds.size.width
var height = UIScreen.main.bounds.size.height

几何阅读器

这个有点令人困惑，因为它会获取它所在的 VIEW。它还有一个属性，您可以设置它以忽略安全区域。如果您使用此方法，您将根据视图获得不同的响应。

//Parent Views Matter with GeometryReader
var body: some View {
    GeometryReader { geometry in 
        //Use the geometry, full screen size.
    }.ignoresSafeAreaAndEdges(.all)
}

var body: someView {
    VStack {
        GeometryReader { geometry in
             //This will have only the size of the parent view.
             // Ex: 100x100 square.
        }
    }.frame(width: 100, height: 100)
}

向后动画

您制作动画的方式是有效的，但是这样做会给您一种“倒带”类型的效果。

var body: some View {
    ZStack {
        if isShowingRed {
            Color.red
                .frame(width: 200, height: 200)
                .offset(isShowingRed ? 0 : 100)
                .animation(.spring()) //You can also use .default
        } else {
            Color.blue
                .frame(width: 200, height: 200)
                .offset(isShowingRed ? 100 : 0)
                .animation(.spring()) //You can also use .default

        }
    }
    .onTapGesture {
        withAnimation {
            isShowingRed.toggle()
        }
    }
}