SwiftUI 组件协议 View

在 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>

你可能感兴趣的:(SwiftUI 组件协议 View)