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.
If you fail to compile with Xcode 11.0 beta 2 (11M337n), please click here!
- macOS 15 Beta
- Xcode 11.0 Beta
- iOS 13.0 Beta
-
Text
-
Image
-
-
-
Special Views
-
Stacks
-
List
-
Container Views
-
Architectural Views
-
Alert
-
Bindings
-
Data-Dependent Views
-
Environment Values
-
-
Preferences
-
Transactions
-
Basic Gestures
-
Combined Gestures
-
Custom Gestures
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")
.color(.orange)
.bold()
.font(.system(.largeTitle))
.fontWeight(.medium)
.italic()
.shadow(color: .black, radius: 1, x: 0, y: 2)View running results
HStack and VStack controls are used to host multiple views, as mentioned later.
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(.roundedBorder)
.padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))View running results
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.
The Image control is used to display images, example:
Image("icon")
.resizable()
.frame(width: Length(100),
height: Length(100),
alignment: .center)View running results
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: Length(80),
height: Length(80),
alignment: .center)
.tapAction {
print("Tap ")
}
}View running results
Button is used to respond to click events.
Example:
Button(action: {
print("Tap")
}) {
Text("I'm a Button")
}View running results
Waiting for release.
Waiting for release.
NavigationButtonPage is used to push to the next navigation page.
Example:
NavigationButton(destination: NavigationButtonPage()) {
Text("NavigationButton").bold().color(.orange).font(.largeTitle)
}.navigationBarItem(title: Text("Page"))View running results
PresentationButton is used to pop up a page.
Example:
PresentationButton(PageRow(title: "PresentationButton", subTitle: "pop up a page"),
destination: Text("I'm Text")) {
print("Present ๐ฆ")
}View running results
EditButton is used to trigger the editing state, just use the navigationBarItems setting when using it.
Example:
navigationBarItems(trailing: EditButton())View running results
Waiting for release.
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)View running results
DatePicker is used to select the absolute date of the control.
Example:
DatePicker(
$server.date,
minimumDate: Calendar.current.date(byAdding: .year,
value: -1,
to: server.date),
maximumDate: Calendar.current.date(byAdding: .year,
value: 1,
to: server.date),
displayedComponents: .date
)View running results
Toggle is used to switch the selected state, for example:
Togglele(isOn: $isOn) {
Text("State: \(self.isOn == true ? "Open":"open")")
}.padding(20)View running results
Slider A control for selecting values from a finite range of values, example:
Slider(value: $data.rating)View running results
Stepper is used to increase or decrease the value, example:
Stepper(value: $value, step: 2, onEditingChanged: { c in
print(c)
}) {
Text("Stepper Value: \(self.value)")
}.padding(50)View running results
SegmentedControl is used for segmentation condition selection, example:
SegmentedControl(selection: $currentIndex) {
ForEach(0..<items.count) { index in
Text(self.items[index]).tag(index)
}
}.tapAction {
print("currentIndex: \(self.currentIndex)")
}View running results
WebView is used to display an open web page, example:
struct WebViewPage : UIViewRepresentable {
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
let req = URLRequest(url: URL(string: "https://www.apple.com")!)
uiView.load(req)
}
}View running results
UIViewController is used to display the UIViewController that opens UIKit in SwiftUI and opens the SwiftUI View in UIViewController.
Example:
First define:
struct ControllerPage<T: UIViewController> : UIViewControllerRepresentable {
typealias UIViewControllerType = UIViewController
func makeUIViewController(context: UIViewControllerRepresentableContext<ControllerPage>) -> UIViewController {
return T()
}
func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<ControllerPage>) {
debugPrint("\(#function)๏ผ\(type(of: T.self))")
}
}Then use this:
NavigationButton(destination: ControllerPage<UIKitController>()) {
PageRow(title: "UIViewController",subTitle: "Open UIViewController")
}View running results
HStack is used to arrange the subviews on a horizontal line.
Example:
HStack {
Text("made in China.")
Divider() // Just add a line.
Text("the People's Republic Of China.")
}View running results
VStack is used to arrange the subviews on a vertical line.
Example:
VStack {
Text("made in China.")
Divider() // Just add a line.
Text("the People's Republic Of China.")
}View running results
ZStack is used to override the subview, aligned on two axes.
Example:
ZStack {
Text("made in China.")
Divider() // Just add a line.
Text("the People's Republic Of China.")
}View running results
List list container to display a list of data.
Examples:
List(0..<5) { item in
Text("Hello World !")
}.navigationBarTitle(Text("List"), displayMode: .large)View running results
ScrollView is a scroll view container.
Example:
ScrollView {
Text("SwiftUI").padding(20)
Divider()
Image("icon").resizable()
.frame(width: 300, height: 300, alignment: .center)
Divider()
Text("Views and ... user interface.")
}
.border(style, width: 1,cornerRadius: 10)
.padding(10)
.navigationBarTitle(Text("ScrollView"))View running results
ForEach is used to present a view based on a collection of existing data.
Example:
let data = (0..<5).map { $0 }
var body: some View {
ForEach(data) { e in
Text("Hello \(e)")
.bold()
.font(.system(size: 25, design: .monospaced))
.padding(5)
}View running results
Group is used to aggregate multiple views, and the properties set on the Group will be applied to each child view.
Example:
Group {
Text("Hello World !")
Text("Hello World !")
}View running results
Waiting for release.
Section is used to create the header/footer view content, which is generally used in conjunction with the List component.
Example:
Section(header: Text("I'm header"), footer: Text("I'm footer")) {
ForEach(0..<3) {
Text("Hello \($0)")
}
}View running results
NavigationView is used to create a view container that contains the top navigation bar.
Example:
NavigationView {
Text("๐งโโ๏ธ๐งโโ๏ธ๐งโโ๏ธ๐งโโ๏ธ๐งโโ๏ธ๐งโโ๏ธ").blur(radius: 5)
Text("Swifter Swifter").bold().color(.orange).font(.largeTitle)
}.navigationBarTitle(Text("NavigationView"))View running results
TabBar is used to create a view container that contains the bottom TabBar.
Example:
TabbedView(selection: $index) {
ForEach(0 ..< imgs.count) { item in
TabItemPage(index: item)
.tabItemLabel(Image(self.imgs[item]))
.tag(item)
}
}View running results
Waiting for release.
Waiting for release.
Alert is used to display a bullet reminder that needs to be associated with a trigger event.
Example:
presentation($showsAlert, alert: {
Alert(title: Text("Hello"))
})View running results
ActionSheet is used to pop up a selection box.
Example:
ActionSheet(title: Text("Title"),
message: Text("Message"),
buttons:
[.default(Text("Default"), onTrigger: {
print("Default")
self.showSheet = false
}),.destructive(Text("destructive"), onTrigger: {
print("destructive")
self.showSheet = false
}),.cancel({
print("Cancel")
self.showSheet = false
})])View running results
Modal is used to pop up a view.
Example:
Modal(Text("Modal View"),onDismiss: {
print("View Dismiss !")
})View running results
Popover is used to pop up a view, see the results below.
Example:
Popover(content: Text("Popover View")) {
print("Popover Dismiss !")
}View running results
- The code involved in the above example is in this repository code. It is recommended to download and run the view.
- If you have better usage and suggestions about SwiftUI, look forward to sharing it!
- If there are omissions and errors in the examples in this article, please create a Issue !
email : [email protected]
ๅพฎๅ : @ๆๅ ๆฃฎ
SwiftUI is released under the GPL-3.0 license. See LICENSE for details.