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

问题描述

我正在尝试通过 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)
    }
}

Stacks

在这里对 frame 属性的宽度和高度进行硬编码感觉是错误的,或者这是消除方块之间间隙的方法?这种硬编码值的方式是否可以扩展到其他手机尺寸?

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)
}

LazyVGrid

编辑:这是获得我想要的新代码的样子。

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)

enter image description here

现在让它与 LazyVGrid 一起工作。

解决方法

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

示例用法:

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

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

要消除方块之间的间隙,只需修改 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)
})
,

只需应用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)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...