Ios SwiftUI:有钉住和邻居的复杂布局?

Ios SwiftUI:有钉住和邻居的复杂布局?,ios,swift,swiftui,Ios,Swift,Swiftui,下面的布局很容易用老式的Autolayout实现,但我看不出如何用SwiftUI实现同样的效果。下面是我要渲染的视图的示例: 这显示了同一视图的3个变体。该视图有3个文本子级。左、中、右,具有以下属性: 左视图和右视图固定在superview的前导视图和尾随视图上,中心视图始终保持在superview的中心位置(1) 如果任一侧视图缺失或为空,则中心视图将保持居中(2) “中心视图”会一直增长,直到它碰到任意一侧视图,然后剪辑其内容(3) 我能做的最好的就是下面这个示例,但它有一个缺点,即

下面的布局很容易用老式的Autolayout实现,但我看不出如何用SwiftUI实现同样的效果。下面是我要渲染的视图的示例:

这显示了同一视图的3个变体。该视图有3个文本子级。左、中、右,具有以下属性:

  • 左视图和右视图固定在superview的前导视图和尾随视图上,中心视图始终保持在superview的中心位置(1)
  • 如果任一侧视图缺失或为空,则中心视图将保持居中(2)
  • “中心视图”会一直增长,直到它碰到任意一侧视图,然后剪辑其内容(3)
我能做的最好的就是下面这个示例,但它有一个缺点,即中心视图优先于侧视图,因此会对它们进行剪辑

如何使用SwiftUI布局实现这一点

import SwiftUI

struct MyExample: View {

    let leftText:String
    let mainText:String
    let rightText:String

    var body: some View {
        HStack{
            HStack {
                Text(self.leftText)
                    .modifier(MyBigFont())

                Spacer()
            }

            Text(self.mainText)
                .modifier(MyBigFont())
                .layoutPriority(1.0)

            HStack {
                Spacer()
                Text(self.rightText)
                    .modifier(MyBigFont())

            }
        }
    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            MyExample(leftText:"ABC", mainText:"1234", rightText:"XYZ").padding()
            MyExample(leftText:"", mainText:"1234", rightText:"XYZ").padding()
            MyExample(leftText:"ABC", mainText:"1234567890", rightText:"XYZ").padding()
            Spacer()
        }
    }
}

struct MyBigFont: ViewModifier {
    func body(content: Content) -> some View {
        content
            .lineLimit(1)
            .font(Font.system(size: 42).bold())
    }
}

输出:


如果左侧或右侧太宽,需要截断,则可以取消中间部分的居中位置,但除此之外,我相信在侧边文本中添加
fixedSize()
<文本上的code>fixedSize()

var body: some View {
    HStack{
        HStack {
            Text(self.leftText)
                .modifier(MyBigFont())
                .fixedSize()   // <====

            Spacer()
        }

        Text(self.mainText)
            .modifier(MyBigFont())
            .padding(.horizontal)
            .layoutPriority(1.0)


        HStack {
            Spacer()
            Text(self.rightText)
                .modifier(MyBigFont())
                .fixedSize()    // <====
        }
    }
}
var主体:一些视图{
HStack{
HStack{
文本(self.leftText)
.modifier(MyBigFont())

.fixedSize()//根据需要尝试使用zstack,它将为您节省几行代码。例如,下面是如何简单地显示标题,其中包含一个左对齐的项目,一个在同一行中居中对齐的项目:

ZStack(){
HStack{
    Image("star").resizable().foregroundColor(.white).frame(width: 50, height: 50)
    Spacer()
}
    Image("star").resizable().font(.title).foregroundColor(.white).frame(width: 50, height: 50) }

好的,这里有几件事。首先,堆栈视图,它们是救命稻草。其次,您可以在属性面板中设置这些项目的优先级。Apple HIG指南建议不要截断字符串,而是建议您对它们进行缩放。我会对可能很长的字符串设置自动缩放因子,然后对那些需要先设置什么。@xTwisteDx是的,我同意堆栈。同样是的,自动缩放优于截断。我只是想简化示例。您可以在示例中看到,我设置了优先级。自动缩放对我发布的示例没有帮助,因为它只会在截断侧视图并用完空间后才开始缩放。这工作得很好,Rob!但是,我不明白为什么需要这样做。从“layoutPriority”文档中可以看出:“父布局应该为具有最高布局优先级的子布局提供所有提供给父布局的空间减去其所有低优先级子布局所需的最小空间,依此类推。”这难道不意味着SwiftUI应该给侧文本一个最小的大小来适应它们的内容吗?你知道为什么它们在没有fixedSize()修饰符的情况下会被折叠吗?感谢你的精心设计,Rob。这很有道理。(我的直觉是“最小空间”=“固有大小”来自自动布局。)这不满足要求(3),以防万一,但……这很简单。@MikeBernardo@asperi是的,确实如此。中心视图只会增长到与标有.fixedSize()的侧文本对齐为止。这绝对不符合我列出的第三个要求:“中心视图增长到与任意侧视图对齐,然后剪辑其内容”.我需要所有3个视图进行水平交互。无法使用Z堆栈进行此操作。