ios 导航顶部栏项目放置得很高

hkmswyz6 于 2023-10-21 发布在 iOS

关注(0)|答案(1)|浏览(122)

我有这个SwiftUI视图，是通过NavigationLink打开的

struct UserSettingsView: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack {
            
            Color("navbar_2280DA").ignoresSafeArea(.all)
            
            Image("profile_background")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea(.all)
        }
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                VStack {
                    Spacer()
                    
                    HStack {
                        Button {
                            presentationMode.wrappedValue.dismiss()
                        } label: {
                            Image("btn_arrow_back")
                        }
                        
                        Spacer()
                    }
                }
            }
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("Settings")
                    .font(.custom("Poppins-Medium", size: 22))
                    .kerning(1.76)
            }
        }
        .toolbarBackground(Color("navbar_2280DA"), for: .navigationBar)
        .toolbarBackground(.visible, for: .navigationBar)
    }
}

视图看起来还可以，除了一件事，工具栏项目在导航栏上显示得很高

正如你所看到的，我试图使用VStack将返回按钮向下拉，在屏幕截图上你几乎看不到结果-返回按钮比导航标题低一点点。我希望有更多的控制它，像应用一个填充与contstraint的底部酒吧。
我不想创建自定义导航栏-这是繁琐和不愉快的经验，我想使用默认的用户界面，iOS提供的导航栏。
请告诉我如何在SwiftUI中将工具栏项移动到导航栏的底部。谢谢你，谢谢！

ios

来源：https://stackoverflow.com/questions/77271473/navigation-top-bar-items-are-placed-very-high

1条答案

按热度按时间

t9aqgxwy1#

我尝试了你的代码使用SF符号“chevron.left”，并能够重现问题。但是，一旦我删除了后退按钮周围的VStack，HStack和Spacer，箭头就很好地与标题对齐了。我还尝试了不同的字体大小，它保持中心对齐。
所以，也许问题是，你的图像包括一些空白的空间，无论是在顶部或下方，这意味着它不是垂直居中？或者对Image应用一些修饰符也会有所帮助，如下面的代码所示。

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Button {
            presentationMode.wrappedValue.dismiss()
        } label: {
            Image(systemName: "chevron.left") //  "btn_arrow_back"
                .resizable()
                .scaledToFit()
                .padding(10)
                .frame(width: 44, height: 44)
                .foregroundColor(.white)
        }
    }
}
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Settings")
            .font(.custom("Poppins-Medium", size: 22))
            .kerning(1.76)
    }
}

编辑 * 跟进您的评论：要向下移动项目，只需添加顶部填充：

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Button {
            presentationMode.wrappedValue.dismiss()
        } label: {
            Image(systemName: "chevron.left") //  "btn_arrow_back"
                .resizable()
                .scaledToFit()
                .padding(10)
                .frame(width: 44, height: 44)
                .foregroundColor(.white)
                .padding(.top, 100) // <- HERE
        }
    }
}
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Settings")
            .font(.custom("Poppins-Medium", size: 22))
            .kerning(1.76)
            .padding(.top, 100) // <- HERE
    }
}

赞(0）回复(0）举报 2023-10-21

我来回答

ios 导航顶部栏项目放置得很高

1条答案

相关问题

热门标签

最新问答