如何水平对齐两个文本视图,以便前缘和后缘在中间相遇?

DPMitu

我有两个文本视图。它们水平放置在一起。我怎样才能对齐它们,使得视图的交汇点也是容器视图的中心,不管任何一个字符串有多长?

例如...

这是第一个字符串|第二个字符串。

此处的管道将是容器视图的中心。显然,除非两个字符串的宽度完全相同,否则简单的 HStack 是行不通的。(旁注:在我的特定用例中,字符串不会太长以至于需要截断或换行,但这可能对其他有此问题的人有用)。

jnpdx

您可以.frame(maxWidth: .infinity)在两个Texts使用 a ,这最终会使它们的宽度相等(父级的 50%)。

struct ContentView : View {
    var body: some View {
        VStack {
            HStack(spacing: 2) {
                
                Text("Short")
                    .frame(maxWidth: .infinity, alignment: .trailing)
                    .border(Color.blue)
                Text("Longer. This is longer text....")
                    .lineLimit(1) // remove/change this if you want it to accommodate multiple lines
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .border(Color.green)
            }
        }
    }
}

您可以alignment根据需要在每个上当然,边框仅用于调试。

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在列表项中水平对齐两个文本视图

ConstraintLayout左对齐两个水平链的中间元素?

在 flexbox 中间水平对齐两个跨度

约束布局将两个视图垂直和水平对齐

如何在两个div的中间垂直对齐文本

如果两个水平对齐的项目(名称和价格)避免与NativeScript GridLayout重叠文本

R-两个如何在图的中间对齐两个y轴和零

如何调整文本视图的两个角的文本对齐方式

如何浮动两个锚链接,水平和垂直对齐文本?

如何使用约束布局对齐两个文本视图,其中一个文本视图具有填充?

在Android中对齐两个文本视图的基线

如何水平对齐两个UILabel(具有固定宽度和可变宽度)

react-native如何在左对齐的行视图中放置两个文本?

如何在相对布局中水平设置两个文本视图相等的大小

如何水平对齐两个React组件?

如何使用CKStackLayoutComponent将两个标签水平对齐?

如何在html中水平对齐两个按钮

如何在 Flutter 中将行与文本和两个图标对齐

如何在Android中对齐两个视图?

水平对齐两个元素

水平对齐两个响应图像

水平对齐两个Div的问题

水平对齐两个反应元素

水平对齐两个DIV的问题

如何显示两个水平的文本视图,其中一个根据内容调整大小?

使用正确的对齐方式在HStack中对齐两个SwiftUI文本视图

如何使用大小类和自动布局将两个UI按钮在Xib中水平对齐

如何使两个视图之间的底部对齐并使顶部与父视图同时对齐?

如何以编程方式创建CardView并在其中垂直对齐的两个文本视图?