时间戳

首页 > 解决方案 > 图像上的关闭按钮 (X) - 右上角对齐如何？

swiftui - 图像上的关闭按钮 (X) - 右上角对齐如何？

问题描述

将“关闭”按钮 (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()
                }
                
            }
   }
}

标签： swiftui

解决方案

您需要将其删除Spacer(minLength: 5)并替换padding为 for 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()
        }
    }
}

推荐阅读