CODEWITHSUNDEEP
swiftuitruncation
echo
echo

Reputation: 1600

The truncation problem of SwiftUI Text View

I am making a swiftUI calendar and met a weird truncation problem of SwiftUI Text View.

struct test : View {
var body: some View {
    GeometryReader { geometry in
        HStack(alignment: .center, spacing: 0) {
            ForEach(0..<7) { _ in
                Text("Tue").frame(width: geometry.size.width / 7).border(Color.red, width: 2)
            }               
        }
    }
}
}

enter image description here

In the beginning, I thought it might be because the Text View size is not big enough. But when I decrease the Text View Width, the truncation is gone. I also tried to set a smaller font and it didn't work too. Thanks for any hint!

struct test : View {
var body: some View {
    GeometryReader { geometry in
        HStack(alignment: .center, spacing: 0) {
            ForEach(0..<7) { _ in
                Text("Tue").frame(width: geometry.size.width / 8).border(Color.red, width: 2)
            }
        }
    }
}
}

enter image description here

Upvotes: 4

Views: 4689

Answers (1)

kontiki
kontiki

Reputation: 40509

Beta 5

In beta 5 it seems the problem has been resolved.

Beta 4 and Previous

It is definitely a bug that only shows in the iPhone XS, but not with the iPhone XR. Note that the XS is 375 points wide, while the XR is 414 points. However, that has nothing to do with it. 375 is more than enough to fit the 7 labels.

I think you should submit a bug report, and in the meantime, use the XR for development. If anyone has an actual device, it would be nice to know if the bug is also present there.

I created this small example that shows how erratically it works on the Xs

enter image description here

And here is the Xr, which works as it should:

enter image description here

Here's the code of the example:

struct ContentView: View {
    @State private var slider: Float = 100.0

    var body: some View {
        VStack {
            GeometryReader { geometry in
                HStack(alignment: .center, spacing: 0) {
                    ForEach(0..<7) { _ in
                        Text("Tue").frame(width: geometry.size.width / 7, height: 30).border(Color.blue)
                    }
                }
            }.frame(width: Length(slider), height: 40)
            Text("\(slider)")
            Slider(value: self.$slider, from: 100.0, through: 375.0, by: 1.0)
            Spacer()
        }
    }
}

Upvotes: 1

Related Questions