SwiftUI anchorPreference .leading misbehaving?

Question

Created Mar ’22

Replies 2

Boosts 0

Participants 1

I'm trying to use .anchorPreference's .leading source, but I'm seeing some unexpected behavior for right-to-left layout.

Given the following playground I would expect the blue color's .leading anchor to always be in the middle of the view, but for right-to-left layout it's at 0.0.

Screen Shot 2022-03-23 at 11.53.24 AM.png

That's the behavior I'd expect from a .left anchor rather than a .leading anchor.

Am I misunderstanding something?

import PlaygroundSupport
import SwiftUI

struct AnchorPreferenceKey: PreferenceKey {
    static let defaultValue: Anchor<CGPoint>? = nil
    static func reduce(value: inout Anchor<CGPoint>?, nextValue: () -> Anchor<CGPoint>?) {
        fatalError() // There can be only one
    }
}

struct ContentView: View {
    @Environment(\.layoutDirection) var layoutDirection

    var body: some View {
        HStack(spacing: 0) {
            Color.green

            Color.blue.anchorPreference(key: AnchorPreferenceKey.self, value: .leading) { $0 }
        }
        .overlayPreferenceValue(AnchorPreferenceKey.self) { anchor in
            GeometryReader { proxy in
                Color.clear.onAppear {
                    print(layoutDirection, "Blue Leading", proxy[anchor!].x)
                    // leftToRight Blue Leading 150.0
                    // rightToLeft Blue Leading 0.0
                }
            }
        }
    }
}

PlaygroundPage.current.setLiveView(
    VStack {
        ContentView()
            .overlay(Text("Left to Right"))
            .environment(\.layoutDirection, .leftToRight)

        ContentView()
            .overlay(Text("Right to Left"))
            .environment(\.layoutDirection, .rightToLeft)
    }
    .frame(width: 300, height: 100)
)

Boost

Answer 1

jflan OP

Mar ’22

Example code blocks doesn't work in comment. Disregard.

0

Answer 2

jflan OP

Mar ’22

This isn't an answer, but the comment field won't allow code blocks or image attachments.

My initial assumption that .leading was being treated as .left doesn't appear to be correct. If you position a circle at the anchor point using the following changes to ConentView it completely off of the blue rectangle for right-to-left layout.

Screen Shot 2022-03-23 at 3.28.37 PM.png

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Color.green

            Color.blue
                .anchorPreference(key: AnchorPreferenceKey.self, value: .leading, transform: { $0 })
        }
        .overlayPreferenceValue(AnchorPreferenceKey.self) { anchor in
            GeometryReader { proxy in
                let leading: CGPoint = proxy[anchor!]

                Circle()
                    .fill(Color.red)
                    .frame(width: 16, height: 16)
                    .position(leading)
            }
        }
    }
}

0