Início / coding / Perguntas / 79572965
Accepted
Kaven
Asked: 2025-04-14 18:52:35 +0800 CST

SwiftUI MacOS - Lista rolável

  • 772

Talvez eu esteja deixando passar algo óbvio aqui, mas não consigo encontrar uma solução. Quero ter uma List() com altura limitada, que me permita rolar dentro dela. Este é um código de exemplo:

struct TestView: View {
    var items: [String] = [
        "Item 1", "Item 2", "Item 3",
        "Item 4", "Item 5", "Item 6",
        "Item 7", "Item 8", "Item 9",
        "Item 10"
    ]
    @State var selected: String = "one"

    var body: some View {
        Form {
            Section(header: Text("A section")) {
                List(selection: $selected) {
                    ForEach(items, id: \.self) { item in
                        Text(item)
                    }
                }
                .frame(height: 100)
            }
        }
        .formStyle(.grouped)
    }
}

Eu esperava que a Lista me permitisse rolar dentro da altura de 100pt, mas, em vez disso, a lista é simplesmente cortada, sem possibilidade de rolagem. Se eu encapsular a Lista inteira em uma ScrollView, tudo desaparece.

Como habilitar a rolagem de uma Lista dentro de um espaço explicitamente limitado?

macos

1 respostas

  1. Best Answer

    Suspeito que List"s" em um .groupedestilo Formnão seja rolável por natureza . É apenas o Formpróprio estilo que é rolável.

    Alterar o .sidebarestilo de lista torna a lista rolável:

    .listStyle(.sidebar)

    Alternativamente, você pode incorporá-lo em algo ScrollViewcomo isto:

    ScrollView {
    List(selection: $selected) {
        ForEach(items, id: \.self) { item in
            Text(item)
        }
    }
    .containerRelativeFrame(.vertical)
}
.frame(height: 100)

    Sem .containerRelativeFrame(.vertical), o Listterá uma altura muito pequena e será efetivamente invisível. Isso ocorre porque Lists geralmente ocupa toda a altura disponível de seu contêiner, mas em um vertical ScrollView, a "altura disponível" é infinita.

    containerRelativeFrameestá aqui para garantir que a altura do Listcorresponda à altura do ScrollView.

    Observe que isso não funciona diretamente por causa do ScrollView. É porque o Listnão pensa mais que está em um estilo agrupado Form, e o Listse torna rolável novamente. A parte externa ScrollViewtambém é rolável, mas como a Listaltura corresponde exatamente à altura da visualização de rolagem, não é possível saber apenas rolando. Na verdade, há três camadas de visualizações roláveis ​​aninhadas aqui: o formulário, o ScrollViewe o List.

    Nenhuma dessas soluções preserva o estilo que o Listteria se tivesse sido colocado diretamente dentro do Form. A julgar pela aparência desse estilo, ele não parece ter sido projetado para ser rolável.

    • 1

relate perguntas