[英]Left and right padding (not leading and trailing) in SwiftUI
A padding modifier in SwiftUI takes an EdgeInsets
, eg SwiftUI 中的填充修饰符采用
EdgeInsets
,例如
.padding(.leading, 8)
However, there are only leading and trailing EdgeInsets, and not left and right.但是,只有前导和尾随的 EdgeInsets,而不是左右。 This presents a problem because not everything in RTL languages should necessarily be reversed from the way it's displayed in LTR languages.
这带来了一个问题,因为并非 RTL 语言中的所有内容都必须与 LTR 语言中的显示方式相反。
Is there a way to achieve the same or similar effect as the padding modifier, which forces the padding to be on left or right side, regardless of directionality of the language?有没有办法实现与填充修饰符相同或相似的效果,无论语言的方向如何,它都会强制填充在左侧或右侧?
Here is a simplified demo of possible approach - use extension with injected fixed-sized Spacer
at each side.这是可能方法的简化演示 - 使用在每侧注入固定大小的
Spacer
的扩展。
Prepared & tested with Xcode 13 / iOS 15使用 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)
}
}
}
}
demo of usage使用演示
var body: some View {
TextField("Last Name", text: $nameLast)
.textFieldStyle(.roundedBorder)
.padding(sides: [.left], value: 20)
}
Use @Environment(\.layoutDirection)
to get the current layout direction (LTR or RTL) and use it to flip .leading
and .trailing
as needed.使用
@Environment(\.layoutDirection)
获取当前布局方向(LTR 或 RTL),并根据需要使用它来翻转.leading
和.trailing
。
Here's a ViewModifier
that wraps all that conveniently:这是一个方便地包装所有内容的
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))
}
}
Use it like you would the standard padding modifiers:像使用标准填充修饰符一样使用它:
Text("Text")
.padding(.left, 10)
For me it was对我来说是
VStack(alignment: .center) {
Text("Car")
.font(.body)
.foregroundColor(.black)
}
.padding(.trailing, 5)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.