SwiftUI 设置边框、透明度、阴影

前言

xcode 13.3
iOS 15.4

1、设置边框

1.1 设置边框颜色

默认为1的边框

Image("turtlerock")
   .border(.red)

解释

    /// - Parameters:
    ///   - content: A value that conforms to the ``ShapeStyle`` protocol,
    ///     like a ``Color`` or ``HierarchicalShapeStyle``, that SwiftUI
    ///     uses to fill the border.
    ///   - width: The thickness of the border. The default is 1 pixel.
    ///
    /// - Returns: A view that adds a border with the specified style and width
    ///   to this view.
    @inlinable public func border<S>(_ content: S, width: CGFloat = 1) -> some View where S : ShapeStyle

1.2 设置边框颜色、宽度

设置边框颜色、宽度

Image("turtlerock")
   .border(.red, width: 5)

2、设置透明度

Image("turtlerock")
   .opacity(0.5)

3、设置阴影

默认 shadow 0.33透明度的黑色，水平、垂直偏移量为0

    /// - Parameters:
    ///   - color: The shadow's color.
    ///   - radius: A measure of how much to blur the shadow. Larger values
    ///     result in more blur.
    ///   - x: An amount to offset the shadow horizontally from the view.
    ///   - y: An amount to offset the shadow vertically from the 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: CGFloat, x: CGFloat = 0, y: CGFloat = 0) -> some View

3.1 有背景设置阴影范围

背景周边会展示阴影

VStack {
    
    
    Image("turtlerock")
    
    Image("turtlerock")
        .shadow(radius: 15)
}

3.2 背景透明设置阴影范围

有颜色的部位会展示阴影

VStack {
    
    
    Image("home_blank")
    
    Image("home_blank")
        .shadow(radius: 15)
}

3.3 有背景设置阴影颜色、范围、水平便宜、垂直偏移

背景周边会展示阴影

VStack {
    
    
    Image("turtlerock")
    
    Image("turtlerock")
        .shadow(color: .green, radius: 5, x: 5, y: 5)
}

3.4 背景透明设置阴影颜色、范围、水平便宜、垂直偏移

有颜色的部位会展示阴影

VStack {
    
    
    Image("home_blank")
    
    Image("home_blank")
        .shadow(color: .green, radius: 5, x: 5, y: 5)
}