SwiftUI-過渡影片錯誤（已解決：不是錯誤！）

這是對先前問題的后續處理，該問題已解決然后未解決。

情況是我在螢屏上有一個文本網格，通過從另一個視圖的轉換呈現。我不能LazyVGrid用來呈現網格，因為一列的寬度需要匹配其中最長的文本。所以我的解決方案是使用HStacks 并設定列的寬度。要將寬度設定為最長文本的寬度，我使用 a來讀取文本的大小，然后通過視圖樹向上將該GeometryReader資訊發送到用于設定列中所有標簽寬度的變數.anchorPreference@State

這聽起來很復雜，但它確實有效。至少......直到我試圖過渡到它。然后回傳了一個舊錯誤，其中使用anchorPreferenceandonPreferenceChange(...)函式似乎改變了影片帶來的視圖并導致文本滑動得太快。根據此螢屏截圖：

目前，我不知道如何更正影片，以便文本與父視圖一起滑動。有什么建議么？

這是此錯誤的完整代碼：

import SwiftUI

@main
struct TransitionAnimationBug: App {

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {

    @State var displaySettings = false

    var body: some View {

        Group {
            if displaySettings {
                DataView(displaySettings: $displaySettings)
                    .transition(.slide)
            } else {
                MainView(displaySettings: $displaySettings)
                    .transition(.slide)
            }
        }
        .animation(.easeInOut, value: displaySettings)
    }
}

struct MainView: View {

    let displaySettings: Binding<Bool>

    var body: some View {
        VStack(spacing: 20) {
            Button("Show transition bug") {
                displaySettings.wrappedValue.toggle()
            }
            Text("Watch the text as it animates on. it should slide with the view, but instead moves around independently.")
                .padding(20).multilineTextAlignment(.center)
            Text("This bug is triggered by the label width update via a @State variable in the onPreferenceChange function.")
                .padding(20).multilineTextAlignment(.center)
        }
    }
}

// The preference key used to advise the parent view of a label's width.
struct LabelWidthPreferenceKey: PreferenceKey {
    static var defaultValue = 0.0
    static func reduce(value: inout Double, nextValue: () -> Double) {
        if value != nextValue() {
            value = max(value, nextValue())
        }
    }
}

struct DataView: View {

    let displaySettings: Binding<Bool>
    @State private var labelWidth: CGFloat = 0.0

    var body: some View {
        VStack(spacing: 30) {
            row(title: "Short title", desc: "Short title long description")
            row(title: "Rather long title", desc: "Rather long title long description")
            row(title: "SS", desc: "Super short text")
            Button("Close") { displaySettings.wrappedValue.toggle() }
        }
        .onPreferenceChange(LabelWidthPreferenceKey.self) {
            // Updating the label width here triggers the bug.
            if $0 != labelWidth {
                labelWidth = $0
            }
        }
    }

    private func row(title: String, desc: String) -> some View {
        GeometryReader { geometry in
            HStack(alignment: .center) {
                Text(title)
                    .frame(minWidth: labelWidth, alignment: .leading)
                    .border(.red)
                    .anchorPreference(key: LabelWidthPreferenceKey.self, value: .bounds) {
                        geometry[$0].width.rounded(.up)
                    }
                Text(desc)
                    .border(.red)
            }
        }
        .fixedSize(horizontal: false, vertical: true)
        .padding([.leading, .trailing], 20)
    }
}

uj5u.com熱心網友回復：

不是 SwiftUI 錯誤。在下面找到修復（使用 Xcode 13.3 / iOS 15.4 測驗）

    VStack(spacing: 30) {
        row(title: "Short title", desc: "Short title long description")
        row(title: "Rather long title", desc: "Rather long title long description")
        row(title: "SS", desc: "Super short text")
        Button("Close") { displaySettings.wrappedValue.toggle() }
    }
    .animation(nil, value: labelWidth)                     // << here !!
    .onPreferenceChange(LabelWidthPreferenceKey.self) {

標籤：动画片 迅捷

上一篇：margin-top也適用于兄弟元素

下一篇：NamenodeHDFSDocker