SwiftUi 左下角按钮不显示

Question

我有一些 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)
            }
        }
    }
}

有什么想法吗？

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

Answer 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`
        }
    }
}