在 SwiftUI 中,这是一个视图协议,任何自定义的视图都遵循该协议,并实现协议属性 body 来提供具体的视图内容和行为。
public protocol View : _View {
/// The type of view representing the body of this view.
///
/// When you create a custom view, Swift infers this type from your
/// implementation of the required `body` property.
associatedtype Body : View
/// Declares the content and behavior of this view.
var body: Self.Body { get }
}
该属性返回一个遵循了 View 协议的视图,用来展示具体的内容。我们所有的视图相关行为,都将在该属性中进行。
一些属性设置
// 透明度
@inlinable public func opacity(_ opacity: Double) -> Self.Modified<_OpacityEffect>
// 视图是否可交互
public func disabled(_ disabled: Bool) -> Self.Modified<_EnvironmentKeyTransformModifier>
// 位置
@inlinable public func position(_ position: CGPoint) -> Self.Modified<_PositionLayout>
@inlinable public func position(x: Length = 0, y: Length = 0) -> Self.Modified<_PositionLayout>
// 前景色
public func foregroundColor(_ color: Color?) -> Self.Modified<_EnvironmentKeyWritingModifier>
// 视图模糊,值越大越模糊
@inlinable public func blur(radius: Length, opaque: Bool = false) -> Self.Modified<_BlurEffect>
// 亮度,其值在 0-1,值越大,越亮
@inlinable public func brightness(_ amount: Double) -> Self.Modified<_BrightnessEffect>
// 颜色反转
@inlinable public func colorInvert() -> Self.Modified<_ColorInvertEffect>
// 颜色叠加/混合
@inlinable public func colorMultiply(_ color: Color) -> Self.Modified<_ColorMultiplyEffect>
// 添加阴影
/// - Parameters:
/// - color: The shadow's color.
/// - radius: The shadow's size.
/// - x: A horizontal offset you use to position the shadow relative to
/// this view.
/// - y: A vertical offset you use to position the shadow relative to
/// this view.
/// - Returns: A view that adds a shadow to this view.
@inlinable public func shadow(color: Color = Color(.sRGBLinear, white: 0, opacity: 0.33), radius: Length, x: Length = 0, y: Length = 0) -> Self.Modified<_ShadowEffect>
// 缩放
public func imageScale(_ scale: Image.Scale) -> Self.Modified<_EnvironmentKeyWritingModifier>
// 字体
public func font(_ font: Font?) -> Self.Modified<_EnvironmentKeyWritingModifier>
// 隐藏
public func hidden() -> Self.Modified<_HiddenModifier>
除此之外,该协议定义了一系列协议方法,供遵循该协议的组件进行使用。
手势
// 长按手势
public func longPressAction(minimumDuration: Double = 0.5, maximumDistance: Length = 10, _ action: @escaping () -> Void, pressing: ((Bool) -> Void)? = nil) -> _AutoResultView
// 点击
public func tapAction(count: Int = 1, _ action: @escaping () -> Void) -> _AutoResultView
视图显示/消失
// 视图显示的时候回调
public func onAppear(perform action: (() -> Void)? = nil) -> Self.Modified<_AppearanceActionModifier>
// 视图消失的时候回调
public func onDisappear(perform action: (() -> Void)? = nil) -> Self.Modified<_AppearanceActionModifier>
视图添加背景
@inlinable public func background(_ background: Background, alignment: Alignment = .center) -> Self.Modified<_BackgroundModifier> where Background : View
@inlinable public func background(_ content: S, cornerRadius: Length) -> Self.Modified<_BackgroundModifier>> where S : ShapeStyle
@inlinable public func background(_ content: S.Member, cornerRadius: Length) -> Self.Modified<_BackgroundModifier>> where S : ShapeStyle
@inlinable public func background(_ content: S.Member) -> Self.Modified<_BackgroundModifier>> where S : ShapeStyle
添加的背景,可以是一个视图:
Text("Hello World").font(.largeTitle).color(.white).background(Image("image"), alignment: .center)
也可以是一个 Shape,或者颜色:
Text("Hello World").font(.largeTitle).color(.white).background(Color.gray)
添加遮罩层
/// - Parameters:
/// - overlay: 遮罩视图
/// - alignment: 对齐方式
func overlay(_ overlay: Overlay, alignment: Alignment = .center) -> Self.Modified<_OverlayModifier> where Overlay : View
这里的 overlay 可以是一个视图:
Image("image").overlay(
HStack{
Text("Hello World")
Spacer()
}.padding().foregroundColor(.white).background(Color.black), alignment: .bottom)
也可以是形状(Shape)
Image("image")
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 4))
.shadow(radius: 10)
系统定义了一些形状:Circle、Rectangle、RoundedRectangle、RotatedShape等,他们都遵循Shape协议,详情可参考 Shape;
添加边框
/// - Parameters:
/// - content: 边框颜色
/// - width: 边框的宽
@inlinable public func border(_ content: S, width: Length = 1) -> Self.Modified<_OverlayModifier>> where S : ShapeStyle
例如:
Image("image").border(Color.black, width: 6)
- 添加圆角边框
/// - Parameters:
/// - content: 边框颜色
/// - width: 边框的宽
/// - cornerRadius: 圆角半径
@inlinable public func border(_ content: S, width: Length = 1, cornerRadius: Length) -> Self.Modified<_OverlayModifier>> where S : ShapeStyle
例如:
Image("image").border(Color.red, width: 6, cornerRadius: 40)
该方法添加的圆角,圆角部分不会裁去,只是在视图内添加了一个圆角的边框,如果想要裁去圆角部分,可结合 cornerRadius
方法一起使用:
Image("image").border(Color.red, width: 6, cornerRadius: 40).cornerRadius(40)
视图相对大小
/// - Parameter proportion: 相对于父视图的相对宽度, 0-1的值
@inlinable public func relativeWidth(_ proportion: Length) -> Self.Modified<_RelativeLayoutTraitsLayout>
/// - Parameter proportion: 相对父视图的相对高度
@inlinable public func relativeHeight(_ proportion: Length) -> Self.Modified<_RelativeLayoutTraitsLayout>
/// - Parameters:
/// - width: 相对于父视图的相对宽度
/// - height: 相对父视图的相对高度
@inlinable public func relativeSize(width: Length, height: Length) -> Self.Modified<_RelativeLayoutTraitsLayout>
例如
Color.purple
.relativeSize(width: 0.75, height: 0.75)
.frame(width: 200, height: 200)
.border(Color.gray)
设置视图固定宽高比
/// - Parameters:
/// - aspectRatio: 宽高比
/// - contentMode: 填充模式 fit or fill
@inlinable public func aspectRatio(_ aspectRatio: Length? = nil, contentMode: ContentMode) -> Self.Modified<_AspectRatioLayout>
/// - Parameters:
/// - aspectRatio: 宽高比,例如 Size(width: 3, height: 4) 为 3: 4
/// - contentMode: 填充模式
@inlinable public func aspectRatio(_ aspectRatio: CGSize, contentMode: ContentMode) -> Self.Modified<_AspectRatioLayout>
// 等比例缩放
@inlinable public func scaledToFit() -> Self.Modified<_AspectRatioLayout>
// 铺满填充
@inlinable public func scaledToFill() -> Self.Modified<_AspectRatioLayout>
裁切
/// - Parameters:
/// - shape: 裁切的形状,Shape
/// - style: 填充
@inlinable public func clipShape(_ shape: S, style: FillStyle = FillStyle()) -> Self.Modified<_ClipEffect> where S : Shape
/// 裁切超出区域的视图
/// - Parameter antialiased:在裁切时是否平滑处理
@inlinable public func clipped(antialiased: Bool = false) -> Self.Modified<_ClipEffect>
/// 裁切圆角
/// - Parameter radius:圆角半径
/// - Parameter antialiased: 在裁切时是否平滑处理
@inlinable public func cornerRadius(_ radius: Length, antialiased: Bool = true) -> Self.Modified<_ClipEffect>