SwiftUI 控件

SwiftUI View控件
持续学习更新中…

1. Text 文字(相当于Swift 和 OC 中的 UILabel)

Text("Text ")
    .bold() //加粗
    .italic() //斜体
    .kerning(10)//字间距
    .tracking(10) //字间距
    .underline() //下划线
    .blur(1)  //模糊效果
    .lineSpacing(20) //行间距
    .multilineTextAlignment(.leading) //文字对齐方式
    .lineLimit(2)	//限制展示行数
    .frame(width: 250, height: 35 alignment: .leading) // 文字尺寸、展示位置
    .font(.system(size: 20)) //字体大小     或者使用苹果提供的字体样式 .font(.headline)
    .foregroundColor(.white) //字体颜色
    .background(Color.black) //背景设置,可设置背景色、背景图片等
2. Image 图片 (相当于Swift 和 OC 中的 UIImageView)
Image("tabbar_mine")  //使用 Assets.xcassets 中的图片创建图像
Image(systemName: "star")  //使用系统提供的符号创建图像

SwiftUI Image

3.Button(Tap) 按钮(相当于Swift 和 OC 中的 UIButton)

用法1

Button("登录/注册") {
    
     //文字
    print("登录/注册")		//点击事件
}

用法2

Button {
    
    
    print("setting") //点击事件
} label: {
    
    
    Image("mine_set") //图片
        .frame(width: 60, height: 44)
        .padding(.top, K_StatusHeight)
}
4.Tap 手势(相当于Swift 和 OC 中的 UITapGestureRecognizer) 手势
Image("mine_set")
    .onTapGesture {
    
     //单击事件
        print("setting")	
    }
///- 计数:触发操作所需的点击或点击次数
///“行动” 中提供了关闭。默认为 “1”。
///- 动作:要执行的动作。
    /// - Parameters:
    ///    - count: The number of taps or clicks required to trigger the action
    ///      closure provided in `action`. Defaults to `1`.
    ///    - action: The action to perform.
    public func onTapGesture(count: Int = 1, perform action: @escaping () -> Void) -> some View
5.Spacer

占位的 view

6.Divider

分割线,VStack 里面分割线是水平方向的线

HStack 里面分割线是竖直方向的线

7.Rectangle

矩形 View

8.RoundedRectangle

圆角矩形 View 圆角等于高度的一半时,矩形两边正好是两个半圆

9、TextField

明文输入框,相当于OC和Swift 的 UITextField(非密码输入框)
SwiftUI 输入框(TextEditor 和 TextField、SecureField)

10、SecureField

密文输入框,相当于OC和Swift 的 UITextField(密码输入框)
SwiftUI 输入框(TextEditor 和 TextField、SecureField)

11、TextEditor

多行输入框,相当于OC和Swift 的 UITextView
SwiftUI 输入框(TextEditor 和 TextField、SecureField)

----------------------------->1<-----------------------------

1.VStack

让 View 纵向排列

2.HStack

让 View 水平排列

3.ZStack

垂直于屏幕方向排列

4.Group

分组,显示多个自动预览页的时候,可以把自动预览页放进 Group,

5.GeometryReader

一个 View,会尽量的扩张自己,尽可能多占空间,可以放 View,可以获取自己的宽高

6.ScrollView

可滑动的 View

----------------------------->2<-----------------------------

1.List

可以展示多个不同的 View,可以用 for Each 语句铺 view
SwiftUI List

2.ForEach

for 循环 遍历数组, 数组类型可以为值类型,甚至view

3.NavigationView

导航栏可以进行跳转
SwiftUI 导航栏 NavigationView

4.NavigationLink

导航栏的跳转
SwiftUI 跳转到新页面(NavigationLink、fullScreenCover)

5.EmptyView

空 View

6.Model presentation

模态推出一个页面
SwiftUI 跳转到新页面(NavigationLink、fullScreenCover)

