SwiftUI 中的左右填充（不是前導和尾隨）

Question

SwiftUI 中的填充修飾符采用EdgeInsets ，例如

.padding(.leading, 8)

但是，只有前導和尾隨的 EdgeInsets，而不是左右。 這帶來了一個問題，因為並非 RTL 語言中的所有內容都必須與 LTR 語言中的顯示方式相反。

有沒有辦法實現與填充修飾符相同或相似的效果，無論語言的方向如何，它都會強制填充在左側或右側？

Answer 1

這是可能方法的簡化演示 - 使用在每側注入固定大小的Spacer的擴展。

使用 Xcode 13 / iOS 15 准備和測試

enum Side: Equatable, Hashable {
    case left
    case right
}

extension View {
    func padding(sides: [Side], value: CGFloat = 8) -> some View {
        HStack(spacing: 0) {
            if sides.contains(.left) {
                Spacer().frame(width: value)
            }
            self
            if sides.contains(.right) {
                Spacer().frame(width: value)
            }
        }
    }
}

使用演示

var body: some View {
  TextField("Last Name", text: $nameLast)
    .textFieldStyle(.roundedBorder)
    .padding(sides: [.left], value: 20)
}

備份

Answer 2

使用@Environment(\.layoutDirection)獲取當前布局方向（LTR 或 RTL），並根據需要使用它來翻轉.leading和.trailing 。

這是一個方便地包裝所有內容的ViewModifier ：

enum NoFlipEdge {
    case left, right
}

struct NoFlipPadding: ViewModifier {
    let edge: NoFlipEdge
    let length: CGFloat?
    @Environment(\.layoutDirection) var layoutDirection
    
    private var computedEdge: Edge.Set {
        if layoutDirection == .rightToLeft {
            return edge == .left ? .trailing : .leading
        } else {
            return edge == .left ? .leading : .trailing
        }
    }
    
    func body(content: Content) -> some View {
        content
            .padding(computedEdge, length)
    }
}

extension View {
    func padding(_ edge: NoFlipEdge, _ length: CGFloat? = nil) -> some View {
        self.modifier(NoFlipPadding(edge: edge, length: length))
    }
}

像使用標准填充修飾符一樣使用它：

Text("Text")
    .padding(.left, 10)

Answer 3

對我來說是

VStack(alignment: .center) {
                    Text("Car")
                        .font(.body)
                        .foregroundColor(.black)
                }
                .padding(.trailing, 5)