如何为RTL（阿拉伯语）ScrollView启用LTR动画并解决滚动跳转问题？

问题描述 #

在SwiftUI中将全局布局方向设置为RTL（从右到左，阿拉伯语等语言的布局方向）后，使用水平ScrollView时，尝试滚动会出现内容跳转到另一侧的异常。需解决两个问题：

1. 是否可在RTL布局的ScrollView中使用LTR（从左到右）动画？
2. 如何修复该滚动跳转异常？

代码示例 #

Main #

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()
        }
    }
}

问题演示 #

解决方案 #

1. 在RTL布局中为ScrollView启用LTR动画 #

完全可以实现。通过给目标ScrollView单独设置layoutDirection环境变量为.leftToRight，即可覆盖全局的RTL设置，让该ScrollView的滚动动画遵循LTR方向。

2. 修复滚动跳转异常 #

滚动跳转的核心原因是全局RTL下，水平ScrollView的初始滚动位置默认在内容最右侧，滚动时偏移计算出现冲突。结合内容的RTL显示需求，推荐以下方案：

给ScrollView设置LTR布局方向以修复滚动逻辑，同时给内部内容容器（如HStack）单独设置RTL布局方向，保证阿拉伯语内容的正确排列：

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()
            .environment(\.layoutDirection, .rightToLeft) // 保持内容RTL排列
        }
        .environment(\.layoutDirection, .leftToRight) // 让ScrollView使用LTR滚动逻辑
    }
}

该方案既解决了滚动跳转的异常，又保留了阿拉伯语内容的正确RTL布局，同时ScrollView的滚动动画会遵循LTR方向。

内容的提问来源于stack exchange，提问作者Metin Atalay