自定义按钮样式 (SwiftUI) tvOS

Posted 2023-02-24

【中文标题】自定义按钮样式 (SwiftUI) tvOS

【英文标题】：Custom Button style (SwiftUI) tvOS

【发布时间】：2020-10-11 06:01:34

【问题描述】：

所以我有一个自定义按钮类（这样我就可以删除所有徽标背后的背景。）

但是现在当用户将鼠标悬停在按钮上时缩放不起作用/激活 - 这意味着他们不知道他们在哪个按钮上。

我想知道当遥控器在按钮上方或按钮上时，如何添加增加按钮大小（宽度和高度）的功能？

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",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())
                                                   .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()
    

【问题讨论】：

这是否回答了您的问题***.com/a/63172333/12299030？

【参考方案1】：

Apple 推荐的解决方案是使用新的CardButtonStyle 按钮样式，它移除了通常的填充但保留了 tvOS 悬停效果：

Button(action: , label: 
    Text("B")
        .padding()
        .background(Color.red)
        .clipShape(Circle())
)
.buttonStyle(CardButtonStyle())

但是，这仍然会应用一个圆形矩形按钮背景，这与您的圆形背景看起来不太好。

我建议您更新您的设计，以便您可以使用 CardButtonStyle。 Button 管理自己的焦点状态，因此您不能覆盖或连接任何东西。在 tvOS 上，你不能从头开始制作自己的按钮，因为没有 onTap/onClick 事件。您唯一的其他真正选择是在 UIKit 中构建一个自定义按钮，这样您就可以避免 SwiftUI 在 tvOS 上的限制。