Início / coding / Perguntas / 77044543
Accepted
lazarevzubov
Asked: 2023-09-05 20:31:16 +0800 CST

Preenchendo todo o espaço disponível por uma das visualizações filhas do ScrollView

  • 772

No meu aplicativo, tenho ScrollViewuma subvisão estática como cabeçalho e uma LazyVStackcom vários elementos preenchidos com dados do modelo de visualização. Além disso, se esses dados "dinâmicos" estiverem vazios, em vez de LazyVStack, mostro uma visualização de espaço reservado. Aqui está uma estrutura simplificada da visualização:

var body: some View {
  GeometryReader { geometry in
    ScrollView {
      HStack(spacing: .zero) {
        Text("This is my greeting to you")
        Spacer()
      }
      if greetings.isEmpty {
        PlaceholderView()
          .frame(height: geometry.size.height)
      } else {
        LazyVStack {
          ForEach(greetings, id: \.self) {
            Text($0)
          }
        }
      }
    }
  }
}
private var greetings: [String]

PlaceholderView:

VStack {
  Image(systemName: "hand.wave")
  Text("Hello world!")
}

Quero PlaceholderViewser exibido no meio do espaço disponível (ou seja, neste caso, toda a altura da tela menos a altura da HStackparte superior). Muitas perguntas semelhantes aqui sugerem o uso GeometryReader, mas não ajuda neste caso :

GeometryReader { geometry in
  ScrollView {
    HStack(spacing: .zero) {
      Text("This is my greetings to you")
      Spacer()
    }
    if greetings.isEmpty {
      ExampleView()
        .frame(height: geometry.size.height)
    } else {
      LazyVStack {
        ForEach(greetings, id: \.self) {
          Text($0)
        }
      }
    }
  }
}

Usar o código acima PlaceholderViewocupa mais espaço do que o necessário. No meu caso, deveria ser algo como geometry.size.height - hStackHeight:

Existe uma maneira de obter PlaceholderViewexatamente a altura da tela menos HStacka altura de? Qualquer orientação é muito apreciada.

ios

2 respostas

  1. Se você quebrar PlaceholderViewem um segundo GeometryReader, poderá usá-lo para obter o deslocamento vertical no espaço de coordenadas global (sendo este o qual hStackHeightvocê se referiu). Isso pode ser subtraído da altura:

    if greetings.isEmpty {
    GeometryReader { proxy2 in
        PlaceholderView()
            .frame(height: geometry.size.height
                   - proxy2.frame(in: .global).minY)
    }
} else {

    PlaceholderView

    A única coisa com esta solução é que a altura aumenta quando a mensagem no topo é afastada usando uma ação de rolagem. Isso significa que a mensagem e o espaço reservado não se movem em sincronia, o que parece um pouco estranho. Então eu provavelmente optaria por suprimir ScrollViewquando não houver saudações para exibir, conforme resposta de superpuccio.

    EDITAR Finalmente resolvi. Um adicional VStacké necessário dentro do arquivo ScrollView. Então o ajuste pode usar o espaço de coordenadas do arquivo VStack. Isso resolve o problema do movimento de rolagem não sincronizado:

    var body: some View {
    GeometryReader { geometry in
        ScrollView {
            VStack(spacing: 0) {
                HStack(spacing: .zero) {
                    Text("This is my greeting to you")
                    Spacer()
                }
                if greetings.isEmpty {
                    GeometryReader { proxy2 in
                        PlaceholderView()
                            .frame(height: geometry.size.height -
                                   proxy2.frame(in: .named("VStack")).minY
                            )
                    }
                } else {
                    LazyVStack {
                        ForEach(greetings, id: \.self) {
                            Text($0)
                        }
                    }
                }
            }
            .coordinateSpace(name: "VStack")
        }
    }
}
    • 1
  2. Best Answer

    Se você não precisa que o espaço reservado salte para cima e para baixo, evite usar a ScrollViewcaso não haja dados para mostrar. Quero dizer:

    struct SomeView: View {
    @State private var greetings = [String]()

    var body: some View {
        if greetings.isEmpty {
            VStack {
                header
                placeholder
            }
        } else {
            ScrollView {
                header
                LazyVStack {
                    ForEach(greetings, id: \.self) {
                        Text($0)
                    }
                }
            }
        }
    }

    @ViewBuilder
    private var placeholder: some View {
        VStack {
            Image(systemName: "hand.wave")
            Text("Hello World")
        }
        .frame(maxHeight: .infinity)
    }

    @ViewBuilder
    private var header: some View {
        HStack(spacing: .zero) {
            Text("This is my greeting to you")
            Spacer()
        }
    }
}

    O resultado é:

    • 1

relate perguntas