Introducing SwiftUI 笔记

常用的宏方法

@main

The @main attribute identifies the app’s entry point.

import SwiftUI


@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

The entry point is responsible for the start up of the app.

The MyApp structure conforms to the App protocol,

The structure implements the computed property body, which is a requirement of the App protocol.

SwiftUI provides different types of scenes including WindowGroup, Window, DocumentGroup, and Settings

@Observable

@State

State is a value, or a set of values, that can change over time, and that affects a view’s behavior, content, or layout.

@Binding

A binding acts as a reference to a mutable state. When a user taps the toggle from off to on, and off again, the control uses the binding to update the view’s state accordingly.

@Environment

The property gets its value automatically, as long as the environment(_:) modifier has been applied to a parent.

The @Environment property wrapper enables you to read the model data of the current view.

@Bindable

常用控件和概念

View protocol

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

1. ContentView implements the computed property body

2. Text a view that displays one or more lines of read-only text.

3. ContentView applies the padding(_:_:) modifier to the VStack,that is,space — to the edges of the VStack view

   you can specify which edges and amount of padding to apply by providing edges and length parameter values;padding([.bottom, .trailing], 20).

modifiers 修饰符

To customize a SwiftUI view, you call methods called modifiers

Modifiers wrap a view to change its display or other properties.

Each modifier returns a new view, so it’s common to chain multiple modifiers, stacked vertically.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
            .foregroundColor(.green)
    }
}

Spacer

A spacer expands to make its containing view use all of the space of its parent view, instead of having its size defined only by its contents.

padding

the padding() modifier to give the View a little more space around it outer edges.

Codable

Codable conformance makes it easier to move data between the structure and a data file.

List or ForEach

To combine static and dynamic views in a list, or to combine two or more different groups of dynamic views, use the ForEach type instead of passing your collection of data to List.

var body: some View {
        NavigationSplitView {
            List(filteredLandmarks) { landmark in
                NavigationLink {
                    LandmarkDetail(landmark: landmark)
                } label: {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationTitle("Landmarks")
        } detail: {
            Text("Select a Landmark")
        }
    }

var body: some View {
        NavigationSplitView {
            List {
                ForEach(filteredLandmarks) { landmark in
                    NavigationLink {
                        LandmarkDetail(landmark: landmark)
                    } label: {
                        LandmarkRow(landmark: landmark)
                    }
                }
            }
            .navigationTitle("Landmarks")
        } detail: {
            Text("Select a Landmark")
        }
    }

Canvas Skill

1. The canvas displays previews in Live mode by default so that you can interact with them
2. you can use the Selectable mode to enable editing instead.

import SwiftUI


// Source file for Section 1
struct KeywordBubbleDefaultPadding: View {
    let keyword: String
    let symbol: String
    var body: some View {
        Label(keyword, systemImage: symbol)
            .font(.title)
            .foregroundColor(.white)
            .padding()
            .background(.purple.opacity(0.75), in: Capsule())
    }
}


struct KeywordBubbleDefaultPadding_Previews: PreviewProvider {
    static let keywords = ["chives", "fern-leaf lavender"]
    static var previews: some View {
        VStack {
            ForEach(keywords, id: \.self) { word in
                KeywordBubbleDefaultPadding(keyword: word, symbol: "leaf")
            }
        }
    }
}

open Show SwiftUI Inspector

In the preview, Command-Control-click the greeting to bring up the structured editing popover, and choose “Show SwiftUI Inspector”.

open the inspector by Control-clicking on the Text declaration in the code editor, and then choose “Show SwiftUI Inspector” from the popover.

Interfacing with UIKit

SwiftUI works seamlessly with the existing UI frameworks on all Apple platforms. For example, you can place UIKit views and view controllers inside SwiftUI views, and vice versa.

Create a view to represent a UIPageViewController

1. To represent UIKit views and view controllers in SwiftUI, you create types that conform to the UIViewRepresentable and UIViewControllerRepresentable protocols.

SwiftUI manages their life cycle and updates them when needed.

import SwiftUI
import UIKit

struct PageViewController<Page: View>: UIViewControllerRepresentable {
    var pages: [Page]

}

2. add the two requirements for the UIViewControllerRepresentable protocol.

func makeUIViewController(context: Context) -> UIPageViewController {
    let pageViewController = UIPageViewController(
        transitionStyle: .scroll,
        navigationOrientation: .horizontal)


    return pageViewController
}

SwiftUI calls this method a single time when it’s ready to display the view, and then manages the view controller’s life cycle.

 func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
    pageViewController.setViewControllers(
        [UIHostingController(rootView: pages[0])], direction: .forward, animated: true)
}

Create the view controller’s data source

1. Declare a nested Coordinator class inside PageViewController.

class Coordinator: NSObject {
        var parent: PageViewController


        init(_ pageViewController: PageViewController) {
            parent = pageViewController
        }
    }

SwiftUI manages your UIViewControllerRepresentable type’s coordinator, and provides it as part of the context when calling the methods you created above.

2. Add another method to PageViewController to make the coordinator.

func makeCoordinator() -> Coordinator {
       Coordinator(self)
   }

SwiftUI calls this makeCoordinator() method before makeUIViewController(context:), so that you have access to the coordinator object when configuring your view controller.

• Tip

You can use this coordinator to implement common Cocoa patterns, such as delegates, data sources, and responding to user events via target-action.

Reference

Introducing SwiftUI