美文网首页Swift UISwiftUI
SwiftUI 组件协议 View

SwiftUI 组件协议 View

作者: 流火绯瞳 | 来源:发表于2021-07-02 12:03 被阅读0次

    在 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<Bool>>
    
    // 位置
    @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<Color?>>
    
    // 视图模糊,值越大越模糊
    @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<Image.Scale>>
    
    // 字体
    public func font(_ font: Font?) -> Self.Modified<_EnvironmentKeyWritingModifier<Font?>>
    
    // 隐藏
    public func hidden() -> Self.Modified<_HiddenModifier>
    

    除此之外,该协议定义了一系列协议方法,供遵循该协议的组件进行使用。

    手势

    // 长按手势
    public func longPressAction(minimumDuration: Double = 0.5, maximumDistance: Length = 10, _ action: @escaping () -> Void, pressing: ((Bool) -> Void)? = nil) -> _AutoResultView<Self>
    // 点击
    public func tapAction(count: Int = 1, _ action: @escaping () -> Void) -> _AutoResultView<Self>
    

    视图显示/消失

    // 视图显示的时候回调
    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: Background, alignment: Alignment = .center) -> Self.Modified<_BackgroundModifier<Background>> where Background : View
    
        @inlinable public func background<S>(_ content: S, cornerRadius: Length) -> Self.Modified<_BackgroundModifier<RoundedRectangle.Filled<S>>> where S : ShapeStyle
    
        @inlinable public func background<S>(_ content: S.Member, cornerRadius: Length) -> Self.Modified<_BackgroundModifier<RoundedRectangle.Filled<S>>> where S : ShapeStyle
    
        @inlinable public func background<S>(_ content: S.Member) -> Self.Modified<_BackgroundModifier<Rectangle.Filled<S>>> 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: Overlay, alignment: Alignment = .center) -> Self.Modified<_OverlayModifier<Overlay>> 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<S>(_ content: S, width: Length = 1) -> Self.Modified<_OverlayModifier<Rectangle.InsetShape.Stroked.Filled<S>>> where S : ShapeStyle
    

    例如:

    Image("image").border(Color.black, width: 6)
    
    
    • 添加圆角边框
    /// - Parameters:
        ///   - content: 边框颜色
        ///   - width: 边框的宽
        ///   - cornerRadius: 圆角半径
    @inlinable public func border<S>(_ content: S, width: Length = 1, cornerRadius: Length) -> Self.Modified<_OverlayModifier<RoundedRectangle.InsetShape.Stroked.Filled<S>>> 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<S>(_ shape: S, style: FillStyle = FillStyle()) -> Self.Modified<_ClipEffect<S>> where S : Shape
    
    /// 裁切超出区域的视图
     /// - Parameter antialiased:在裁切时是否平滑处理
        @inlinable public func clipped(antialiased: Bool = false) -> Self.Modified<_ClipEffect<Rectangle>>
    
    /// 裁切圆角
    /// - Parameter radius:圆角半径
    /// - Parameter antialiased: 在裁切时是否平滑处理
        @inlinable public func cornerRadius(_ radius: Length, antialiased: Bool = true) -> Self.Modified<_ClipEffect<RoundedRectangle>>
    

    相关文章

      网友评论

        本文标题:SwiftUI 组件协议 View

        本文链接:https://www.haomeiwen.com/subject/kpddqctx.html