如何在 SwiftUI 中动态调整图像大小以实现可访问性？答案

【问题标题】：How to dynamically size an image in SwiftUI for accessibility?如何在 SwiftUI 中动态调整图像大小以实现可访问性？
【发布时间】：2021-01-06 22:01:09
【问题描述】：

我有一张图片，我正在对尺寸进行硬编码，但我意识到它不会针对更大尺寸的类别进行缩放。如何设置首选尺寸并让它自动放大到不同的尺寸？

这是我的代码的样子：

HStack(alignment: .top, spacing: 4) {
    Text("Some text")
    Button(action: { showAlert = true }) {
        Image(systemName: "questionmark.circle.fill")
            .resizable()
            .frame(width: 12, height: 12)
            .foregroundColor(.secondary)
    }
}

我还有其他不使用 SF 符号的情况：

Button(action: action) {
    Label(
        title: {
            Text(title)
                .foregroundColor(Color(.label))
        },
        icon: {
            Image("twitter")
                .resizable()
                .frame(width: 24, height: 24)
        }
    )
}

这是它在不同尺寸的预览中的样子，但在较大的比例下图像很小。我该如何处理以实现可访问性？

【问题讨论】：

标签： swiftui accessibility

【解决方案1】：

SwiftUI 2.0 为此提供了ScaleMetric。

这是一个解决方案的演示。使用 Xcode 12.1 / iOS 14.1 测试

普通文本：

最大的文字：

struct TestScaledImage: View {
    @ScaledMetric var scale: CGFloat = 1     // << here !!
    var body: some View {
        HStack(alignment: .top, spacing: 4) {
            Text("Some text")
            Button(action: {  }) {
                Image(systemName: "questionmark.circle.fill")
                    .resizable()
                    .frame(width: 12 * scale, height: 12 * scale)  // << here !!
                    .foregroundColor(.secondary)
            }
        }
    }
}

【讨论】：

哇好优雅！！正是我所希望的！！感谢 SwiftUI 团队和@Asperi 指出这一点！！它甚至可以在预览中使用
只是要注意以防它帮助其他人.. 在 Xcode 12.3 中，我必须这样做：@ScaledMetric var imageSize: CGFloat = 12 而不是相乘

【解决方案2】：

将您的代码包装在 GeometryReader 中

例如

HStack(alignment: .top, spacing: 4) {
    GeometryReader { geo in 
        Text("Some text")
        Button(action: { showAlert = true }) {
            Image(systemName: "questionmark.circle.fill")
                .resizable()
                .frame(width: geo.size.width / 9, height: geo.size.height / 9)
                .foregroundColor(.secondary)
        }
    }
}

然后调整到适合你的任何东西

GeometryReader 可以读取当前设备的宽度和高度信息，并允许您进行调整而不是硬编码。

【讨论】：