SwiftUI 布局汇总
基本观点
Text
用于显示一行或多行文本内容,效果与相同UILabel
,但效果更好。
如果要创建Text
,只需使用创建它Text("SwiftUI")
;使用链接的语法,您还可以向文本添加多个属性,例如字体,颜色,阴影,左上和右上的间距等等。
例:
1
2
3
4
5
6
7
|
Text ( "SwiftUI" ) . foregroundColor (. orange ) . bold () . font (. system (. largeTitle )) . fontWeight (. medium ) . italic () . shadow ( color : . black , radius : 1 , x : 0 , y : 2 ) |
查看运行结果
HStack and VStack controls are used to host multiple views, as mentioned later.
文本域
TextField
用于添加普通输入框,通常将其用作文本输入。
Example:
1
2
3
4
5
6
7
8
9
10
|
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 )) |
View running results
SecureField
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
.
Image
The Image
control is used to display images, example:
Image("icon")
.resizable()
.frame(width: 100,
height: 100,
alignment: .center)
View running results
WebImage
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 ")
}
}
View running results
Button
Button
is used to respond to click events.
Example:
Button(action: {
print("Tap")
}) {
Text("I'm a Button")
}
View running results
PullDownButton
Waiting for release.
ItemBasedPopUpButton
Waiting for release.
NavigationButton
NavigationButtonPage
is used to push to the next navigation page.
Example:
NavigationLink(destination: NavigationButtonPage()) {
Text("NavigationButton").bold()
.foregroundColor(.orange)
.font(.largeTitle)
}
.navigationBarTitle(Text("Page"))
View running results
PresentationButton is deprecated
PresentationButton
is used to pop up a page. has deprecated, please use NavigationLink
EditButton
EditButton
is used to trigger the editing state, just use the navigationBarItems
setting when using it.
Example:
navigationBarItems(trailing: EditButton())
View running results
PasteButton
Waiting for release.
Picker
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
DatePicker
is used to select the absolute date of the control.
Example:
DatePicker(selection: $server.date,
in: server.spaceDate,
displayedComponents: .date, label: {
Text("")
})
View running results
Toggle
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
Slider
A control for selecting values from a finite range of values, example:
Slider(value: $data.rating)
View running results
Stepper
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 deprecated
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
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
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
Layout
HStack
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
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
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
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
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(Color.gray.gradient, width: 1)
.cornerRadius(10)
.padding(10)
.navigationBarTitle(Text("ScrollView"))
View running results
ForEach
ForEach
is used to present a view based on a collection of existing data.
Example:
let data = (0..<5)
var body: some View {
ForEach(data) { e in
Text("Hello \(e)")
.bold()
.font(.system(size: 25, design: .monospaced))
.padding(5)
}
View running results
Group
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
GroupBox
Waiting for release.
Section
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
Form
Form
A container for grouping controls used for data entry, such as in settings or inspectors.
Example:
Form {
TextField("First Name", text: $firstName)
TextField("Last Name", text: $lastName)
}
View running results
NavigationView
NavigationView
is used to create a view container that contains the top navigation bar.
Example:
NavigationView {
Text("🧚♂️🧚♀️🧜♂️🧜♀️🧞♂️🧞♀️").blur(radius: 5)
Text("Swifter Swifter")
.bold()
.foregroundColor(.orange)
.font(.largeTitle)
}
.navigationBarTitle(Text("NavigationView"))
View running results
TabView
TabView
is used to create a view container that contains the bottom ** TabBar**.
Example:
TabView(selection: $index) {
ForEach(0..<imgs.count) { item in
TabItemPage(index: item)
.tabItem{
Image(self.imgs[item])
Text("\(item)")
}
.tag(item)
}
}
View running results
HSplitView
Waiting for release.
VSplitView
Waiting for release.
Alert
Alert
is used to display a bullet reminder that needs to be associated with a trigger event.
Example:
alert(isPresented: $showAlert, content: {
Alert(title: Text("确定要支付这100000000美元吗?"),
message: Text("请谨慎操作\n一旦确认,钱款将立即转入对方账户"),
primaryButton: .destructive(Text("确认")) { print("转出中...") },
secondaryButton: .cancel())
}).navigationBarTitle(Text("Alert"))
View running results
ActionSheet
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
})])
usage:
.actionSheet(isPresented: $showSheet, content: {sheet})
View running results
Modal
Modal
is used to pop up a view.
Example:
Modal(Text("Modal View"),onDismiss: {
print("View Dismiss !")
})
View running results
Popover
Popover
is used to pop up a view, see the results below.
Example:
.popover(isPresented: $showPop, content: {
ImagePage()
})
View running results