SwiftUI根据语言显示视图排版方向的layoutDirection

在 SwiftUI 中，layoutDirection 是一个与用户界面布局方向相关的环境值。它决定了视图内容的排版方向，是由系统根据当前语言或地区的文字书写习惯自动设置的。

布局方向

从左到右（LTR，Left-to-Right）：

默认方向，适用于大多数语言（如英语、法语、中文）。

layoutDirection 为 .leftToRight。

从右到左（RTL，Right-to-Left）：

适用于阿拉伯语、希伯来语等从右到左书写的语言。

layoutDirection 为 .rightToLeft。

如何获取 layoutDirection

SwiftUI 提供了一个 @Environment 属性包装器，用于访问 layoutDirection 值：

@Environment(\.layoutDirection) var layoutDirection

如何使用 layoutDirection

1、判断当前方向

可以根据 layoutDirection 的值来调整视图布局：

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

    var body: some View {
        Text("Hello, World!")
            .padding()
            .background(layoutDirection == .leftToRight ? Color.green : Color.blue)
    }
}

2、动态调整视图排列

对于支持从右到左语言的布局，可以使用 layoutDirection 动态反转排列方向：

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

    var body: some View {
        HStack {
            if layoutDirection == .leftToRight {
                Text("Leading")
                Spacer()
                Text("Trailing")
            } else {
                Text("Trailing")
                Spacer()
                Text("Leading")
            }
        }
        .padding()
    }
}

3、水平翻转视图

使用 layoutDirection 来翻转视图：

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

    var body: some View {
        Image(systemName: "arrow.right")
            .resizable()
            .frame(width: 50, height: 50)
            .scaleEffect(x: layoutDirection == .rightToLeft ? -1 : 1, y: 1)
    }
}

系统如何决定 layoutDirection

layoutDirection 是由系统的语言设置自动决定的。具体逻辑如下：

系统语言：系统根据用户在“设置”中选择的语言决定 layoutDirection。

强制设置：如果需要在 SwiftUI 应用中强制设置方向，可以在 View 的环境中明确指定：

ContentView()
    .environment(\.layoutDirection, .rightToLeft) // 强制右到左

适配从右到左语言的建议

1、检查对称性：在适配 RTL 布局时，确保所有内容对称，包括文本、按钮、图标等。

2、优先使用系统行为：SwiftUI 会自动处理大部分从右到左语言的适配，例如 HStack 的默认排列。

3、手动控制布局：如果需要完全自定义布局，可以根据 layoutDirection 使用条件渲染或调整视图。