How to dynamically size an image in SwiftUI for accessibility?

问题

I have an image that I'm hard coding the size, but realized it's not scaling for larger size categories. How can I set a preferred size and let it scale up to different sizes automatically?

This is what my code looks like:

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

I also have other scenario where it's not using a SF Symbol:

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

This is how it looks in preview in different sizes, but the images are tiny in the larger scales. How do I handle this to achieve accessibility?

回答1:

SwiftUI 2.0 provides ScaleMetric for this purpose.

Here is a demo of solution. Tested with Xcode 12.1 / iOS 14.1

Normal text:

Largest text:

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

回答2:

Wrap your code in a GeometryReader

for example

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

}

Then just adjust to whatever suits you

A GeometryReader reads whatever the current devices width and height info is and allows you adjust that instead of hard coding.

来源：https://stackoverflow.com/questions/65603929/how-to-dynamically-size-an-image-in-swiftui-for-accessibility

标签

swiftui

accessibility