user-interfacebuttonswiftuiscalescaling
SwiftUI - Scale Buttons and tappable area
I have several tappable buttons and two groups. I want that the "Main Hiragana" group is scaled to fit the first two columns and the "Ten-Ten / Maru" group is only scaled to the third column.
I have now the following situation:
I want to get this situation:
I tried scaling with Geometry Reader but it didn't quite work, especially with the tappable area.
I have now the following code:
import SwiftUI
struct testfile: View {
var body: some View {
VStack {
HStack {
//Button one
Button(action: {
print("Test")
}){
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Main")
Text("Hiragana")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
//Button two
Button(action: {
print("Test2")
})
{
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Ten-Ten")
Text("Maru")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
}.padding()
}
}
How can I change the code to scale the first button and the tappable area to the first two columns below and the second button to only one column.
Solution
Adding a GeometryReader as the parent and then setting the width on the said Button will give you this look
But be cautious, you'll have to also use the geo to set the width of the buttons below to properly scale on any device.
import SwiftUI
struct testfile: View {
var body: some View {
GeometryReader { geo in
VStack {
HStack {
//Button one
Group {
Button(action: {
print("Test")
}){
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Main")
Text("Hiragana")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
}
.frame(width: geo.size.width * 0.625)
//Button two
Group {
Button(action: {
print("Test2")
})
{
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("Ten-Ten")
Text("Maru")
}
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.foregroundColor(Color("BackgroundInverse"))
.scaleEffect(x: 0.8, y: 0.8)
}
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
HStack {
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
ZStack {
Capsule(style: .continuous)
.fill(Color.white)
.overlay(Capsule(style: .continuous)
.stroke(Color.black, style: StrokeStyle(lineWidth: 2))
)
VStack{
Text("KA")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.05)
.scaleEffect(x: 0.8, y: 0.8)
.foregroundColor(Color.black)
Text("KA-Group")
.font(.system(size: 500))
.multilineTextAlignment(.center)
.minimumScaleFactor(0.005)
.scaleEffect(x: 0.6, y: 0.6)
.foregroundColor(Color.black)
}
}
}
}.padding()
}
}
}
struct test_previews: PreviewProvider {
static var previews: some View {
testfile()
}
}
- Reset/remove a border in Swing
- How to insert images to TImagelist in FireMonkey programmaticaly?
- Implementing scrollable view flipper for Android widget
- BAD IMAGE QUALITY (Bitmap Windows Forms C#)
- How to add placeholder text to TextEditor in SwiftUI?
- Python: parallel processing and tkinter
- Custom view doesn't making wider
- Getting Matlab handles events or properties
- How to dynamically add buttons to TCategoryPanelGroup?
- How to prevent text overflow and enable paragraph-like wrapping in a Flutter Row widget?
- Duplicating window when pressing button
- difference between accordion and tabs
- Too much linear gradient text style being applied, despite it being same as Figma design style
- Generating a list of radio buttons in GTK3 (C)
- Why replicating box shadow properties from Figma don't match the designs?
- Advice for C++ GUI programming
- C# Console app - How do I make an interactive menu?
- How to call QMessageBox Static API outside of a QWidget Sub-Class
- close sub-window without closing main window PyGTK in python
- JOptionPane to get password
- QWidget setGeometry show without use of a QLayout
- combobox throwing error even though the mainwindow exists
- Does it make sense to create canvas-based UI components?
- Style JavaFX components WITHOUT CSS
- How to get receiver's state in slot in AUI Framework?
- How do I remove unnecessary space in a Row in Android?
- Ways to improve WPF UI rendering speed
- Google Apps Script UI: Scroll to top of screen
- X11: input focus for popups
- Optimizing Button Size in Column space - Android Jetpack Compose