SwiftUi 左下角按钮不显示

Posted 2023-02-24

【中文标题】SwiftUi 左下角按钮不显示

【英文标题】：SwiftUi bottom left button dont show

【发布时间】：2019-12-29 10:38:50

【问题描述】：

我有一些 SwiftUI 功能。我想在左下角显示我的按钮，但它显示在左上角。

struct NewRecordButton: View 

    var body: some View 

        ZStack (alignment: .bottomTrailing) 
            HStack (alignment: .bottom) 
                Spacer()
                Button(action:   ,
                       label: 
                           Text("⌂")
                               .font(.system(.largeTitle))
                               .frame(width: 35, height: 30)
                               .foregroundColor(Color.white)
                               .padding(.bottom,4)
                )  .background(Color.black)
                    .cornerRadius(10)
                    .shadow(color: Color.black.opacity(0.3),
                            radius: 3,
                            x: 3,
                            y: 3)
            
        
    

有什么想法吗？

【参考方案1】：

这是可能的变体

ZStack (alignment: .bottomTrailing) 
    Rectangle().fill(Color.clear)
    HStack (alignment: .bottom)
        Button(action:  

        , label: 
            Text("⌂")
                .font(.system(.largeTitle))
                .frame(width: 35, height: 30)
                .foregroundColor(Color.white)
                .padding(.bottom,4)


        )
            .background(Color.black)
            .cornerRadius(10)
            .shadow(color: Color.black.opacity(0.3),
                    radius: 3,
                    x: 3,
                    y: 3)

        Spacer()
    

【参考方案2】：

虽然有可能，但是你应该尝试不使用虚拟视图来排列其他视图！

对于下推视图，您应该同时使用 VStack 和 Spacer

VStack  
    Spacer()
    // bottomView

所以应该是这样的：

ZStack 
    VStack 
        Spacer() // This will push it down, since it is in a `VStack`
        HStack 

            Button("⌂") 
                .font(.largeTitle)
                .frame(width: 35, height: 30)
                .foregroundColor(.white)
                .padding(.bottom, 4)

                .background(Color.black)
                .cornerRadius(10)
                .shadow(color: Color.black.opacity(0.3), radius: 3, x: 3, y: 3)

            Spacer() // This will push it left, since it is in a `HStack`
        
    

【讨论】：

我添加了您的代码，但在底部显示大约 30 像素高度和全宽的白色背景，我想删除它

那是安全区域。如果您在VStack 或ZStack 上应用它，.edgesIgnoringSafeArea(.all) 将删除它

我想你错过了一些东西。 （可能是最后一个 Spacer）