今天，我想与大家分享我在SwiftUI中经常使用的一种技术Template-View。当我需要使用支持动态类型的相等大小的视图放置垂直或水平堆栈时，它可以帮助我解决问题。假设您正在使用的视图应该代表一周中每一天的平均心率。我将使用带有文本组件的水平堆栈来实现该视图。
import SwiftUI
struct ContentView: View {
var body: some View {
WeekView(heartRates: [80,78,69,120,59,67])
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct WeekView: View {
let heartRates: [Int]
var body: some View {
HStack {
ForEach(self.heartRates, id: \.self) { hr in
Text(String(hr))
.padding(4)
.background(Color.purple)
.cornerRadius(4)
}
}
}
}
image.png
很简单，对不对？但是这段代码有一个问题。根据文本内容，水平堆栈内的每个视图都有不同的大小。基本的布局系统规则表示，SwiftUI中的每个视图都会计算其大小并将其发送回父级。
我想使水平堆栈中的所有视图大小相同。我们可以通过添加frame修饰符来固定每个视图的大小来轻松解决该问题。
