如何在 SwiftUI 中让 2x2 的正方形适合屏幕

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中让 2x2 的正方形适合屏幕

【英文标题】：How to have 2x2 made of squares fit screen in SwiftUI

【发布时间】：2021-05-18 03:56:15

【问题描述】：

我正在尝试通过 VStacks/HStacks 或 LazyVGrid 创建一个 2x2 网格，以使每行上的正方形适合屏幕。例如，第一个和第二个正方形各占屏幕宽度的一半，并根据该长度确定使其成为正方形的高度。我将如何以我提到的两种方式来做到这一点，或者有更好的方法吗？这是我目前所拥有的。

VStack 
    HStack 
        Rectangle()
            .fill(Color.gray)
            .frame(width: 100, height: 100)

        Rectangle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
    
    HStack 
        Rectangle()
            .fill(Color.red)
            .frame(width: 100, height: 100)

        Rectangle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
    

在这里硬编码框架属性的宽度和高度感觉不对，或者这是消除方块之间间隙的方法？这种硬编码值的方式会扩展到其他手机尺寸吗？

LazyVGrid(columns: layout) 
    Rectangle()
        .fill(Color.gray)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.blue)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.red)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.green)
        .frame(width: 210, height: 210)

编辑：这是得到我想要的新代码的样子。

VStack(spacing: 0) 
    HStack(spacing: 0) 
        Rectangle()
            .fill(Color.gray)

        Rectangle()
            .fill(Color.blue)

    
    HStack(spacing: 0) 
        Rectangle()
            .fill(Color.red)

        Rectangle()
            .fill(Color.green)

    

.aspectRatio(1.0, contentMode: .fit)

现在让它与 LazyVGrid 一起工作。

【问题讨论】：

如果只支持竖屏模式，可以使用 UIScreen.main.bounds.width

@SwiftiSwift 很高兴知道这一点。我不知道。

【参考方案1】：

您可以使用GeometryReader，如here所示。

示例用法：

struct MyView: View 
    var body: some View 
       GeometryReader  geo in
           //You now have access to geo.size.width and geo.size.height
       
    

【讨论】：

@SwiftiSwift 为什么？无需查询屏幕尺寸

【参考方案2】：

在这里硬编码框架的宽度和高度感觉不对，或者这是消除方块之间间隙的方法？

要消除正方形之间的间隙，只需修改 HStack / VStack 以包含间距：

HStack(alignment: .center, spacing: 0, content: 
            Rectangle()
                .fill(Color.gray)
                .frame(width: 100, height: 100)

            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
)

【参考方案3】：

只需应用aspectRatio（值为1并适合屏幕）修饰符，无需指定任何框架。

VStack 
    HStack 
        Rectangle()
            .fill(Color.gray)
            
        Rectangle()
            .fill(Color.blue)
            
    
    HStack 
        Rectangle()
            .fill(Color.red)
        
        Rectangle()
            .fill(Color.green)
            
    

.aspectRatio(1.0, contentMode: .fit)

【讨论】：

不需要值。 ContentMode 就够了.aspectRatio(contentMode: .fit)

@Leo 我知道，这个值让 OP 更清楚

@vadian 谢谢。这有帮助。剩下的就是将spacing: 0 添加到 VStack 和两个 HStack 中。