Início / coding / Perguntas / 79559443
Accepted
Konstantin.Efimenko
Asked: 2025-04-07 16:56:36 +0800 CST

Como fazer com que a altura do LazyHStack seja igual ao item mais alto

  • 772

Tenho cartões rolados horizontalmente, cada um com uma altura diferente. O problema é que o LazyHStack pega a altura do primeiro item, mas como alterá-la se houver um item maior? Alterar a altura no momento da rolagem também é bom. Sei que esse problema pode ser resolvido usando um HStack não preguiçoso, mas preciso de uma solução para o LazyHStack.

let items = ["Short", "Also short", "Short again", "But this is veeeery veeeery looong!"]
ScrollView(.vertical) {
    VStack {
        ScrollView(.horizontal) {
           LazyHStack {
              ForEach(0 ..< items.count) { index in
                  Text(items[index])
                      .frame(width: 150)
              }
           }
        }
        Text("Some static content here")
    }
}
swift

1 respostas

  1. Best Answer

    Uma maneira de abordar esse problema é usar um array para armazenar as alturas dos itens. O array pode ser preenchido usando um .onGeometryChangemanipulador nos próprios itens. No entanto, você provavelmente precisará aplicar um .fixedHeightmodificador aos itens para garantir que eles usem toda a altura necessária (em particular, para garantir que textos longos não sejam truncados).

    Então, a altura do conteúdo pode ser determinada se o índice mínimo/máximo dos itens visíveis for conhecido.

    Eu estava pensando que o modificador onScrollTargetVisibilityChange(idType:threshold:_:)seria ideal para determinar quais itens são visíveis (requer iOS 18). No entanto, quando tentei, às vezes eram relatados erros no console, pois o ScrollTargetVisibilityChange tentava atualizar várias vezes por quadro .

    Como uma abordagem alternativa, os itens podem atualizar duas variáveis ​​de estado para firstVisibleIndexe lastVisibleIndex, conforme determinado pelo deslocamento de rolagem. Uma propriedade computada pode então fornecer a altura do conteúdo. A largura do ScrollViewtambém é necessária para essa abordagem. Isso pode ser medido usando outro .onGeometryChangemodificador em ScrollView.

    Aqui está o exemplo atualizado para mostrar que funciona:

    struct ContentView: View {
    let items = [
        "Short",
        "Also short",
        "Short again",
        "But this is veeeery veeeery looong!",
        "The quick",
        "brown fox",
        "jumps over",
        "the lazy dog",
        "The quick brown fox jumps over the lazy dog"
    ]
    let spacing: CGFloat = 10
    @State private var heights: [CGFloat]
    @State private var firstVisibleIndex = 0
    @State private var lastVisibleIndex = 0
    @State private var scrollViewWidth = CGFloat.zero

    init() {
        heights = .init(repeating: 0, count: items.count)
    }

    private var minContentHeight: CGFloat? {
        firstVisibleIndex <= lastVisibleIndex
            ? heights[firstVisibleIndex...lastVisibleIndex].max()
            : nil
    }

    var body: some View {
        ScrollView(.vertical) {
            VStack {
                ScrollView(.horizontal) {
                    LazyHStack(alignment: .top, spacing: spacing) {
                        ForEach(Array(items.enumerated()), id: \.offset) { index, item in
                            Text(item)
                                .fixedSize(horizontal: false, vertical: true)
                                .padding()
                                .frame(width: 150)
                                .background(Color(hue: Double(index) * (1 / Double(items.count)), saturation: 0.5, brightness: 0.8))
                                .onGeometryChange(for: CGRect.self) { proxy in
                                    proxy.frame(in: .scrollView)
                                } action: { frame in
                                    if frame.height > heights[index] {
                                        heights[index] = frame.height
                                    }
                                    if frame.minX <= spacing && frame.maxX > 0 {
                                        firstVisibleIndex = index
                                    }
                                    if frame.minX < scrollViewWidth && frame.maxX >= scrollViewWidth - spacing {
                                        lastVisibleIndex = index
                                    }
                                }
                        }
                    }
                    .padding(.horizontal, spacing)
                    .frame(minHeight: minContentHeight)
                }
                .onGeometryChange(for: CGFloat.self) { proxy in
                    proxy.size.width
                } action: { width in
                    scrollViewWidth = width
                }

                Text("Some static content here")
                    .padding()
                    .background(.yellow)
            }
            .animation(.default, value: minContentHeight)
        }
    }
}

    Animação

    • 1

relate perguntas