swiftui改变图片尺寸_使您的SwiftUI应用程序可扩展，并为不同的屏幕尺寸做准备。...

最新推荐文章于 2024-06-15 09:31:27 发布

weixin_26737625

最新推荐文章于 2024-06-15 09:31:27 发布

阅读量924

点赞数

文章标签： python java

原文链接：https://itnext.io/make-your-swiftui-app-scaleable-and-prepare-for-different-screen-sizes-eed42326b11c

版权

swiftui改变图片尺寸

There are two things to consider when building an app, that should look good on every device. Different screen sizes and text scaling. And that’s what this short article is about, so let’s dive right into it.

构建应用程序时需要考虑两件事，在每台设备上看起来都不错。不同的屏幕尺寸和文本缩放。这就是这篇简短的文章的目的，所以让我们直接研究一下。

形状和视图 (Shapes and views)

When you add a frame to shapes or views, with absolute values, you will probably notice, that it doesn’t look good on every device. And if not, run on multiple simulators. Or even easier, change the device and see the changes in the Live Preview.

当您将具有绝对值的框架添加到形状或视图时，您可能会注意到，它并不是在所有设备上看起来都不错。如果没有，请在多个模拟器上运行。甚至更容易地，更改设备并在实时预览中查看更改。

The problem is, that the width of the blue rectangle (here 360), is bigger than the screen width of the iPod. Also it’s nearly too big for the iPhone SE. On the iPhone 11 it looks great though. Now there are two options to fix this. You can either use padding, instead of a frame, or use relative values.

问题在于，蓝色矩形的宽度(此处为360)大于iPod的屏幕宽度。而且对于iPhone SE来说，它太大了。在iPhone 11上看起来不错。现在有两个解决方案。您可以使用填充而不是框架，也可以使用相对值。

struct LargeButton: View {
    @ViewBuilder var body: some View {
        HStack {
            Spacer()
            Text("Press me")
            Spacer()
        }.foregroundColor(.white).padding().background(Rectangle().cornerRadius(10).foregroundColor(.blue)).padding(20)
    }
}

Now, it has a constant padding of 20 between all devices. You could also use the default padding.

现在，它在所有设备之间的填充恒定为20。您也可以使用默认填充。

struct LargeButton: View {
    @ViewBuilder var body: some View {
        Text("Press me").foregroundColor(.white).padding().background(Rectangle().cornerRadius(10).foregroundColor(.blue).frame(width: UIScreen.main.bounds.width * 0.9)).padding()
    }
}

With this, the button is always 90 % the width of the screen. For iPads, the button is too big, so you need to specify a different value.

这样，按钮始终是屏幕宽度的90％。对于iPad，该按钮太大，因此您需要指定其他值。

struct LargeButton: View {
    
    var width: CGFloat {
        if UIDevice.current.userInterfaceIdiom == .phone {
            return UIScreen.main.bounds.width * 0.9
        } else {
            return UIScreen.main.bounds.width * 0.4
        }
    }
    
    @ViewBuilder var body: some View {
        HStack {
            Text("Press me").padding()
        }.foregroundColor(.white).padding().background(Rectangle().cornerRadius(10).foregroundColor(.blue).frame(minWidth: width).padding())
    }
}

比例公制 (Scaled Metric)

With SwiftUI 2, Apple added the @ScaledMetric property wrapper, that reflects the dynamic type settings. They reach from extra small to accesibility XXL.

在SwiftUI 2中，Apple添加了@ScaledMetric属性包装器，该包装器反映了动态类型设置。它们的范围从极小到可访问性XXL。

Although the most shouldn’t, some UI elements should scale too. But you won’t probably need this so often. Be sure, to not use it on big images and views. You can simply add the sizes as @ScaledMetric variable to your view.

尽管大多数功能不应该这样做，但某些UI元素也应缩放。但是您可能不会经常需要此功能。请确保不要在大图和视图上使用它。您可以简单地将大小作为@ScaledMetric变量添加到视图中。

struct ContentView: View {
    @ScaledMetric var width: CGFloat = 60
    @ScaledMetric var height: CGFloat = 40
    
    var body: some View {
        Rectangle().frame(width: width, height: height)
    }
}

Now, the rectangle scales with the dynamic type settings. You can make it even easier, when having a single variable, with which you calculate the sizes.

现在，矩形会随着动态类型设置缩放。使用单个变量来计算尺寸时，可以使操作变得更加容易。

struct ContentView: View {
    @ScaledMetric var size: CGFloat = 1
    
    var body: some View {
        Rectangle().frame(width: 60 * size, height: 40 * size)
    }
}

文本 (Text)

SwiftUI’s fonts (like .footnote, .body, .title) are already resizable. But when you want more options, you leave the predefined texts are create your owns. The don’t scale. But this is as easy as above.

SwiftUI的字体(如.footnote，.body，.title)已经可以调整大小。但是，当您需要更多选项时，您将保留预定义的文本，然后创建自己的文本。不要缩放。但这和上面一样简单。

struct ContentView: View {
    @ScaledMetric var size: CGFloat = 1
    
    var body: some View {
        Text("Hello world").font(.system(size: 19 + size, weight: .bold, design: .rounded))
    }
}