在苹果的Design for spatial user interfaces WWDC video around 13:00个声明中,关于悬停效果的如下几点:
当你在设计一个锁定时,包括一个形状,它将允许系统在人们关注它时显示悬停效果.每个锁定是一个单一的互动元素.您需要定义一个自定义区域,以便当人们看到它时它可以变亮.这有助于他们理解整个区域是一个可以 Select 的单个元素.记住,在每个包含的形状之间保持小的空间.
其中包括来自音乐应用程序的例子:
我想在我的应用程序中这样做,在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)