Check size of view before adding to Stack with max width

About Me

Latinos MediaSyndication

The Latinos del Mundo Media Syndication profile.

Check size of view before adding to Stack with max width

Posted by - Latinos MediaSyndication -

on - May 5, 2023 -

Filed in - Technology -

362 Views - 0 Comments - 0 Likes - 0 Reviews

I want to achieve a "chip" view where the first chips take a max width of 2/3 of the screen. If there are more chips a count like +2 should be displayed.

To achieve this I was thinking to kind of truncate an HStack. However, I would need to able to check the size of the chip before adding it to the HStack.

private func generateTags(in g: GeometryProxy) -> some View {
    var width = CGFloat.zero
    
    [...]        

    return HStack {
        ForEach(Array(tags.enumerated()), id: \.offset) { index, tag in
            if width < g.size.width * 0.5 {
                tagView(tag: tag)
                    .measureSize { size in
                        width += size.width
                    }
            }
        }
        
        Spacer()
    }
}

extension View {
  func measureSize(perform action: @escaping (CGSize) -> Void) -> some View {
    self.modifier(MeasureSizeModifier())
      .onPreferenceChange(SizePreferenceKey.self, perform: action)
  } 
}

struct SizePreferenceKey: PreferenceKey {
  static var defaultValue: CGSize = .zero

  static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
    value = nextValue()
  }
}

struct MeasureSizeModifier: ViewModifier {
  func body(content: Content) -> some View {
    content.background(GeometryReader { geometry in
    Color.clear.preference(key: SizePreferenceKey.self,
                         value: geometry.size)
    })
  }
}

You can actually ignore the map pin and camera icon. What I want to achieve are chips that use the full width but show a truncated info (e.g. +2) if there are more chips that do not fit.

Read Full News Here

Pinterest More Stuff

Photos

Photos

0 albums found

Related News

Check size of view before adding to Stack with max width

Photos