ios SwiftUI中的左右填充(不是前导和尾随)

xxslljrj  于 2023-07-01  发布在  iOS
关注(0)|答案(4)|浏览(81)

SwiftUI中的padding修饰符采用EdgeInsets,例如
.padding(.leading, 8)
但是,只有前导和尾随EdgeInsets,而没有left和right。这带来了一个问题,因为RTL语言中的所有内容都不一定要与LTR语言中的显示方式相反。
有没有一种方法可以达到与padding修饰符相同或相似的效果,即强制padding位于左侧或右侧,而不管语言的方向性如何?

aor9mmx1

aor9mmx11#

这里是一个可能的方法的简化演示-使用在每一侧注入固定大小的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)
}

vsaztqbk

vsaztqbk2#

使用@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)
qhhrdooz

qhhrdooz3#

对我来说是的

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

0yycz8jy4#

struct ContentView: View {
var body: some View {
    Text("Hello, SwiftUI!")
        .padding(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20)) // Apply custom padding values
}

}

相关问题