SwiftUI 布局框架

Easter79
• 阅读 819

Basic View

Text

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)

View running results

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

🔝

TextField

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)) 

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.

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 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 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

点赞
收藏
评论区
推荐文章
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Stella981 Stella981
3年前
Golang注册Eureka的工具包goeureka发布
1.简介提供Go微服务客户端注册到Eureka中心。点击:github地址(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2FSimonWang00%2Fgoeureka),欢迎各位多多star!(已通过测试验证,用于正式生产部署)2.原理
Stella981 Stella981
3年前
Git提交本地以及远程仓库
项目方法Gc75n047Fm3109gDDPJ2006.07.14101007MpkyG专访抖音绽放公会「分享」运营经验(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fhzcya.com%2Fdywh%2F320.html)00azE2
Easter79 Easter79
3年前
The Complete Guide To Rooting Any Android Phone
PhoneWhitsonGordon(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.lifehacker.com.au%2Fauthor%2Fwhitsongordon%2F)7April,20118:00AMShare(https://ww
Stella981 Stella981
3年前
Essential Studio for UWP发布2017 v2,新增甘特图控件
EssentialStudioforUWP(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3894)是包含有35组件的综合套包,包括最快的图表和网格组件。所有组件根据当前被呈现的设备系列自适应渲染。EssentialStu
Stella981 Stella981
3年前
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法参考文章:(1)Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.codeprj.com%2Fblo
Stella981 Stella981
3年前
OpenYurt 入门
!头图.png(https://ucc.alicdn.com/pic/developerecology/d35db6f1020a4b85bf70f437903c342d.png)作者| 唐炳昌来源|阿里巴巴云原生公众号(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fmp.
Stella981 Stella981
3年前
Flink SQL Window源码全解析
!(https://oscimg.oschina.net/oscnet/72793fbade36fc18d649681ebaeee4cdf00.jpg)(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzU3MzgwNT
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k