图像上的“关闭”按钮 (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)其删除并替换为paddingfor 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()
        }
    }
}