Swiftui 手表上快捷键的奇怪内部视图

Swiftui 手表上快捷键的奇怪内部视图,swiftui,watchos-6,Swiftui,Watchos 6,我刚开始使用Watch development和SwiftUI,我想我应该从一个简单的登录屏幕开始。我做了两个不同样式的按钮。奇怪的是,我的按钮有一个奇怪的红色内部视图,我不知道为什么 struct ContentView : View { var body: some View { VStack { Button( "Login") { }

我刚开始使用Watch development和SwiftUI,我想我应该从一个简单的登录屏幕开始。我做了两个不同样式的按钮。奇怪的是,我的按钮有一个奇怪的红色内部视图,我不知道为什么

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            Button( "Login")
            {            
            }
            .accentColor( .white)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.red)
            .cornerRadius( 5.0)

            Button( "Sign Up")
            {
            }
            .accentColor( .red)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.white)
            .cornerRadius( 5.0)
        }
    }
}

有人能告诉我这里发生了什么事吗

另外,如果有人拥有1500的声誉,他们可以创建WatchOS6标签吗


更新:这在iPhone上比在手表上工作得更好,按钮在这两款设备上的工作方式似乎有所不同。正如@MarkT所指出的,您需要从简单的按钮样式开始。问题是它会阻止您使用自己的按钮样式。

我认为这是使用
accentColor
定义按钮文本颜色的结果

您可以将其替换为
foregroundColor
,并获得相同的文本颜色,但希望不会出现您当前遇到的奇怪图案

更改后,您的代码将如下所示:

struct ContentView : View
{
    var body: some View
    {
        VStack
        {
            Button( "Login")
            {            
            }
            .foregroundColor( .white)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.red)
            .cornerRadius( 5.0)

            Button( "Sign Up")
            {
            }
            .foregroundColor( .red)
            .frame( idealHeight:50.0)
            .padding( [.leading, .trailing], 10.0)
            .background( Color.white)
            .cornerRadius( 5.0)
        }
    }
}
不幸的是,这并不能完全解决问题。 正如你所看到的,我们从这一点出发:

为此:


这并不理想。

您只是在“默认”按钮后面定义了一个背景,这就是为什么它看起来如此有线

将按钮样式更改为“普通”并将角半径应用于背景将有所帮助。当然,您必须通过使用填充框调整背景大小

       Button( "Login")
            {
            }
            .buttonStyle(PlainButtonStyle())
            .padding(.horizontal, 60)
            .padding(.vertical, 10)
            .background(
                   Color.red
                      .cornerRadius( 5.0))
                
更新:如d4Rk中所述,我们必须使用PlainButtonStyle()

根据需要,您应该将半径设置为22点(或滚动视图为9点)

这对我很有效

HStack {
        Button("Login")
            {
            }
        .buttonStyle(BorderedButtonStyle(tint: .clear))
        .foregroundColor(.white)
    }
    .background(Color.red)
    .cornerRadius(5)

如果它在列表中,也可以试试这个

.listRowPlatterColor(Color.clear)

喊得好。我知道我的答案在某种程度上被弄糊涂了。这不起作用,使用上面的代码会在一个大的圆形红色按钮中给我一个小的圆形白色正方形。如果将.buttonStyle(.plain)移动到第一行(在.padding(.horizontal,60)上方)然后它工作了!!你能编辑你的答案吗,我会接受它。不幸的是,它不适用于我创建的按钮样式,所以我现在必须删除我自己的样式。对我来说,它工作了,但我可以将按钮样式移到第一行。这应该不会有任何区别。我只在预览中尝试过,但我很高兴它成功了为你工作。这样更好,但不完美,谢谢你的回复。