duilib窗体阴影偏移情况

Posted 2023-03-31

参考技术A 算法阴影的效果不行，处理效果太老，目前比较流行的是高斯模糊后的阴影效果。在iMac里早已系统内置，对于Windows，尤其是duilib这种自绘的库，只能自己去画阴影。

xml配置：

效果如下图，阴影的渐变还是有所欠缺，所以目前推荐使用图片的阴影，自由度很高

先准备个阴影图片，图片尺寸不限，因为可以通过设置点九图数据来拉伸

xml配置

其中，shadowcorner就是点九图信息，根据自己图片设置，数字分别是阴影到边框的距离，如阴影图我是用30半径高斯模糊，y偏移10，所以设置30,20,30,40。

效果如图，基本上可以模拟你想要的任何种类的阴影，前期是你会做阴影图-_-

在使用图片时会出现各种拉伸、偏移的情况，这里需要修改下源码UIShadow.cpp文件。

很明显是尺寸设置有误。
三个地方：

其实都是在m_bIsImageMode中，把m_nSize换成m_rcShadowCorner的参数。

如何在 SwiftUI 中复制此阴影 + 偏移

【中文标题】如何在 SwiftUI 中复制此阴影 + 偏移

【英文标题】：How can I replicate this shadow + offset in SwiftUI

【发布时间】：2021-03-25 06:26:52

【问题描述】：

我正在尝试使用 SwiftUI 复制用 UIKit 编写的组件

这是一个看起来像这样的“阴影卡片容器”-

你看到阴影效果有一个偏移量和高度值

尝试在 SwiftUI 中创建它我无法完全正确 -

UIKit 视图是通过扩展处理的 -

public extension UIView 
    func addShadow(offset: CGSize = .init(width: 0, height: 3), color: UIColor = .init(red: 0, green: 0, blue: 0, alpha: 0.16), radius: CGFloat = 2, opacity: Float = 1) 
        layer.masksToBounds = false
        layer.shadowOffset = offset
        layer.shadowColor = color.cgColor
        layer.shadowRadius = radius
        layer.shadowOpacity = opacity
        
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    

在视图上-

public class CardContainerView: UIView 
    
    private var didlLayoutSubviews = false
    
    public override init(frame: CGRect) 
        super.init(frame: frame)
        configureUI()
    
    
    required init?(coder: NSCoder) 
        return nil
    
    
    public override func layoutSubviews() 
        super.layoutSubviews()
        guard !didlLayoutSubviews else  return 
        didlLayoutSubviews = true
        addShadow(
            offset: .init(width: 0, height: 3),
            color: .init(red: 0, green: 0, blue: 0, alpha: 0.16),
            radius: 2
        )
    


private extension CardContainerView 
    func configureUI() 
        layer.cornerRadius = 12
        clipsToBounds = true
    

我已经在 SwiftUI 中尝试过这个并想出了 -

public struct CardView<Content>: View where Content: View 
    
    private var content: () -> Content
    
    public init(@ViewBuilder _ content: @escaping () -> Content) 
        self.content = content
    
    
    public var body: some View 
        VStack(content: content)
            .padding()
            .frame(maxWidth: .infinity, minHeight: 100, alignment: .top)
            .background(Color(.tertiarySystemBackground))
            .cornerRadius(12)
            .shadow(
                color: Color(.init(red: 0, green: 0, blue: 0, alpha: 0.16)),
                radius: 2
            )
    

我不明白如何在 SwiftUI 中将高度和偏移值应用于阴影

【问题讨论】：

.shadow(color: Color(.init(red: 0, green: 0, blue: 0, alpha: 0.16)), radius: 2, x: 0, y: 3) ?

【参考方案1】：

您可以将偏移值应用于阴影的x 和y 值。

VStack(content: content)
    .padding()
    .frame(maxWidth: .infinity, minHeight: 100, alignment: .top)
    .background(Color(.tertiarySystemBackground))
    .cornerRadius(12)
    .shadow(
        color: Color(.init(red: 0, green: 0, blue: 0, alpha: 0.16)),
        radius: 2,
        y: 3 // This should give you the same effect
    )