Swift 快捷界面左下角按钮不显示

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

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

---

有什么想法吗？

这里是可能的变体

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

---

这里是可能的变体

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

---

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

要向下推视图，应同时使用

VStack

和

间隔垫圈

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

---

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

要向下推视图，应同时使用

VStack

和

间隔垫圈

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像素，我想删除它，这是安全区域

.edgesIgnoringSafeArea（.all）

如果您在

VStack

或

ZStack

上应用它，它将被删除。我想您遗漏了什么。（可能是最后一个间隔符）我添加了您的代码，但底部显示白色背景，高度和全宽约为30px，我想删除它，这是安全区域

.edgesIgnoringSafeArea（.all）

如果您在

VStack

或

ZStack

上应用它，它将被删除。我想您遗漏了什么。（可能是最后一个垫片）