Menu
I would like to create a button with a rounded rectangle view with a border, and a background color.
I wrote this so far :
Button(action: {
}, label: {
Text("TAP ME")
.foregroundColor(Color.blue)
})
.frame(height: 50)
.frame(maxWidth: .infinity)
.overlay(
RoundedRectangle(cornerRadius: 50, style: .continuous)
.strokeBorder(Color.blue, lineWidth: 1)
)
I tried to add .background(Color.red) at many different places, but here is what I get everytime:
What to do here?
Thank you for your help
236
RoundedRectangle in SwiftUI | SwiftOnTap A RoundedRectangle is a rectangular Shape with rounded corners that by default, aligns itself inside of the view containing it. It must be created with a specific corner radius or size.
With SwiftUI, you can easily draw a border around a button or text (and it actually works for all views) using the border modifier. Say, for example, you want to create a button like this:
With SwiftUI, you can create a rectangle by just calling its method. You should be seeing the pattern here where SwiftUI does all the minor work for you. In this tutorial, you’ll learn what it takes to build a rectangle from scratch in SwiftUI. To follow along with this tutorial, you’ll need some basic knowledge. A basic familiarity with Swift.
To create a border with rounded corners, you can draw a rounded rectangle and overlay on the button like this: In the code, we use a RoundedRectangle and its stroke modifier to create the rounded border. You can modify the color and line width to adjust its appearance.
As far as I understood your needs, here is a solution
Button(action: {
}, label: {
Text("TAP ME")
.foregroundColor(Color.blue)
})
.frame(height: 50)
.frame(maxWidth: .infinity)
.background(
RoundedRectangle(cornerRadius: 50, style: .continuous).fill(Color.red)
)
.overlay(
RoundedRectangle(cornerRadius: 50, style: .continuous)
.strokeBorder(Color.blue, lineWidth: 1)
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
