取消图像上的按钮（X）-右上对齐如何？

Question

将“关闭”按钮（X）移到右上角的有效方法是什么？

我正在为容器对齐而苦苦挣扎...不能说我喜欢它。

不用说...不是吗！

    var body: some View {
        ZStack {
            Image("Biz-card_2020")
                .resizable()
                .edgesIgnoringSafeArea(.all)
            
            HStack(alignment: .top) {
                VStack() {
                    Spacer(minLength: 5)    // vertical space
                    HStack() {
                        Spacer()
                        // close Welcome page (X) button
                        Button(action: {
                            //print(" - Button to dismiss page \(self.isPresented)")
                            self.isPresented = false  // dismiss the Welcome view
                            //print(" - after action Button to dismiss Welcome page \(self.isPresented)")
                        }, label: {
                            Image(systemName: "xmark.circle" )
                                .scaledFont(name: "Georgia", size: Const.titleText)
                                .minimumScaleFactor(0.3)
                                .accentColor(.white)
                                .padding(10)
                        })
                        
                    }
                     Spacer()
                }
                
            }
   }
}

Answer 1

您需要删除Spacer(minLength: 5)，并用padding的{​​{1}}替换为HStack。

Spacer(minLength: 5)并不意味着其长度恰好为5（仅最小长度为5）。

为了清楚起见，您可能还希望将关闭按钮提取到另一个功能。

尝试以下操作：

struct ContentView: View {
    ...

    var body: some View {
        ZStack {
            Image("Biz-card_2020")
                .resizable()
                .edgesIgnoringSafeArea(.all)
            closeButton
        }
    }

    var closeButton: some View {
        VStack {
            HStack {
                Spacer()
                Button(action: {
                    ...
                }) {
                    Image(systemName: "xmark.circle")
                        .padding(10)
                }
            }
            .padding(.top, 5)
            Spacer()
        }
    }
}