显示自定义颜色的弧形按钮答案

【问题标题】：Display curved button with custom color显示自定义颜色的弧形按钮
【发布时间】：2023-01-25 02:04:26
【问题描述】：

我正在尝试使用具有圆角和自定义颜色的按钮实现滚动视图。

Button(shoppingListItem.text) {
  removeFromShoppingList(itemId: shoppingListItem.item_id)
}
.overlay(
  RoundedRectangle(cornerRadius: 20)
    .stroke(Color.secondary, lineWidth: 2)
    .background(
      RoundedRectangle(cornerRadius: 20, style: .continuous)
        .fill(Color("ShoppingListItemColor"))
    )
  )
)

这会产生一个带有圆角的按钮和所需的颜色，但看不到任何文本。我在这里错过了什么？

【问题讨论】：

您已经添加了圆角矩形的叠加层。这被添加到它覆盖的内容之上。所以你的圆角矩形覆盖了文本。您可能需要 .background 而不是 .overlay。
格式化真的很重要。它使我们能够轻松阅读和理解我们对代码所做的事情。我会格式化你的代码，你会看到......

标签： swiftui swiftui-button

【解决方案1】：

你可能会更好地以这种方式编写你的代码......

Button(shoppingListItem.text) {
  removeFromShoppingList(itemId: shoppingListItem.item_id)
}
.overlay(
  RoundedRectangle(cornerRadius: 20)
    .stroke(Color.secondary, lineWidth: 2)
)
.background(Color("ShoppingListItemColor"))
.clipShape(RoundedRectangle(cornerRadius: 20))

在这里，我已将背景移出叠加层。

所以现在这是从带有文本的按钮构建的。
该按钮仅覆盖了圆角矩形的边框。
然后按钮有背景颜色。
然后按钮被圆角矩形剪裁。

在您的代码中（可能是因为缺少格式），您无意中将背景添加到了叠加层。所以你用背景颜色覆盖了整个按钮并覆盖了文本。

【讨论】：