我正在try 建立订阅价格信息框,如下面的屏幕截图所示.我如何才能使这些方框成为正方形并占据整个屏幕的宽度(减go 间距)?

Subscription pricing

(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的情况下实现这一点,我很想了解一下.

推荐答案

您接近了,可以使用LazyVGrid来确保视图始终为2列,然后使用GeometryReader来匹配大小

        import SwiftUI

    struct boxProblem: View {
        
        private let gridItemLayout = Array(repeating: GridItem(.flexible(), spacing: 10), count: 2)
        
        var body: some View {
            VStack {
                LazyVGrid(columns: gridItemLayout) {
                    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")
                }
                .padding(.horizontal)
            }
        }
    }

    struct SubscriptionPriceBox: View {
        let title: String
        let duration: String
        let price: String
        let renewInfo: String
        
        var body: some View {
            GeometryReader { geometry in
                ZStack(alignment: .topLeading) {
                    
                    VStack {
                        VStack {
                            Text(duration)
                            Text(price)
                        }
                        Text(renewInfo)
                    }
                    .frame(maxWidth: .infinity)
                    .frame(height: geometry.size.width)
                    .overlay {
                        RoundedRectangle(cornerRadius: 2)
                            .stroke(.gray, lineWidth: 2)
                    }
                    Text(title)
                        .background(Color.yellow)
                        .offset(x: -20, y: -10)
                }
                .background(Color.red)
            }
        }
    }

enter image description here

Ios相关问答推荐

如何在SwiftUI中扩展双击的可检测区域?

设置托管在DigitalOcean上的iOS通用链接

SwiftUI图表-默认情况下,X轴数据点的间距不相等

拖动手势导致 sim 崩溃 Swift UI

如何创建装饰视图?

比较 `某个协议` 实例时出现编译错误

在自定义 ButtonStyle 中修改形状 colored颜色

Flutter Aging Person 自定义小部件

@MainActor 类的扩展是主要演员吗?

在 Swift 中 @MainActor 似乎被 withCheckedContinuation 而不是其他异步调用继承是巧合吗?

视觉扫描无法识别 iOS16 上的 GS1 条码特殊字符

有没有办法访问自动生成的 Codable 一致性的编码键?

在 iPad 上删除列表的顶部和底部行

DateFormatter 使用 TimeZone 和 Locale 的特定组合返回 nil

Watchkit AppIcon - 名为AppIcon的应用图标集没有任何适用的内容

Xcode 缺少支持文件 iOS 12.2 (16E227)

UIView 动画与 CALayers

由于 NSInvalidUnarchiveOperationException 导致 iOS11 WKWebview 崩溃

为信用卡输入格式化 UITextField,例如 (xxxx xxxx xxxx xxxx)

使用 Chrome DevTools 调试 iOS 6+7 Mobile Safari