Xcode SwiftUI 按钮 - 无法居中

Posted 2023-02-24

【中文标题】Xcode SwiftUI 按钮 - 无法居中

【英文标题】：Xcode SwiftUI Button - Unable to Centre

【发布时间】：2019-11-14 08:31:07

【问题描述】：

我是 SwiftUI 的新手，在定位无法居中的自定义按钮方面我会提供一些帮助。 我已经使用 VStack 和 HStack 尝试让按钮底部居中，但按钮保持左对齐。 任何帮助将不胜感激。

struct ContentView: View 
    var body: some View 

        VStack 
            NavigationView 

                Section 
                VStack(alignment: .leading) 


                    Text("Meal Description").foregroundColor(.green)
                    Spacer()

                            NavigationLink(destination: PoundedYam()) 
                                Text("Pounded Yam & Egusi Soup")
                    

                            NavigationLink(destination: YamPepSoup()) 
                                Text("Yam and Pepper Soup")
                            


                        NavigationLink(destination: JollofRice()) 
                                Text("Jollof Rice & Plantain")
                        

                    Spacer()
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)



                    .padding()

                


                Section 

                    Image("africanfoods")
                        .resizable()
                        .frame(width: 275.0, height: 250.0)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.black, lineWidth: 5))
                        .scaledToFit()

                


                    VStack  //For Button
                        Spacer()

                            Button( action: ,
                            label:  Text("Create Order") )

                                        
                    .navigationBarTitle(Text("Menu"))


                 //NavView End


         //VStack End

    

【参考方案1】：

您可以将.frame(maxWidth: .infinity) 添加到Button。这也将增加可教性。

Button("Create Order")  
.frame(maxWidth: .infinity)

【参考方案2】：

可能不是最优雅的解决方案，但它有效：

HStack() 
     Spacer()
     Button( action: ,
       label:  Text("Create Order") )
     Spacer()

【参考方案3】：

第一个快速的想法：在 HStack 中的 Spacers 之间设置您的按钮：

// ...
VStack  //For Button
    Spacer()

    HStack 
        Spacer()
        Button( action: , label:  Text("Create Order") )
        Spacer()
            

.navigationBarTitle(Text("Menu"))
// ...

结果是：