SwiftUI - 缩放按钮和可点击区域

Question

我有几个可点击的按钮和两组。我希望“Main Hiragana”组缩放到适合前两列，而“Ten-Ten / Maru”组仅缩放到第三列。

我现在有以下情况：

我想得到这个情况：

我尝试使用几何体进行缩放 Reader 但效果不佳，尤其是对于可点击区域。

我现在有以下代码：

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()
    }
}

如何更改代码以将第一个按钮和可点击区域缩放到下面的前两列，而第二个按钮仅缩放到一列。

Answer 1

添加一个 GeometryReader 作为父级，然后在所述 Button 上设置宽度会给你这样的外观

但请注意，您还必须使用地理位置来设置下方按钮的宽度，以便在任何设备上正确缩放。

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()
    }
}