SwiftUI 如何让横向滚动视图适配RTL布局？

以下两种方案均可实现需求，且不会导致RTL文本镜像翻转： #

方案1：使用ScrollViewReader定位（推荐，适配iOS 14+） #

通过读取系统布局方向环境变量，在横向列表加载完成后，RTL场景下直接定位到最后一个元素位置即可，无任何副作用：

import SwiftUI

struct HorizontalList: View {
    @Environment(\.layoutDirection) private var layoutDirection
    let things: [Thing] // 你的数据模型，需保证有唯一id属性

    var body: some View {
        ScrollView(.horizontal) {
            ScrollViewReader { proxy in
                LazyHStack {
                    ForEach(things) { thing in
                        Text(thing.name)
                            .id(thing.id) // 绑定元素唯一id
                    }
                }
                .onAppear {
                    // RTL场景下滚动到最后一个元素的右侧位置
                    if layoutDirection == .rightToLeft, let lastItemId = things.last?.id {
                        proxy.scrollTo(lastItemId, anchor: .trailing)
                    }
                }
                // 若数据为异步加载，额外添加监听保证数据更新后触发滚动
                .onChange(of: things) { _ in
                    if layoutDirection == .rightToLeft, let lastItemId = things.last?.id {
                        proxy.scrollTo(lastItemId, anchor: .trailing)
                    }
                }
            }
        }
    }
}

方案2：二次翻转兼容（适配iOS 13+） #

如果需要兼容iOS 13，可通过两次flipsForRightToLeftLayoutDirection修饰符实现：外层ScrollView翻转修改默认滚动位置，内层LazyHStack二次翻转抵消内容镜像的问题：

ScrollView(.horizontal) {
    LazyHStack {
        ForEach(things) { thing in
            Text(thing.name)
        }
    }
    .flipsForRightToLeftLayoutDirection(true)
}
.flipsForRightToLeftLayoutDirection(true)

注意事项 #

• 方案1为优先推荐方案，滚动交互、手势方向完全符合原生系统规范，无隐藏问题
• 方案2实现成本更低，但如果滚动视图内有自定义手势，需自行验证手势方向是否符合预期

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