Skip to content

SwiftUI如何实现横向等分

方法 1:使用 frame(maxWidth: .infinity)

这是最简单的方法,适用于只需要平均分配空间的情况 34

swift
HStack {
    Text("第一列")
        .frame(maxWidth: .infinity)
        .background(Color.red)
    Text("第二列")
        .frame(maxWidth: .infinity)
        .background(Color.green)
    Text("第三列")
        .frame(maxWidth: .infinity)
        .background(Color.blue)
}
HStack {
    Text("第一列")
        .frame(maxWidth: .infinity)
        .background(Color.red)
    Text("第二列")
        .frame(maxWidth: .infinity)
        .background(Color.green)
    Text("第三列")
        .frame(maxWidth: .infinity)
        .background(Color.blue)
}

在这个例子中,每个 Text 视图都被赋予了 maxWidth: .infinity,这使得它们在 HStack 中尽可能地扩展,从而平均分配空间。

如何理解其中原理,可查看如下文档:

[0x053-SwiftUI编程思想-笔记2#灵活框架-flexible-frame]

灵活框架 (flexible frame) 的 API ⽀持⾮常多的参数:我们不仅可以为框架的宽和⾼提供最⼩、最⼤和理想值,还可以为它指定对⻬⽅式。灵活框架的⾏为并不是⾮常直观,但是它们是很有⽤的⼯具,学习它们的⾏为⼗分重要。我们现在先忽略掉理想的宽度和⾼度参数,只考虑最⼤值和最⼩值这两个定义边界的参数。

灵活框架会把所获得的建议尺⼨,按照指定的最⼩值和最⼤值进⾏限制:如果传⼊的尺⼨没有落在最⼩和最⼤值之间,则强制使⽤最⼩和最⼤值作为建议尺⼨并提供给框架的⼦视图。