在 SwiftUI 中凰浮，這是一個視圖協(xié)議膜廊，任何自定義的視圖都遵循該協(xié)議选泻，并實現(xiàn)協(xié)議屬性 body 來提供具體的視圖內(nèi)容和行為冲粤。

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 協(xié)議的視圖，用來展示具體的內(nèi)容页眯。我們所有的視圖相關(guān)行為梯捕，都將在該屬性中進(jìn)行。

一些屬性設(shè)置

// 透明度
@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>

// 顏色反轉(zhuǎn)
 @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>

除此之外短曾，該協(xié)議定義了一系列協(xié)議方法，供遵循該協(xié)議的組件進(jìn)行使用赐劣。

手勢

// 長按手勢
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>

視圖顯示/消失

// 視圖顯示的時候回調(diào)
public func onAppear(perform action: (() -> Void)? = nil) -> Self.Modified<_AppearanceActionModifier>

   // 視圖消失的時候回調(diào)
    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)

系統(tǒng)定義了一些形狀：Circle魁兼、Rectangle婉徘、RoundedRectangle、RotatedShape等咐汞，他們都遵循Shape協(xié)議盖呼，詳情可參考 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)

該方法添加的圓角碉考，圓角部分不會裁去，只是在視圖內(nèi)添加了一個圓角的邊框挺身，如果想要裁去圓角部分侯谁，可結(jié)合 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)

設(shè)置視圖固定寬高比

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

/// 裁切超出區(qū)域的視圖
 /// - 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>>