如何在 WatchOS 中使用背景视图填充整个 Button 区域？

Posted 2023-02-24

【中文标题】如何在 WatchOS 中使用背景视图填充整个 Button 区域？

【英文标题】：How do you fill entire Button area with background View in WatchOS?

【发布时间】：2019-12-19 02:12:57

【问题描述】：

我试图让我的背景视图跨越 Apple Watch 外形尺寸上按钮的整个区域。

struct SurveyView: View 

var body: some View 
    Button(action: 
        print("Test tapped.")
    ) 
        HStack 
            Text("Test")
                .fontWeight(.semibold)
        
        .frame(minWidth: 0, maxWidth: .infinity)
        .padding()
        .foregroundColor(.white)
        .background(LinearGradient(gradient: Gradient(colors: [.green, .blue]), startPoint: .leading, endPoint: .trailing))


     
   

如何让背景跨越整个 Button？

更新：原来我的问题也与处于列表视图中有关。设置蒙版并不能完全解决它。

struct SurveyView: View 

var body: some View 
    List() 
        Button(action: 
            print("Test tapped.")
        ) 
            Text("Test")
                .fontWeight(.semibold)
        
        .background(Color.orange)


        .mask(RoundedRectangle(cornerRadius: 24))
        
    

【参考方案1】：

我会这样做：

Button(action: 
    print("Test tapped.")
) 
    Text("Test")
        .fontWeight(.semibold)
        .padding()
        .foregroundColor(.white)

.background(LinearGradient(gradient: Gradient(colors: [.green, .blue]), startPoint: .leading, endPoint: .trailing))
.mask(RoundedRectangle(cornerRadius: 24))

更新：列表的情况

var body: some View 
    List() 
        Button(action: 
            print("Test tapped.")
        ) 
            Text("Test")
                .fontWeight(.semibold)
                .padding()
        
        .background(Color.orange)
        .mask(RoundedRectangle(cornerRadius: 24))
        .listRowPlatterColor(Color.clear)
    

【讨论】：

这是一个很好的静态按钮解决方案。我已经更新了我的问题，专门要求在列表视图中添加一个按钮。

有没有办法获得相同的结果，但使用 swift 5？