手表上 SwiftUI 按钮的奇怪内部视图
Strange inner view in SwiftUI buttons on Watch
我刚刚开始使用 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 所指出的,您需要从普通的按钮样式开始。问题在于它会阻止您使用自己的按钮样式。
我认为这是使用 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)
}
}
}
不幸的是,这并不能完全解决问题。
如您所见,我们从这里开始:
对此:
这并不理想。
您只是在“默认”按钮后面定义了一个背景,这就是它看起来如此连线的原因。
将按钮样式更改为“普通”并将圆角半径应用于背景会有所帮助。当然你必须调整背景尺寸,使用padding to frame ...
Button( "Login")
{
}
.buttonStyle(PlainButtonStyle())
.padding(.horizontal, 60)
.padding(.vertical, 10)
.background(
Color.red
.cornerRadius( 5.0))
更新:正如 d4Rk 中提到的,我们必须使用 PlainButtonStyle()
根据 this documentation,您应该将半径设置为 22 点(或滚动视图为 9)
这对我有用
HStack {
Button("Login")
{
}
.buttonStyle(BorderedButtonStyle(tint: .clear))
.foregroundColor(.white)
}
.background(Color.red)
.cornerRadius(5)
如果它在列表中,也试试这个
.listRowPlatterColor(Color.clear)
我刚刚开始使用 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 所指出的,您需要从普通的按钮样式开始。问题在于它会阻止您使用自己的按钮样式。
我认为这是使用 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)
}
}
}
不幸的是,这并不能完全解决问题。 如您所见,我们从这里开始:
对此:
这并不理想。
您只是在“默认”按钮后面定义了一个背景,这就是它看起来如此连线的原因。
将按钮样式更改为“普通”并将圆角半径应用于背景会有所帮助。当然你必须调整背景尺寸,使用padding to frame ...
Button( "Login")
{
}
.buttonStyle(PlainButtonStyle())
.padding(.horizontal, 60)
.padding(.vertical, 10)
.background(
Color.red
.cornerRadius( 5.0))
更新:正如 d4Rk 中提到的,我们必须使用 PlainButtonStyle()
根据 this documentation,您应该将半径设置为 22 点(或滚动视图为 9)
这对我有用
HStack {
Button("Login")
{
}
.buttonStyle(BorderedButtonStyle(tint: .clear))
.foregroundColor(.white)
}
.background(Color.red)
.cornerRadius(5)
如果它在列表中,也试试这个
.listRowPlatterColor(Color.clear)