Question

我试图在导航栏的尾部创建一个自定义菜单（基于editMode动态）。在“查看”模式下我需要3个按钮，在“编辑”模式下我只需要一个按钮。

问题是我无法按如下所示将按钮右对齐：

如您所见，“完成”按钮位于左侧。

我尝试添加Spacers（）但没有运气。

.navigationBarItems(
        leading: BackButton(label: "") {
            self.presentation.wrappedValue.dismiss()
        },
        trailing:
            HStack {
                if self.mode?.wrappedValue == .inactive {
                    HStack(alignment: .center, spacing: 20) {
                        Button(action: {
                            ////////
                        }) {
                            Image(systemName: "trash")
                            .imageScale(.large)
                        }
                           ////////
                        Button(action: {

                        }) {
                            Image(systemName: "square.and.arrow.up")
                            .imageScale(.large)

                        }

                        CustomEditButton() {
                            ////////
                        }
                    }
                } else {
                    HStack {
                        CustomEditButton() {
                            /////
                        }
                    }
                }
            }

    )

Answer 1

相同的问题。条件语句内部或外部的Spacer（）不起作用。我注意到当从NavigationLink屏幕弹出视图时，对齐方式是固定/正确的。无论如何，我都会根据导致更改的条件使用不透明性来使它最终起作用。对于您而言，解决方法可能如下所示：

.navigationBarItems(
        leading: BackButton(label: "") {
            self.presentation.wrappedValue.dismiss()
        },
        trailing:
            ZStack {
                HStack(alignment: .center, spacing: 20) {
                    Button(action: {
                        ////////
                    }) {
                        Image(systemName: "trash")
                        .imageScale(.large)
                    }
                    Button(action: {
                       ////////
                    }) {
                        Image(systemName: "square.and.arrow.up")
                            .imageScale(.large)
                    }
                    CustomEditButton() {
                        ////////
                    }
                }
                .opacity((self.mode?.wrappedValue == .inactive) ? 1.0 : 0.0)

                HStack {
                    CustomEditButton() {
                        /////
                    }
                }
                .opacity((self.mode?.wrappedValue == .inactive) ? 0.0 : 1.0)
            }
    )

如何在navigationBarItems中对齐动态按钮

1 个答案: