SwiftUI

<img src="images/icon/banner.png"/>

This article refers to SwiftUI apple example and records the results of the exploration here, I hope to be helpful to you.

For the content described in this article, by default you have some experience based on Swift language development, so it will not describe every detail in detail; if you have doubts about Swift syntax, you can learn Swift Grammar.

When learning and using SwiftUI, if you have any questions, you can join the SwiftUI QQ Group: 18552966 to discuss communication.

中文版🇨🇳

Recommended Preview: Windows 11 desktop client implemented using SwiftUI.

<img width="80%" src="images/windows11/launchpad.png"/>

⭐️ Stargazers over time

💻 Requirements

• macOS 10.15
• Xcode 11.0
• iOS 13.0

Directory：

Basic View

• <span id="Text_D">Text</span>

  • Text
  • TextField
  • SecureField

• <span id="Image_D">Image</span>

  • Image
  • WebImage

• <span id="Button_D">Button</span>

  • Button
  • PullDownButton
  • ItemBasedPopUpButton
  • NavigationButton
  • PresentationButton
  • EditButton
  • PasteButton

• <span id="Picker_D">Picker</span>

  • Picker
  • DatePicker
  • Toggle
  • Slider
  • Stepper
  • SegmentedControl

• <span id="Special_D">Special Views</span>

  • WebView
  • UIViewController

<span id="Layout_D">Layout</span>

• <span id="Stacks_D">Stacks</span>

  • HStack
  • VStack
  • ZStack

• <span id="List_D">List</span>

  • List
  • ScrollView
  • ForEach

• <span id="Container_D">Container Views</span>

  • Group
  • GroupBox
  • Section
  • Form

• <span id="Architectural_D">Architectural Views</span>

  • NavigationView
  • TabView
  • HSplitView
  • VSplitView

• <span id="Alert_D"> Alert </span>

  • Alert
  • Modal
  • Popover
  • Sheet
  • ActionSheet

<span id="State_D">State and Data Flow</span>

• <span id="Bindings_D"> Bindings </span>

  • Binding

• <span id="Data_D"> Data-Dependent Views </span>

  • State
  • ObjectBinding
  • EnvironmentObject

• <span id="Environment_D"> Environment Values </span>

  • Environment
  • EnvironmentValues

• <span id="ENavigation_D"> ENavigation Models </span>

  • DynamicNavigationDestinationLink

• <span id="Preferences_D"> Preferences </span>

  • LocalizedStringKey

• <span id="Transactions_D"> Transactions </span>

  • Transaction

<span id="Gestures_D">Gestures</span>

• <span id="BasicGestures_D"> Basic Gestures </span>

  • TapGesture
  • LongPressGesture
  • DragGesture
  • MagnificationGesture
  • RotationGesture

• <span id="Combined_D"> Combined Gestures </span>

  • SequenceGesture
  • SimultaneousGesture
  • ExclusiveGesture

• <span id="Custom_D"> Custom Gestures </span>

  • AnyGesture

<h2 id="Basic View">Basic View</h2> <h4 id="Text">Text</h4>

Text is used to display one or more lines of text content with the same effect as UILabel, but it is even better.

If you want to create Text, just create it with Text("SwiftUI"); With chained syntax, you can also add multiple attributes to the text, such as fonts, colors, shadows, spacing between top left and right, and so on.

Example:

Text("SwiftUI")
    .foregroundColor(.orange)
    .bold()
    .font(.system(.largeTitle))
    .fontWeight(.medium)
    .italic()
    .shadow(color: .black, radius: 1, x: 0, y: 2)

<details close> <summary>View running results</summary> <img width="80%" src="images/example/Text.png"/> </details>

HStack and VStack controls are used to host multiple views, as mentioned later.

🔝

<h4 id="TextField"> TextField </h4>

TextField is used to add a normal input box, which is often used as a text input.

Example：

TextField(self.$name, placeholder: self.nameText, onEditingChanged: { changed in
    print("onEditing: \(changed)")
}) {
    print("userName: \(self.name)")
    self.endEditing(true)
}}
.padding(10)
.frame(height: 50)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))

<details close> <summary>View running results</summary> <img width="80%" src="images/example/Field.png"/> </details>

🔝

<h4 id="SecureField"> SecureField </h4>

SecureField is generally used as a password input. It is used in the same way as TextField. The example and the running effect are the same as TextField.

<h4 id="Image"> Image </h4>

The Image control is used to display images, example:

Image("icon")
    .resizable()
    .frame(width: 100,
           height: 100,
           alignment: .center)

<details close> <summary>View running results</summary> <img width="80%" src="images/example/Image.png"/> </details>

🔝

<h4 id="WebImage"> WebImage </h4>

webImage is used to download the web image, use the URLSession to download the original Image after successful download; you can also use Kingfisher in the downloadWebImage function .

Example：

var body: some View {
        Image(uiImage: self.uiImage ?? placeholderImage)
            .resizable()
            .onAppear(perform: downloadWebImage)
            .frame(width: 80,
                   height: 80,
                   alignment: .center)
            .onTapGesture {
                print("Tap ")
        }
    }

<details close> <summary>View running results</summary> <img width="80%" src="images/example/WebImage.png"/> </details>

🔝

<h4 id="Button"> Button </h4>

Button is used to respond to click events.

Example:

Button(action: {
    print("Tap")
}) {
   Text("I'm a Button")
}

<details close> <summary>View running results</summary> <img width="80%" src="images/example/Button.png"/> </details>

🔝

<h4 id="PullDownButton"> PullDownButton </h4>

Waiting for release.

<h4 id="ItemBasedPopUpButton"> ItemBasedPopUpButton </h4>

Waiting for release.

<h4 id="NavigationButton"> NavigationButton </h4>

NavigationButtonPage is used to push to the next navigation page.

Example:

NavigationLink(destination: NavigationButtonPage()) {
            Text("NavigationButton").bold()
                .foregroundColor(.orange)
                .font(.largeTitle)
            }
    .navigationBarTitle(Text("Page"))

<details close> <summary>View running results</summary> <img width="80%" src="images/example/NavigationButton.png"/> </details>

🔝

<h4 id="PresentationButton" style='color:red'> PresentationButton is deprecated</h4>

PresentationButton ~~is used to pop up a page.~~ has deprecated, please use NavigationLink

🔝

<h4 id="EditButton"> EditButton </h4>

EditButton is used to trigger the editing state, just use the navigationBarItems setting when using it.

Example:

navigationBarItems(trailing: EditButton())

<details close> <summary>View running results</summary> <img width="80%" src="images/example/EditButton.png"/> </details>

🔝

<h4 id="PasteButton"> PasteButton </h4>

Waiting for release.

<h4 id="Picker"> Picker </h4>

Picker can customize the selector of the data source.

Example:

Picker(selection: $leftIndex, label: Text("Picker")) {
    ForEach(0..<leftSource.count) {
        Text(self.leftSource[$0]).tag($0)
    }
    }.frame(width: UIScreen.main.bounds.width/2)

<details close> <summary>View running results</summary> <img width="80%" src="images/example/Picker.png"/> </details>

🔝

<h4 id="DatePicker"> DatePicker </h4>

DatePicker is used to select the absolute date of the control.

Example:

DatePicker(selection: $server.date, 
in: server.spaceDate, 
displayedComponents: .date, label: {
    Text("")
})

<details close> <summary>View running results</summary> <img width="80%" src="images/example/DatePicker.png"/> </details>

🔝

<h4 id="Toggle"> Toggle </h4>

Toggle is used to switch the selected state, for example:

Toggle(isOn: $isOn) {
    Text("State: \(self.isOn == true ? "Open":"open")")
}.padding(20)

<details close> <summary>View running results</summary> <img width="80%" src="images/example/Toggle.png"/> </details>

🔝

<h4 id="Slider"> Slider </h4>

Slider A control for selecting values from a finite range of values, example:

Slider(value: $data.rating)