SwiftUI scale text to fit the width and height

Question

I have several rectangles and above each rectangle, there are texts.

Now, these rectangles are dynamic: they can be very big, or very small depending on the Geometry Reader.

My issue is that I can't make the text scale bigger or smaller according to the size of the rectangles.

This is my example code:

I declare an array of numbers:

var array: [[Int]] = [
    [4,5,6],
    [3,4,9,6],
    [4,7],
    [1,2,3],
    [1,5,5],
    [1,2,4,5,6]]

and this is the body:

    GeometryReader { geo in
        HStack(spacing: 0) {

            ForEach(0..<6, id: \.self) { i in

                ZStack(alignment: .bottom) {

                    LinearGradient(gradient: Gradient(colors: [Color.gray, Color.white]), startPoint: .bottom, endPoint: .top)
                        .frame(width: (geo.size.width - 90) / CGFloat(10), height: 90)
                        .overlay(Rectangle().stroke(Color.white))
                        .cornerRadius(8)

                    VStack(spacing: 0) {
                        ForEach(0..<self.array[i].count) { j in
                            Text("\(self.array[i][j])").font(.footnote)  
                        }
                    }
                }
            }
        }
    }

This is what I tried:

I set the size to be extremely big and the scale factor very small:

Text("\(self.array[i][j])").font(.system(size: 1000)).minimumScaleFactor(0.0005)

I also tried using fixed-size:

.fixedSize(horizontal: false, vertical: false)

and also this line:

.allowsTightening(true)

Answer 1

on UIKit minimumScaleFactor and minimumFontSize are ineffective unless you set adjustsFontSizeToFitWidth .

Instead of creating a VStack , you may want to place all the figures, separated by newlines, in a single text, and fit the text to the bounding rectangle.

With SwiftUI the solution looks like:

struct aView: View {
    let array = [4, 5, 6]

    var body: some View {
        HStack(spacing: 100) {
            Text(array.map {String($0)}.joined(separator: "\n"))
                .font(.system(size: 1000))
                .minimumScaleFactor(0.01)
                .frame(width: 60, height: 300)
                .border(Color.primary)
            Text(array.map {String($0)}.joined(separator: "\n"))
                .font(.system(size: 1000))
                .minimumScaleFactor(0.01)
                .frame(width: 30, height: 150)
                .border(Color.primary)
        }
    }
}