Benutzerdefinierte Blätter für SwiftUI

Mar 09 2023

Wollten Sie schon immer ein benutzerdefiniertes Blatt mit dynamischer Höhe in SwiftUI erstellen? Da Apple eine native Sheet-Komponente bereitstellt, ist es einfach, diese zum Entwerfen jeder Art von benutzerdefiniertem Sheet zu verwenden, das wir in unserer iOS-App benötigen. Allerdings war das nicht immer so.

Allerdings war das nicht immer so. Ältere Versionen von iOS, wie z. B. iOS 14, unterstützen diese Funktionalität nicht. Wenn Ihre App also diese iOS-Versionen unterstützt, haben Sie nicht den Luxus, dieses Problem nahtlos zu lösen. Aber keine Sorge! Sobald Sie diesen Artikel gelesen haben, können Sie in jedem iOS, das SwiftUI unterstützt, Blätter mit dynamischer Höhe erstellen! Lass es uns versuchen.

Das Erstellen benutzerdefinierter Blätter ist überhaupt nicht kompliziert. Folge einfach meinen Schritten.

Schritt 1: Erstellen Sie eine neue Ansicht für das untere Blatt

Wir müssen zunächst eine neue SwiftUI View-Datei erstellen, also teilen wir unseren Code in verschiedene Dateien auf. Ich habe meins „BottomSheetView“ genannt, Sie können Ihres so nennen, wie Sie möchten.

Sie sollten etwas Ähnliches als Ausgangspunkt sehen. Beginnen wir nun mit der Erstellung.

Schritt 2: Codierungsansicht

Lassen Sie uns einen einfachen VStack erstellen und ihm einige Ansichtsmodifikatoren hinzufügen.

Außerdem ist es wichtig zu beachten, dass dieser VStack in eine andere Stapelansicht eingebettet werden muss, da unser unteres Blatt den gesamten Bildschirm ausfüllen muss. Ich werde es in ZStack einbetten. Vergessen wir auch nicht, unserem VStack einen weißen Hintergrund hinzuzufügen.

Schritt 3: Erstellen Sie eine Bindungsvariable in der übergeordneten Ansicht und übergeben Sie sie an unser unteres Blatt

Unser unteres Blatt sollte nur sichtbar sein, wenn es durch eine Aktion ausgelöst wird.
Fügen wir also etwas Code zu unserem Blatt hinzu.

Fügen Sie am Anfang von View die folgende Zeile hinzu:

@Binding var isShowing: Bool

Schritt 4: Rufen Sie unsere BottomSheetView in der übergeordneten Ansicht auf

Es ist wichtig zu erwähnen, dass jede übergeordnete Ansicht, in der Sie unsere untere Ansicht aufrufen möchten, ZStack als Stammansichtsstapel haben muss. Mit Hilfe von ZStack überschreibt unser unteres Blatt den darunter liegenden Inhalt.

Rufen Sie in ZStack in Ihrer übergeordneten Ansicht einfach Ihre BottomSheetView auf. Wie Sie sich aus Schritt 3 erinnern können, müssen wir unserer BottomSheetView einen Bindungsbool bereitstellen. Erstellen Sie also zu Beginn der übergeordneten Ansicht eine Bindungsvariable.

@State var isShowingBottomSheet: Bool = false

Button {
    isShowingBottomSheet = true
} label: {
    Text(“Show bottom sheet”)
}
.buttonStyle(.borderedProminent)

Wie Sie auf dem Screenshot oben sehen können, sieht unser Blatt schrecklich aus. Lasst es uns verbessern.

Fügen Sie in unserem BottomSheetView ZStack über dem VStack den folgenden Code hinzu

Color.black
    .opacity(0.3)
    .ignoresSafeArea()
    .onTapGesture {
        isShowing = false
    }

.animation(.easeInOut)

.transition(.move(edge: .bottom))

Die Verwendung ist wirklich einfach. Rufen Sie es einfach als regulären ViewModifier auf und übergeben Sie einen weiteren Parameter „Ecken“. Fügen wir es unserem Code hinzu.

.cornerRadius(8, corners: [.topLeft, .topRight])

.frame(height: 250)

Und da haben Sie es! Jetzt können Sie jede gewünschte Blattart für jedes von SwiftUI unterstützte iOS erstellen und es nach Ihren Wünschen anpassen.
Es gibt viel Platz zum Bearbeiten. Sie können oben einen Titel und eine Schaltfläche zum Schließen hinzufügen.

Ich möchte dem einzigen Dino Trnka meinen Dank für all mein Wissen und meine Hilfe bei dieser Geschichte aussprechen ! Schauen Sie sich sein Medium an .