问题描述
所以我有一个自定义按钮类（这样我就可以删除所有徽标后面的背景。）
但是现在，当用户将鼠标悬停在按钮上时，缩放功能不起作用/无法激活-这意味着他们不知道按钮位于哪个按钮上。
我想知道当遥控器在按钮上方或按钮上方时，如何添加增加按钮尺寸（宽度和高度）的功能吗？
struct RedRoundButton: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding(0)
.font(.title)
.background( Circle()
.fill(Color.red))
}
}
和按钮代码
Button(action: {
// Analytics.logEvent("Station_Change",parameters: [
// "name": station.name
//])
AdStichrApi.station = station.name
MusicPlayer.shared.startBackgroundMusic(url:station.listenlive,type: "radio")
// self.showingDetail.toggle()
}) {
KFImage(URL(string: station.imageurl)!)
.resizable()
.renderingMode(.original)
.frame(width:geo.size.width / 10,height:geo.size.width / 10)
.clipShape(Circle())
.sheet(isPresented: self.$showingDetail) {
// MediaPlayerView()
}
}
.buttonStyle(RedRoundButton())
.frame(width: geo.size.width / 10,height: geo.size.width / 10)
我已经确定可以使用此
.focusable(true){isFocused in
self.focused = true
}
.scaleEffect(self.focused ? 1:0)
但是它不会缩放按钮
完整代码
//
// ContentView.swift
// DRN1
//
// Created by Russell Harrower on 10/10/20.
//
import SwiftUI
import AVKit
import struct Kingfisher.RoundCornerImageProcessor
import KingfisherSwiftUI
struct ContentView: View {
@State var showingDetail = false
@State var stations: [Station] = []
@State var showDetail = String(false)
@State var focused = false
var body: some View {
GeometryReader { geo in
Group {
if self.stations.isEmpty {
Text("Loading")
//this must be empty
//.navigationBarHidden(true)
}
else
{
vstack(alignment: .leading){
Text("Our Stations")
.linespacing(30)
.padding(5)
.font(.system(size: 30,weight: .heavy,design: .default))
ScrollView(.horizontal,showsIndicators: false) {
HStack(alignment: .bottom,spacing: 10) {
ForEach(self.stations) { station in
//return
Button(action: {
// Analytics.logEvent("Station_Change",height:geo.size.width / 10)
.clipShape(Circle())
.sheet(isPresented: self.$showingDetail) {
// MediaPlayerView()
}
}
.buttonStyle(RedRoundButton())
.focusable(true){isFocused in
self.focused = true
}
.scaleEffect(self.focused ? 1:0)
.frame(width: geo.size.width / 10,height: geo.size.width / 10)
}
}.frame(height: geo.size.width / 4)
}.frame(height: geo.size.width / 4)
}
}
}
}
.onAppear {
// self.navigationViewStyle(StackNavigationViewStyle())
MusicPlayer.shared.startBackgroundMusic(url: "http://stream.radiomedia.com.au:8006/stream",type: "radio")
//print(self.showingDetail)
Api().getStations { (stations) in
self.stations = stations
}
}
.onPlayPauseCommand(perform: {
if(MusicPlayer.shared.player?.rate != 0)
{
MusicPlayer.shared.player?.pause()
}
else{
MusicPlayer.shared.player?.play()
}
})
}
}
struct RedRoundButton: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding(0)
.font(.title)
.background(Circle()
.fill(Color.red))
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
解决方法
Apple推荐的解决方案是使用新的CardButtonStyle按钮样式，该样式将删除常规填充，但保持tvOS悬停效果：
Button(action: {},label: {
Text("B")
.padding()
.background(Color.red)
.clipShape(Circle())
})
.buttonStyle(CardButtonStyle())
但是，这仍然会应用圆角矩形按钮背景，这与您的Circle背景看起来不太一样。
我建议您更新设计，以便可以使用CardButtonStyle。 Button管理自己的焦点状态，因此您无法覆盖或关联任何内容。在tvOS上，您将无法从头开始创建自己的按钮，因为没有onTap / onClick事件。您唯一真正的选择是在UIKit中构建自定义按钮，从而避免tvOS上SwiftUI的限制。