Watch 上 SwiftUI 按钮中奇怪的内部视图答案

【问题标题】：Strange inner view in SwiftUI buttons on WatchWatch 上 SwiftUI 按钮中奇怪的内部视图
【发布时间】：2020-10-08 11:36:04
【问题描述】：

我刚开始使用 Watch 开发和 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 上的效果比在 Watch 上好得多，按钮在这两种设备上的效果似乎不同。正如@MarkT 所指出的，您需要从简单的按钮样式开始。这样做的问题是它会阻止您使用自己的按钮样式。

【问题讨论】：

标签： swiftui watchos-6

【解决方案1】：

您只是在“默认”按钮后面定义背景，这就是它看起来如此连线的原因。

将按钮样式更改为“普通”并将圆角应用于背景会有所帮助。当然你必须通过使用 padding 来调整背景大小...

       Button( "Login")
            {
            }
            .buttonStyle(PlainButtonStyle())
            .padding(.horizontal, 60)
            .padding(.vertical, 10)
            .background(
                   Color.red
                      .cornerRadius( 5.0))

更新：正如 d4Rk 中提到的，我们必须使用 PlainButtonStyle()

【讨论】：

好声音。我知道我的答案在某种程度上令人困惑。
这行不通，使用上面的代码会在一个大的圆形红色按钮中给我一个圆形的白色小方块。
如果你将 .buttonStyle(.plain) 移动到第一行（高于 .padding(.horizontal, 60) 那么它可以工作！！你能编辑你的答案，我会接受它。不幸的是它没有'不适用于我创建的 ButtonStyles，所以我现在必须删除我自己的样式。
对我来说它正在工作，但我可以将 buttonStyle 移动到第一行。应该没什么区别。
我只在预览版中尝试过，但很高兴它对你有用。

【解决方案2】：

这对我有用

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

如果它在列表中，也试试这个

.listRowPlatterColor(Color.clear)

【讨论】：

【解决方案3】：

我相信这是使用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)
        }
    }
}

很遗憾，这并不能完全解决问题。如您所见，我们从这里开始：

到这里：

这并不理想。

【讨论】：

这样更好，但并不完美，谢谢回复。

【解决方案4】：

根据this documentation，您应该将半径设置为 22 点（或 9 用于滚动视图）

【讨论】：