(Für Anfänger) Swift UI View Element Collection

Dies ist eine Sammlung allgemeiner Ansichtselemente in "SwiftUI". Für Anfänger, die gerade angefangen haben, "SwiftUI" zu lernen.

[Grundformat der SwiftUI-Ansicht](# swiftui-Grundformat der Ansicht)

[Variablentyp](# Variabler Typ)

Vorschau

[Startpunkt](# Startpunkt)

[Was ist neu in iOS 14](Was ist neu in # ios-14-)

[Zeichen](# Zeichen)

Bild

Table

Navigations

So zeigen Sie dem Benutzer eine andere Ansicht an, um die Aktion auszuführen (#Um die Aktion auszuführen, um dem Benutzer eine andere Ansicht anzuzeigen)

[Tab-Leiste](# Tab-Leiste)

[Wählen Sie einen Wert aus den angegebenen Optionen aus](#Wählen Sie einen Wert aus den angegebenen Optionen aus)

[Mehrere Elemente auf dem Bildschirm anzeigen](# Mehrere Elemente auf dem Bildschirm anzeigen)

Alarm / Aktionsblatt (# Alarm - Aktionsblatt)

[Ansichtsmodifikatoren](# Ansichtsmodifikator-Ansichtsmodifikatoren)

UIKit + SwiftUI

Was ist neu in iOS 14?

TextEditor	ColorPicker	ToolbarItem
Langtext anzeigen und bearbeiten	Ermöglicht die Auswahl einer Farbe.	Elemente in der Leiste anzeigen.
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

Map	DisclosureGroup	ProgressView
Kommentierte Karte anzeigen	Inhalte ein- und ausblenden	Fortschritt anzeigen
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

TextEditor	DatePicker	Sign in with Apple
Anzeigen und Bearbeiten langer Zeichenfolgen	Wählen Sie ein Datum	Melden Sie sich bei Apple an
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

Brief

Text	TextField	SecureField
Zeigen Sie eine Zeichenfolge an	Bearbeitbares Textfeld	Bearbeitbar für die Passworteingabe
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

Bild

Image (Lokale Datei)	Image (SFSymbol)
Bild anzeigen	Systembild anzeigen
Siehe Codebeispiel	SieheCodebeispiel

Table

List	ForEach	Form
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

Navigations

NavigationView
Betten Sie Ihre eigene Ansicht in die Navigationsansicht ein
Siehe Codebeispiel

Eine Aktion ausführen / dem Benutzer eine andere Ansicht anzeigen

Button	NavigationLink	Blatt anzeigen
Klicken Sie hier, um eine Aktion auszuführen	Klicken Sie, um zu einer anderen Ansicht zu wechseln	Ansichtsblatt anzeigen
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispielSieheCodebeispiel

Tab-Leiste

TabView
Tab-Leiste am unteren Bildschirmrand anzeigen
Siehe Codebeispiel

Wählen Sie einen Wert aus den angegebenen Optionen

Toggle	Picker
Benutzer aktiviert die Funktion/Ausschalten lassen	Wählen Sie einen Wert aus den angegebenen Optionen
Siehe Codebeispiel	SieheCodebeispiel

Zeigen Sie mehrere Elemente auf dem Bildschirm an

Mehrere der oben genannten Ansichten können kombiniert und in einer Ansicht angezeigt werden.

HStack	VStack	Form
Horizontale Anordnung	Vertikale Platzierung	Beispiel für ein Anmeldeformular
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

ZStack
Tiefenanordnung (Vorder- und Rückseite)
Siehe Codebeispiel

Alarm / Aktionsblatt

Alert	ActionSheet
Warnfenster anzeigen	Zeigen Sie das Aktionsblatt am unteren Bildschirmrand an
Siehe CodebeispielSieheCodebeispiel	SieheCodebeispiel

ViewModifier View Modifier

Mit dem Ansichtsmodifikator können Sie das Erscheinungsbild der Ansicht ändern.

Beispiel:

Image(systemName: "wand.and.stars")
    .font(.largeTitle)
    .foregroundColor(.blue)

Unten finden Sie eine Liste gängiger Ansichtsmodifikatoren:

UIKit + SwiftUI

UIHostingController

Sie können auch den UIHostingController verwenden, um die Swift-UI-Ansicht in der UIKit-Ansicht anzuzeigen.

let swiftuiView = Map_Example()
let uiKitViewController = UIHostingController(rootView: swiftuiView)
self.present(uiKitViewController, animated: true, completion: nil)

UIViewControllerRepresentable

Da SwiftUI ein neues Framework ist, fehlen einige der Funktionen UIKit. Um die Sora-Funktion UIKit nutzen zu können, müssen Sie UIViewControllerRepresentable verwenden.

QuickLookView	PhotoPickerView	MailComposeView
Vorschau des Dateiinhalts	Fotoauswahl	Mail-Komponist
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

TextMessageComposerView	SafariView	DocumentPicker
SMS-Komponist	Web-Anzeige	Dokumentenauswahl
Siehe Codebeispiel	SieheCodebeispiel	SieheCodebeispiel

Grundformat der SwiftUI-Ansicht

Die Grundstruktur der SwiftUI-Ansicht lautet:

import SwiftUI

struct TextField_Example: View {
    
    //Variable
    
    var body: some View {
        
        //UI-Komponente
        //Text, Image, Form, VStack, List, ...
        
    }
    
}

Geben Sie im Abschnitt "var body: some View" den Ansichtscode ein.

In dem auf dieser Webseite bereitgestellten Beispielcode müssen Sie auf den Inhalt im Codeblock "body" achten.

Deklarieren Sie die Variable im Abschnitt // Variable.

Variablentyp

Wie Sie vielleicht bemerkt haben, hat SwiftUI eine Reihe von Variablentypen. Im Folgenden sind zwei der am häufigsten verwendeten Variablentypen aufgeführt.

@State

struct ButtonSheet_Example: View {

    @State var showAnotherView: Bool = false
    
    var body: some View {
        
        Button(action: {
            self.showAnotherView = true
        }, label: {
            Text("Zeigen Sie eine andere Ansicht")
        })
        .sheet(isPresented: $showAnotherView, content: {
            AnotherView(textContent: "Hello World.")
        })
        
    }
}

Sie können das Erscheinungsbild der Ansicht beeinflussen, indem Sie den Wert von "@ State" ändern.

Wenn beispielsweise "showAnotherView" irgendwo im Programm auf "true" gesetzt ist, wird die Ansicht "AnotherView" angezeigt.

Wenn Sie die Variable "@ State" in Ihrem Programm verwenden, müssen Sie dem Variablennamen möglicherweise das Symbol "$" voranstellen. Auf diese Weise kann die Ansicht die Variable überwachen (und den Inhalt der Ansicht aktualisieren, wenn sich die Variable ändert).

Sie können den Wert der Variablen "@ State" auf drei Arten initialisieren:

1. @State var showAnotherView: Bool = false
2. Sie können die Variablen initialisieren, indem Sie die Ansicht ButtonSheet_Example initialisieren. ButtonSheet_Example (showAnotherView: true)
3. Sie können Variablen innerhalb der Funktion init initialisieren:

struct ButtonSheet_Example: View {

    @State var showAnotherView: Bool
    
    init(...) {
        self.showAnotherView = .init(initialValue: false)
    }
    
    var body: some View {
        // TODO
    }
    
}

Normale Variable

Regelmäßige Variablen werden zum Speichern von Werten verwendet. Das Aktualisieren der kanonischen Variablen hat keinen Einfluss auf das Erscheinungsbild des Programms.

struct ButtonSheet_Example: View {

    var userTappedButton: () -> Void
    
    var body: some View {
        
        Button(action: {
            self.userTappedButton()
        }, label: {
            Text("Zeigen Sie eine andere Ansicht")
        })
        
    }
}

Vorschau

Mit Xcode können Sie direkt eine Vorschau der Änderungen anzeigen, die Sie an Ihrer Swift UI-Datei vorgenommen haben. Die Vorschau wird wie folgt deklariert.

struct TextField_Example_Previews: PreviewProvider {
    static var previews: some View {
        TextField_Example(textEntered: "SwiftUI_Components-Library")
    }
}

Sie können die Swift-UI-Anzeige in "Static Var Previews: Some View" initialisieren. Klicken Sie auf die Schaltfläche "Fortsetzen" rechts neben dem X-Code, um eine Vorschau anzuzeigen.

Startpunkt

Wir empfehlen, dass Sie ein neues "Xcode" -Projekt erstellen und die "SwiftUI App" verwenden. Auf diese Weise können Sie die oben genannten Komponenten in Ihrem Übungsprojekt ausprobieren.

Es gibt auch einen guten Artikel von takoikatakotako, daher empfehle ich Ihnen, ihn zu lesen.

Swift UI 100 klopft

⭐️

Github-Webseite

Auf dieser Webseite finden Sie eine Liste meiner veröffentlichten Qiita-Artikel nach Kategorien.