首页 > 解决方案 > SwiftUI - 缩放按钮和可点击区域

问题描述

我有几个可点击的按钮和两组。我希望“主要平假名”组被缩放以适合前两列,而“十-十/丸”组仅缩放到第三列。

我现在有以下情况:

我现在拥有的

我想得到这种情况: 我想要的是

我尝试使用 Geometry 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()
    }
}

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

标签: user-interfacebuttonswiftuiscalescaling

解决方案


添加一个 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()
    }
}

推荐阅读