Why Doesnt this Wrap Correctly?

Question

Created Jan ’23

Replies 1

Boosts 0

Participants 2

struct TideForecastInfoView: View {
   
  var geometryProxy: GeometryProxy
   
  var body: some View {
    VStack {
      getHeaders(geometryProxy)
       
      TideForecastEntryView(geometryProxy: geometryProxy)
          .padding(2)
    }
    .background(.white)
    .clipShape(RoundedRectangle(cornerRadius: 14))
    .shadow(radius: 8)
  }
   
  @ViewBuilder
  func getHeaders(_ geometryProxy: GeometryProxy) -> some View {
    HStack {
      HStack {
        Text("tide")
          .frame(maxWidth: geometryProxy.size.width * 0.25)
        Text("time")
          .frame(maxWidth: geometryProxy.size.width * 0.5)
        Text("height")
          .frame(maxWidth: geometryProxy.size.width * 0.25)
      }
      .padding(8)
    }
    .frame(maxWidth: .infinity)
    .background(.gray)
  }
 
}

struct TideForecastEntryView: View {
   
  var geometryProxy: GeometryProxy
   
  var body: some View {
    HStack {
      Text("High Tide")
        .frame(maxWidth: geometryProxy.size.width * 0.25)
      Text("1:08 AM (Tue 03) January")
        .frame(maxWidth: geometryProxy.size.width * 0.5, alignment: .leading)
      Text("1.31 m (4.3 ft)")
        .frame(maxWidth: geometryProxy.size.width * 0.25)
    }
  }
}

Result looks like this

03 should be on the first line and maybe parts of the January word. is there something else missing in the Text view option that i need to declare?

Also how to vertical align top for text High Tide. it is always vertically centered. I tried to set alignment: .top in the frame but doesnt do anything.

Thoughts?

Boost

Answer 1

Claude31 OP

Jan ’23

I could not get it wrapping at the right place. It looks like SwiftUI wraps to balance as much as possible to have same length text on both lines. No way to directly ask for a lineBreakMode, unless you go through UIViewRepresentable

https://stackoverflow.com/questions/58469001/how-can-i-get-text-to-wrap-in-a-uilabel-via-uiviewrepresentable-without-having/58474880#58474880

.

how to vertical align top for text High Tide

Declare in the HStack (see below)

I tested with a longer text just to check

              Text("1:08 AM (Tue 03) January and more")

Why do you define explicit GeometryProxy var ? How to you call to initialise (in SceneDelegate for instance).

I changed as follows to be able to test

struct TideForecastInfoView: View {   
   
//  var geometryProxy: GeometryProxy
   
  var body: some View {
      GeometryReader { geometryProxy in
          VStack {
              getHeaders(geometryProxy)
              
              TideForecastEntryView() // geometryProxy: geometryProxy)
                  .padding(2)
          }
          .background(.white)
          .clipShape(RoundedRectangle(cornerRadius: 14))
          .shadow(radius: 8)
      }
  }
   
  @ViewBuilder
  func getHeaders(_ geometryProxy: GeometryProxy) -> some View {
    HStack {
      HStack {
        Text("tide")
          .frame(maxWidth: geometryProxy.size.width * 0.25)
        Text("time")
          .frame(maxWidth: geometryProxy.size.width * 0.5)
        Text("height")
          .frame(maxWidth: geometryProxy.size.width * 0.25)
      }
      .padding(8)
    }
    .frame(maxWidth: .infinity)
    .background(.gray)
  }
 
}

struct TideForecastEntryView: View {
   
//  var geometryProxy: GeometryProxy
   
  var body: some View {
      GeometryReader { geometryProxy in
          HStack(alignment: .top) {  // <<-- To align texts tops
              Text("High Tide")
                  .frame(maxWidth: geometryProxy.size.width * 0.25)
              
              Text("1:08 AM (Tue 03) January")
                  .frame(maxWidth: geometryProxy.size.width * 0.5, alignment: .leading)

              Text("1.31 m (4.3 ft)")
                  .frame(maxWidth: geometryProxy.size.width * 0.25)
          }
      }
  }
}

0