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

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 页，复杂类型属性可以使用这个

SwiftUI 控件相关推荐

SwiftUI 控件之Text 文本框显示古诗（含demo）
代码 import SwiftUIstruct ContentView: View {let gushi = """风急天高猿啸哀,渚清沙白鸟飞回.无边落木萧萧下,不尽长 ...
iOS SwiftUI篇-2 UI控件 Text Button Image List
iOS SwiftUI篇-2 UI控件 Text Button Image List Text 显示文本,相当于UILabel import SwiftUIstruct TextContentView ...
macOS SwiftUI 选择器组件规范之 01 分段控件Segmented Controls
macOS SwiftUI 选择器组件规范之 01 分段控件什么是分段控件(Segmented Controls) 分段控件是两个或多个分段的水平集合,每个分段都充当一个按钮-通常是一个切换按钮.分 ...
SwiftUI之猜国旗APP及色彩类控件
源码地址效果图思路添加背景色控件垂直排列点击事件处理代码实现 struct ContentView: View {@State private var showAlert = false@ ...
Qt---布局，设置控件边距，拉伸因子
QGridLayout *LeftLayout =new QGridLayout(this); LeftLayout->addWidget(label1, 0, 0); //label1在第1行 ...
HarmonyOS 字体在自身控件中居中(使用text_alignment)
要实现的效果就是把字体在控件居中 HarmonyOS 使用的是text_alignment 属性,详细的如下 text_alignment 文本对齐方式 left 表示文本靠左对齐. 可以设置取值项 ...
Android 如何防止用户同时点击多个控件问题
qa 测试说一次连点不同的控件,app 多个控件分别有响应这个问题处理方法也是很简单就是在布局里面添加 android:splitMotionEvents="false"a ...
Android中设置控件可见与不可见详解
通常控件的可见与不可见分为三种情况. 第一种 gone 表示不可见并且不占用空间第二种 visible 表示可见第三种 invisible 表示不可见但是占用空间可见与不可见的表现形式有两种. ...
文本类控件(EditView 的介绍)
EditView的作用:用于在屏幕上显示文本输入框 Android的编辑框组件组件可以输入单行文本,多行文本,指定格式文本(密码,邮箱地址等) 2中使用方法 1 java代码中通过new关键字创建 2 ...
文本类控件（TextView的介绍）
TextView的作用:用于在屏幕上显示文本 Android中的文本框组件可以显示单行文本,多行文本,也可以显示带图像的文本使用的2中方法 1 java代码中通过new关键字创建 2 XML布局中使 ...