在苹果的Design for spatial user interfaces WWDC video around 13:00个声明中,关于悬停效果的如下几点:

当你在设计一个锁定时,包括一个形状,它将允许系统在人们关注它时显示悬停效果.每个锁定是一个单一的互动元素.您需要定义一个自定义区域,以便当人们看到它时它可以变亮.这有助于他们理解整个区域是一个可以 Select 的单个元素.记住,在每个包含的形状之间保持小的空间.

其中包括来自音乐应用程序的例子:

Music app screenshot 1 Music app screenshot 2

我想在我的应用程序中这样做,在LazyVGrid中显示屏幕,但还没有能够实现这一结果.我知道你需要使用plain按钮样式来隐藏边框按钮的背景,但保持悬停效果.悬停效果显示为一个椭圆形虽然,而不是我希望它是一个圆角矩形与额外的填充周围和4pt间距之间的悬停效果,如上图所示.如何才能做到这一点?我以为.contentShape(.hoverEffect, .rect(cornerRadius: 50))会自定义区域,但它似乎没有改变任何东西.

Button(action: tapAction) {
    VStack {
        Color.clear
            .background(.regularMaterial)
            .aspectRatio(1, contentMode: .fit)
            .clipShape(.rect(cornerRadius: 10))
            
        HStack(spacing: 0) {
            VStack(alignment: .leading, spacing: 0) {
                Text("Line one")
                
                Text("Line two")
                    .foregroundStyle(.secondary)
            }
            
            Spacer()
            
            MarkWateredButton(action: markWateredAction)
        }
    }
    .contentShape(.hoverEffect, .rect(cornerRadius: 50).inset(by: -10)) // FIXME: Doesn't do anything
}
.buttonStyle(.plain)

Screenshot from my app

推荐答案

是的,就像伊晨·贝曼说的,你需要.hoverEffect()美元.作为额外的奖励.你的背景角半径是10.所以外半径应该是20,填充10才能看起来很漂亮,和😄匹配.

Button(action: tapAction) {
    VStack {
        Color.clear
            .background(.regularMaterial)
            .aspectRatio(1, contentMode: .fit)
            .clipShape(.rect(cornerRadius: 10))
            
        HStack(spacing: 0) {
            VStack(alignment: .leading, spacing: 0) {
                Text("Line one")
                
                Text("Line two")
                    .foregroundStyle(.secondary)
            }
            
            Spacer()
            
            MarkWateredButton(action: markWateredAction)
        }
    }
    .padding(10)
    .contentShape(.hoverEffect, .rect(cornerRadius: 50)) 
    .hoverEffect()
}
.buttonStyle(.plain)

Swift相关问答推荐

如何在一个角色隔离类上编写自定义==实现?

ARRaycast Query和前置摄像头(ARFaceTrackingConfiguration)

是否在核心数据中使用Uint?

如何才能在同一线程上调用类中的每个方法,而不对每个调用使用同步块?

从Firebase播放音频文件不起作用

不能将符合协议的SWIFT类的实例分配给需要该协议的Objective-C属性

在Swift中,将秒设置为0也等于将1添加到分钟

在 SwiftUI 中禁用 Select 器选项

是否有一个带有空初始值设定项的 Swift 类/ struct 的标准协议

如何在 SwiftUI 中获取视图的位置

try 制作一个 Swift 扩展来替换字符串中的多次出现

Reality Composer Tap Trigger 问题

如何以快速 Select 器菜单样式调整图像大小

我如何从 UIAlertController 导航到新屏幕(swiftUI)

如何让 SwiftUI 中的文本在旋转框架的同时侧向显示?

swift:修改字典中的数组

Swift 动画 WithDuration 语法是什么?

Swift 协议只能设置?

Swift 3:日期与 NSDate?

如何在 SwiftUI 中为删除和禁用配置 ContextMenu 按钮?