SwiftUI(1) Views&Controls

参考

官方文档
Jinxiansen的Github

View

1. 指定View大小

.frame(100,100,.center)//宽100,高100,对其方式居中

2. 指定View的相对父View的大小未测试

.layoutPriority(0)//优先级为0

3. 设置View的位置

.position(x,y)//xy为坐标，父View左上角为0,0
.offset(x,y)//在原有位置上的偏移

4. 设置内边距

.padding(10)//四个方向都是10
.padding(EdgeInsets(top: 10, leading: 20, bottom: 30, trailing: 40 ))//为每个方向分别设置
.padding(.leading, 10)//一个方向设置

5. 设置前景色和背景色

.foregroundColor(.red)//前景色
.background(Color.green)//背景色
.overlay(Circle()) //一个圆覆盖在上面
.zIndex(1)//在Z轴上抬起

6. 设置边框

.border(Color.black,1)//宽度为1的黑色边框

7. 遮罩和剪裁

.clipShape(Circle()) //修建为圆形
.cornerRadius(50) //四个角弧度
.mask(Circle()) //遮罩，与clipShape效果类似

8. 缩放

.scaledToFill() //充满
.scaledToFit() //适合

9. 旋转和变换

.rotationEffect(Angle(degrees: 180))//旋转180度

10. 调整View中的文本

.keyboardType(UIKeyboardType.default)//设置键盘类型
.font(Font.system(size:50))//字体为系统，大小为50
.lineLimit(3)//最多为3行
.lineSpacing(10)//设置行距
.multilineTextAlignment(TextAlignment.leading)//多行对其方式
.minimumScaleFactor(0.1)//当文本显示不完时，允许缩小字体来显示更多文本，0.1表示最小可以缩小到原来文本大小的10%
.truncationMode(Text.TruncationMode.tail)//文本显示不完时，用省略号...代替，tail表示省略号的位置在尾部
.allowsTightening(true)//文本显示不完时，是否压缩空格来显示更多字符
.textContentType(UITextContentType.telephoneNumber)//文本类型,提供给ios系统的信息
.autocapitalization(UITextAutocapitalizationType.allCharacters)//设置自动大写
.disableAutocorrection(true)//禁用自动修正

11. 添加动画

unFinished://看完动画教程后更新

.animation(Animation)//添加动画
.animation

12. 辅助功能标签

.accessibility(Text("")) 为view添加标签来描述它的内容
...

13. view点击和手势

.onTapGesture{} //点击
.onLongPressGesture{}//长按
.

14. View事件

.onAppear(){}  //出现
.onDisappear(){} //消失
...

15. 模糊和阴影

.blur(1) //模糊
.shadow(1) //阴影

16. 图形效果

.opacity(0.5) //透明度，1为不透明，0为完全透明

17. 隐藏和禁用View

.hidden() //只是隐藏
.disabled(true) //不能与用户交互(点击等)
.deleteDisabled(true) //不能删除
.moveDisabled(true) //不能隐藏

18. 设置Id

.id(1)

Text

1. Text

显示文本

• 初始化

Text("hello")

• 样式

Text("hello")
.bold() //粗体
.italic() //斜体
.fontWeight(Font.Weight)//字体粗细,从ultraLight(细)到black(粗)
.baselineOffset(CGFloat)//基线偏移,正值为向上偏移，负值为向下
.tracking(CGFloat)//文本间距
.kerning(CGFloat)//文本间距,优先用这个
.underline(active,color)//下划线,active:是否显示，color设置颜色
.strikethrough(active,color)//删除线

2. TextField

文本输入

• 初始化

@State var input = ""
var body: some View {
     TextField("please enter", text: $input, onEditingChanged: {print($0)},onCommit: {})
    }
//textField的值与input变量绑定；onEditingChanged的作用:当输入框激活/非激活时，回调这个方法，返回true或false;onCommit是输入完成时回调

• 样式

.textFieldStyle(RoundedBorderTextFieldStyle()) //带圆边框
.textFieldStyle(PlainTextFieldStyle())//无边框
.textFieldStyle(SquareBorderTextFieldStyle())//ios不可用
.textFieldStyle(DefaultTextFieldStyle())//默认无边框

3. SecureField

输入密码使用

Image

图片

• 初始化

Image("name") //项目中的图片名
Image(systemName:"") //系统自带图片名,下载SF symbols应用，可以获取所有图片和名字https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

• 样式

.resizable(EdgeInsets(),Image.ResizingMode.stretch)//调整大小以适应屏幕,默认为拉伸，tile为平铺

Buttons

1. Button

//初始化
Button("btn"){//action}
//样式
.buttonStyle(PlainButtonStyle())//像文本一样
.buttonStyle(DefaultButtonStyle())//蓝色字体无边框

2. NavigationLink

点击后导航到下一个页面

//初始化,放在NavigationView中
NavigationView {
NavigationLink("Tap me", destination: NextPage()).navigationBarTitle("FirstPage")}
//下一个页面
struct NextPage: View {
    var body: some View {
        Text("This is next page")
        .navigationBarTitle("NextPage")
    }
}

3. EditButton

点击后触发编辑状态，属于navigationBarItems

NavigationView{
	Text("editBtn").navigationBarItems(trailing: EditButton())
}

Value Selectors

1. Toggle

触发开关

@State var isOn = false
Toggle(isOn: $isOn) {
	Text("State: \(self.isOn ? "开":"关")")
}

2. Picker

自定义数据源的选择器

3. DatePicker

日期选择器

@State var date = Date()
DatePicker(selection: $date) {
	Text("date:\(self.date)")
}

4. Slider

有限范围中选任意值

Slider(value: $slidValue, in: 0...1) 
//in为闭区间的范围

5. Steper

每次增加或减少固定值

Stepper(value: $stepValue, step: 1) {
	Text("Stepper Value: \(self.stepValue)")
}

支持类型

1. @ViewBuilder

可以通过多行语句声明的View来构建父View，如VStack的构造器

init(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, @ViewBuilder content: () -> Content)
//使用
VStack{
	Text()
	Button()
	...
}