4

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

echo
  • 1,244
  • 1
  • 16
  • 40

1 Answers1

1

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()
        }
    }
}
kontiki
  • 37,663
  • 13
  • 111
  • 125
  • Are you using any modifiers on your preview setup? If so, which one? – kontiki Jul 03 '19 at 12:35
  • 1
    Also note that if whenever you want to prevent the ellipses, you may use fiexedSize(). Text will expand outside its bounds as necessary: Text("Tuesday").fixedSize().frame(width: geometry.size.width / 7). – kontiki Jul 03 '19 at 12:42
  • Thank you very much! What I selected is iPhone Xs. I changed it to iPhone XR and everything works fine now. – echo Jul 03 '19 at 14:10
  • @echo I updated the answer to show how it really is a bug. – kontiki Jul 03 '19 at 16:06
  • Thanks for your update! @kontiki Since everything is still a Beta version, I can just use iPhone XR simulator as far as it works. Hope this bug will be fixed in the future new versions. – echo Jul 04 '19 at 01:19
  • I updated my answer, as it seems the problem has been resolved in beta 5. – kontiki Jul 30 '19 at 09:08