SwiftUI:视图修饰
前言
SwiftUI的视图修饰包含了 Controls修饰 控件修饰
Effects修饰 效果修饰
Layout修饰 布局修饰
Text修饰 文本修饰
Image修饰 图像修饰
List修饰 列表修饰
Navigation Bar 导航修饰
Styles修饰 风格修饰
Accessibility 访问修饰
Events修饰 事件修饰
Gestures修饰 手势修饰
Shape Modifiers 形状修饰
Others修饰 其他修饰
一.Controls修饰
1.Action Sheet
Action Sheet 底部弹框 用于从底部弹出一些按钮通知，让用户进行选择
竖着排列按钮
.actionSheet(isPresented : IsPresented){
Content
}
@State private var showingActionSheet = false @State private var backgroundColor = Color.white Text("Hello World") .frame(width : 300, height : 300) .background(backgroundColor) .onTapGesture{ self.showingActionSheet = true } .actionSheet(isPresented : $showingActionSheet){ ActionSheet(title : Text("Change background"), message : Text("Select a new color"), buttons : [ .default(Text("Red")){ self.backgroundColor = .red } .default(Text("Green")){ self.backgroundColor = .green } .default(Text("Blue")){ self.backgroundColor = .blue } .cancel() ] ) }
2.Alert
Alert 中间弹框 用于从中间弹出一些按钮通知，让用户进行选择
有文本通知和按钮
@State private var showingAlert = false var body: some View { Button("Show Alert"){
self.showingAlert = true
} .alert(isPresented: $showingAlert){ Alert(title:Text("HellowSwiftui"), message:Text("This is")) } }
3.Context Menu
Context Menu 长按菜单 一般用户不怎么会想到长按，少用这个吧
@State private var backgroundColor = Color.red var body: some View {
VStack{ Text("Hello,World") .padding() .background(backgroundColor) Text("Change Color") .padding() .contextMenu{ Button(action:{ self.backgroundColor = .red }){ Text("Red") } Button(action:{ self.backgroundColor = .green }){ Text("Green") } Button(action:{ self.backgroundColor = .blue }){ Text("Blue") } } } }
4.Item Provider
5.Popover + 6.Sheet
Popover和Sheet都是弹出一个页面通知，目前没看出有什么区别
@State private var popoverIsShown = false var body: some View { VStack{ Button("显示sheet"){ self.popoverIsShown = true } .sheet(isPresented: self.$popoverIsShown){ Button("关闭"){ self.popoverIsShown = false } } Button("显示popover"){ self.popoverIsShown = true } .popover(isPresented: self.$popoverIsShown){ Button("关闭"){ self.popoverIsShown = false } } } }
7.Status Bar Hidden
Status Bar Hidden 隐藏状态栏 用于隐藏手机上面的状态栏
@State var showflag = true var body: some View { VStack{ Text("Hello World") .padding() Button("显示或隐藏Status bar"){ self.showflag.toggle() } .frame(minWidth : 0,maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) .background(Color.orange) .edgesIgnoringSafeArea(.all) .statusBar(hidden: self.showflag) } }
8.Tab Item
Tab Item 页面项 用于搭配TabView控件，生成分页
var body: some View { TabView { View1() .tabItem { Image(systemName: "list.dash") Text("Menu") } View2() .tabItem { Image(systemName: "square.and.pencil") Text("Order") } } }
9.Toolbar
Toolbar 工具栏 用于创建工具栏
init(){ UIToolbar.appearance().barTintColor = UIColor.red } var body : some View{ NavigationView{ List{ Text("Item") } .toolbar{ ToolbarItem(placement : .bottomBar){ Button(action : {}, label : {Text("ITEM1")}) } ToolbarItem(placement : .bottomBar){ Button(action : {}, label : {Text("ITEM2")}) } } } }
二.Effects修饰
1.Accent Color
2.Blend Mode
3.Blur
4.Border
5.Brightness
6.Clip Shape
7.Color Multiply
8.Compositing Group
9.Content Shape
10.Contrast
11.Corner Radius
Corner Radius 圆弧 用于添加圆弧效果
Text("a") .cornerRadius(10)
12.Drawing Group
13.Foreground Color
Foreground Color 前景色 用于添加颜色效果
Text("a") .foregroundColor(.blue)
14.Grayscale
15.Hover Effect
16.Invert
17.Luminance to Alpha
18.Mask
19.Matched Geometry Effect
20.Opacity
21.Preferred Color Scheme
22.Projection
23.Rotation 3D Effect
24.Rotation Effect
25.Saturation
26.Scale Effect
27.Shadow
Shadow 阴影 用于添加阴影效果
Text("a")
.shadow(radius : 10)
.shadow(radius : 10, x : 0, y : 10)
28.Transform
三.Layout修饰
Layout修饰符能够调整各种控件的布局
1.Alignment Guide
2.Anchor Preference
3.Aspect Ratio
4.Background
Background 背景色 用于添加背景色
Text("a") .background(Color.blue)
5.Background Preference Value
6.Coordinate Space
7.Edges Ignoring Safe Area
Edges Ignoring Safe Area 元素忽略安全区域 使元素延伸到安全区域外
Text("a") .edgesIgnoringSafeArea([.all])
8.Fixed Size
9.Frame
Frame 边框 用于调整边框布局
Circle() .frame(width : 100.0, height : 100.0)
10.Full Screen Cover
11.Hidden
12.Ignores Safe Area
13.Labels Hidden
14.Layout Priority
15.Overlay
16.Overlay Preference Value
17.Padding
Padding 内边距 用于扩展组件的边缘范围
Text("a")
.padding(.all)
.padding(EdgeInsets(top : 0, leading : 20, bottom : 20, trailing : 0))
.padding(.top)
.padding(.bottom)
.padding(.leading) //左对齐
.padding(.trailing) //右对齐
18.Position
19.Scaled to Fill
20.Scaled to Fit
21.Transform Anchor Preference
22.Z Index
四.Text
Text修饰符只能用于修饰Text控件
1.Allows Tightening
2.Autocapitalization
3.Baseline Offset
4.Bold
5.Disable Autocorrection
6.Flips for Right to left
7.Font
Font 字体 用于修饰字体控件
Text("a") .font(.title)
.font(.system(size : 16, weight : .light, design : .default))
8.Font Weight
9.Italic
10.Kerning
11.Keyboard Type
12.Line Limit
13.Line Spacing
14.Minimum Scale Factor
15.Multiline Text Alignment
16.Strikethrough
17.Text Case
18.Text Content Type
19.Tracking
20.Truncation Mode
21.Underline
五.Image
Image修饰符只能用于修饰 Image 控件
1.Antialiased
2.Image Rendering Mode
3.Image Resizable
Image Resiable 图片自适应大小 用于图片自动调整大小
一般在设置外框.frame之后，图片会根据外框自动调整大小
Image(systemName : "clock") .resizable()
4.Interpolation
5.Symbol Image Scale
Symbol Image Scale SF图标缩放 用于改变SF图片的大小
Image(systemName : "clock") .imageScale(.medium) .imageScale(.small) .imageScale(.large)
六.List
1.Delete Disabled
2.List Item Tint
3.List Row Background
4.List Row Insets
5.Move Disabled
七.Navigation Bar
1.Navigation Bar Back Button Hidden
2.Navigation Bar Hidden
3.Navigation Bar Title Display Mode
4.Navigation Title
Navigation Title 导航栏标题 用于添加导航栏标题，一般用于修饰Navigation VIew
.navigationTItle("Title")
.navigationBarItems(leading: View)
八.Styles
1.Button Style
2.Date Picker Style
3.Group Box Style
4.Index View Style
5.Label Style
6.List Style
7.Menu Style
8.Picker Style
9.Progress View Style
10.Sign in With Apple Button Style
11.Tab View Style
12.Text Field Style
13.Toggle Style
九.Accessibiity
1.Accessibility Activation Point
2.Accessibility Add Traits
3.Accessibility Hidden
4.Accessibility Hint
5.Accessibility Identifier
6.Accessibility Ignores Invert Colors
7.Accessibility Input Labels
8.Accessibility Label
9.Accessibility Remove Traits
10.Accessibility Sort Priority
11.Accessibility Value
12.Action
13.Adjustable Action
14.Element
15.Scroll Action
十.Events
Events修饰符当控件发生改变时候响应事件
1.On Appear
2.On Change
3.On Continue User Activity
4.On Delete
On Delete 手势右滑删除 主要用于List列表
也可以在导航栏添加 Edit/Done 按钮来删除
struct sonStruct : Identifiable { var id = UUID() var Name : String = "" } struct ContentView: View { @State var sonstruct : [sonStruct] = [sonStruct(Name : "1"), sonStruct(Name : "2"), sonStruct(Name : "3"), sonStruct(Name : "4")] var body: some View { List { ForEach(sonstruct) { item in Text("\(item.Name)") } .onMove(perform : move) .onDelete{self.sonstruct.remove(atOffsets: $0)} } } func move(from source : IndexSet, to destination: Int) { self.sonstruct.move(fromOffsets: source, toOffset: destination) } }
5.On Disappear
6.On Drag
7.On Drop
8.On Hover
9.On Insent
10.On Move
这个手势一点都不好用，不仅有可能兼容问题，还得长按来移动数据
11.On Open URL
12.On Preference Change
13.On Receive
十一.Gestures
Gestures 手势 用于修饰相关手势
1.Gesture
2.High Priority Gesture
3.On Tap Gesture
On Tap Gesture 当发生点击手势时触发
@State var a : Bool = true Image(systemName : self.a ? "clock" : "pencil") .onTapGesture{ self.a.toggle() }
4.Simultaneous Gesture
十二.Shape Modifiers
Shape Modifiers 修饰符只能用于修饰Shape控件
1.Fill
Fill 填充 用于填充形状颜色
Circle()
.fill(Color.green)
2.Offset
3.Rotation
4.Scale
5.Size
6.Stroke
7.Stroke Border
8.Transform
9.Trim
十三.Other
1.Allows Hit Testing
2.Animation
3.Default App Storage
4.Disabled
5.Environment
6.Environment Object
Environment Object 环境对象 用于传递环境变量
详情看视图绑定那一章节Environment
.environmentObject(bindable : ObservableObject)
7.Equatable
8.Focused Value
9.Help
10.Id
11.Keyboard Shortcut
12.Preference
13.Redacted
14.Tag
15.Transaction
16.Transform Environment
17.Transform Preference
18.Transition
19.Unredacted
20.User Activity