----------------------------->3<-----------------------------

ViewModifier 控件修改器,这是个协议,返回的事一个 some view

1.frame

修改 View 宽高
设置最大、最小宽高

@inlinable public func frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center) -> some View

@inlinable public func frame(minWidth: CGFloat? = nil, idealWidth: CGFloat? = nil, maxWidth: CGFloat? = nil, minHeight: CGFloat? = nil, idealHeight: CGFloat? = nil, maxHeight: CGFloat? = nil, alignment: Alignment = .center) -> some View
2.padding

修改 View 上下左右的间距

padding() //默认上下左右15的间距
padding(10) //设置上下左右全部间距
padding(.top, 60)	//设置单侧方向、间距
padding(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))//设置上下左右各个方向的间距
3.offset

修改 View 水平方向或竖直方向偏移量

4.clipShape

把 View 裁成某个形状 (圆形)

5.clipped

把超出 View 得部分裁剪掉

6.scaleEffect

实现缩放效果

----------------------------->4<-----------------------------

1.foregroundColor

修改文字颜色

2.opacity

修改透明度

3.hidden

隐藏 View

4.overlay

在 View 前面添加东西

5.background

在 View 后面添加 some view
备注:Color、Image 等都属于 view

----------------------------->5<-----------------------------

1.ListRowInsets
修改一个 View 在 List 里面的上下左右间距

2.edgeslgnoringSafeArea
当一个 View 的一部分处在安全区域的时候,要在安全区域里显示内容可以用~~忽略安全区域

3.navigationBarTitle
设置导航栏的标题

4.navigationBarHidden
设置了标题之后,~~导航栏隐藏才会起作用,

5.navigationBarItems
可以在导航栏里 添加其他的 View

6.navigationViewStyle
我们在适配 ipad 的时候用到,可以使 ipad 显示的效果和 iphone 一样

----------------------------->6<-----------------------------

SwiftUI Button

  1. buttonStyle
    当 list 里面的一个 View 有多个 button 的时候,点击这个 View 所有的 button 都会响应,要解决这个问题,我们设置了 buttonStyle,设置为 BorderlessButtonStyle, 其实设置成其他的 buttonStyle 也可以,我们也可以自定义 buttonStyle

----------------------------->7<-----------------------------

SwiftUI -> UIKit
1.UIHostingController
把 swiftUI 的 View 封装成 UIViewController

----------------------------->8<---------------------------

UIKit -> SwiftUI
1.UIViewRepresentable
协议,至少实现两个函数,创建函数 makeUIView 和更新函数 updateUIView,如果需要可以自定义 Coordinator

2.UIViewControllerRepresentable
协议,至少实现两个函数,创建函数 makeUIViewController 和更新函数 updateUIViewController,如果需要可以自定义 Coordinator

----------------------------->9<---------------------------

Protocol
1.ObservableObject(@Published)
我们在用到环境对象的时候,环境对象的类型必须遵循这个协议,这个协议规定了类型必须是 class 类,这个类里面的属性加上 @Published 修饰词,属性改变用到这个属性的 View 就会更新

----------------------------->10<---------------------------

语法
1.@State
通常是 View 自己使用,可以起到更新属性的时候就更新 View

2.@Binding
子 View 使用父 View 的属性时,需要使用这个修饰词可以起到更新属性的时候就更新 View,父 View 和子 View 的属性绑定在一块,一个改变另一个也会改变,同时更新 View

3.@Environment

4.@EnvironmentObject
必须遵循 ObservableObject 协议,协议详情请看 12 页,需要在多个页面共享的话 用这个修饰,声明之后不需要赋值,因为它会从父 View 里面找相应的值,如果找不到 app 会闪退

5.@ObservedObject
必须遵循 ObservableObject 协议,协议详情请看 12 页,复杂类型属性可以使用这个

猜你喜欢

转载自blog.csdn.net/u014651417/article/details/123418668