Question

我只是从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指出的那样，您需要以普通的按钮样式开始。问题在于它会阻止您使用自己的按钮样式。

Answer 1

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

不幸的是，这不能完全解决问题。如您所见，我们从这里开始：

对此：

这不理想。

Answer 2

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

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

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

Answer 3

这对我有用

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

如果它在列表中，也尝试一下

.listRowPlatterColor(Color.clear)

Answer 4

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

手表上的SwiftUI按钮中的奇怪内部视图

4 个答案: