swift 有没有办法使用滚动视图RTL(阿拉伯语)与LTR动画?

8dtrkrch  于 2023-11-16  发布在  Swift
关注(0)|答案(1)|浏览(130)

当您从左向右旋转ScrollView并尝试滚动时,内容会跳到另一边。有什么方法可以防止这种情况吗?
主要:

var body: some Scene {
    WindowGroup {
        ContentView()
            .environment(\.layoutDirection,  .rightToLeft)
    }
}

字符串
ContentView:

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                Image(systemName: "circle.fill")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("مَملَكة")
                
                Image(systemName: "square.fill")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("اخبرك")
                
                Image(systemName: "heart.fill")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("عِلاجيّ")
            }
            .padding()
        }
    }
}


的数据

i7uq4tfw

i7uq4tfw1#

不幸的是,Apple并不支持RTL方向。
只有当滚动视图中的元素不足以填充宽度时才会发生此问题。
要解决此问题,请执行以下操作:

struct ContentView: View {
    @Environment(\.layoutDirection) var direction // 👈 1. Get the direction from the environment

    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                Group { // 👈 2. Put everything in a group (Not the HStack itself)
                    Image(systemName: "circle.fill")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("مَملَكة")

                    Image(systemName: "square.fill")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("اخبرك")

                    Image(systemName: "heart.fill")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("عِلاجيّ")
                }
                .scaleEffect(x: direction == .rightToLeft ? -1 : 1) // 👈 3. Flip items if they are in the RTL direction environment
            }
            .padding()
        }
        .flipsForRightToLeftLayoutDirection(true) // 👈 4. Make the scrollView flips on RTL directions
    }
}

字符串
️注意顺序和在哪里应用什么.
如果您知道这些项目将填充宽度,则不需要应用任何这些。

相关问题