我正在try 建立订阅价格信息框,如下面的屏幕截图所示.我如何才能使这些方框成为正方形并占据整个屏幕的宽度(减go 间距)?
(Just to be clear, I'm interested in how two boxes can be square and take their height values from screen size automatically. I'm not interested in full design as it will be handled after achieving the box sizes)个 到目前为止,我try 的方法如下:
这是针对各个盒子的:
struct SubscriptionPriceBox: View {
let title: String
let duration: String
let price: String
let renewInfo: String
var body: some View {
ZStack(alignment: .top) {
VStack {
VStack {
Text(duration)
Text(price)
}
Text(renewInfo)
}
.overlay {
RoundedRectangle(cornerRadius: 2)
.stroke(.gray, lineWidth: 2)
}
.aspectRatio(1, contentMode: .fit)
.frame(maxWidth: .infinity)
Text(title)
.background(Color.yellow)
.offset(x: -20, y: -10)
}
.background(Color.red)
}
下面的代码是它们的容器视图:
var body: some View {
VStack {
HStack(alignment: .center) {
SubscriptionPriceBox(title: "Basic Price",
duration: "Monthly",
price: "2.49$ / month",
renewInfo: "Renew every month")
SubscriptionPriceBox(title: "Save 33%",
duration: "Annual",
price: "19.99$ / month",
renewInfo: "Renew every year")
}.fixedSize(horizontal: true, vertical: false)
我认为使用GeometryReader是一种 Select ,但无法完全解决这一问题.此外,如果有一种方法可以在不使用GeometryReader的情况下实现这一点,我很想了解一下.