web-dev-qa-db-fra.com

Coins arrondis dans les sections de la liste swiftui

Voici une capture d'écran de l'application iOS 13 Health - Profil utilisateur. J'ai récemment commencé avec swiftui et je me demandais comment développer un écran comme ci-dessous. J'ai essayé des styles de liste simples et groupés. Mais je n'ai pas pu obtenir l'apparence de la disposition ci-dessous.

L'interface utilisateur comme celle-ci peut-elle se développer uniquement en utilisant swiftui-list ?

Je recherche spécialement des sections arrondies et j'inclus une image dans la liste. iOS 13 Health Application - User profile

swiftuiios13swiftui-list
7
uiroshan

Selon mes résultats et à partir de Xcode 11 GM seed 2 (11A420a), rendre cette interface utilisateur n'est pas possible uniquement à partir de la liste swiftui.

Un nouveau style de liste est disponible pour les storyboards nommés insetGrouped . Il a exactement le même look. https://developer.Apple.com/documentation/uikit/uitableview/style

1
uiroshan

Je rencontre le même problème et il semble que vous ne puissiez pas y parvenir avec une liste ou une section.

Lorsque vous placez le modificateur cornerRadius sur une section ou une liste, il est simplement appliqué à tout ce que les internes font arrondir les cellules tandis que la section elle-même est inchangée.

Ma solution était d'éviter complètement les listes et les sections et d'en créer des personnalisées.

Quelque chose comme

SectionView: View {

    body: some View = {
        VStack {
            ForEach {
                CellView()
            }
        }
        .background(Color.white)
        .cornerRadius(10)
        .padding()
    }
}

Et placez ces sections sur une vue Color dans certains ZStack pour avoir un fond gris.

Tenez compte du fait que l'énorme inconvénient est qu'un ForEach rendra toutes les cellules immédiatement, comme si vous avez un millier de cellules alors onAppear() sera appelé pour chaque cellule et étrangement elles sera appelé dans l'ordre inverse.

J'espère que ça aide.

1
Ivan