大佬教程收集整理的这篇文章主要介绍了自定义 NavigationView 顶栏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想创建一个类似于上图的设计。为了创建底部 TabVIEw，我使用了以下代码：
import SwiftUI
struct ParentTabVIEw: VIEw {
var body: some VIEw {
TabVIEw {
HomeVIEw()
.tabItem {
Image(systemname: "star.fill")
Text("Home")
}
Text("Second Tab")
.tabItem {
Image(systemname: "star.fill")
Text("discover")
}
Text("Third Tab")
.tabItem {
Image(systemname: "star.fill")
Text("SetTings")
}
}
}
}
和 HomeVIEw
struct HomeVIEw: VIEw {
var body: some VIEw {
NavigationVIEw {
Text("Home")
.navigationbarItems(
Trailing:
button(action: {
}) {
Image(systemname: "plus")
}
)
.navigationtitle("Home")
}
}
}
我遇到的问题是顶部导航栏，因为我无法编辑 NavigationVIEw 以接收标题下方的其他视图。我可以设置标题并添加“加号”按钮，但不能编辑整个顶部栏。
NavigationVIEw 可以以这种方式自定义吗？如果不是，我如何在保持 NavigationVIEws 提供的优势（例如 Navigationlinks 等）的同时实现该结果。
Apple 提供的 NavigationBar 不是很可定制。您可能希望为此用例创建自定义导航栏。
幸运的是，我有一些时间，所以我创建了一个简单的可重复使用的导航栏，看起来像你想要的结果，请看下面。
您必须隐藏 Apple 的导航栏，并将自定义导航栏作为覆盖添加到您的导航视图中（如下图所示）：
enum CustomNavigationBarItem: String,CaseIterable {
case dashboard = "Dashboard"
case feed = "Feed"
case followers = "Followers"
}
struct CustomNavigationBar: View {
var title: String
var items: [CustomNavigationBarItem]
@Binding var SELEctedItem: CustomNavigationBarItem
var buttonAction: () -> ()
var body: some View {
VStack {
VStack(spacing: 10) {
CustomNavigationBarHeader(title: title,buttonAction: buttonAction)
HStack(spacing: 0) {
ForEach(items,id: \.self) { item in
CustomNavigationBarItemView(text: item.rawValue,isSELEcted: SELEctedItem == item)
.onTapGesture {
SELEctedItem = item
}
}
}
}
.BACkground(Color(#colorLiteral(red: 0.1036974415,green: 0.1036974415,blue: 0.1036974415,alpha: 1)).edgesIgnoringSafeArea(.all))
Spacer()
}
}
}
struct CustomNavigationBarItemView: View {
var text: String
var isSELEcted: Bool
var body: some View {
Text(text)
.foregroundColor(isSELEcted ? .blue : Color(#colorLiteral(red: 0.501960814,green: 0.501960814,blue: 0.501960814,alpha: 1)))
.frame(maxWidth: .infinity)
.padding(.vertical,10)
.padding(.horizontal,6)
.overlay(
VStack {
Spacer()
Color.blue
.frame(height: 2)
.opacity(isSELEcted ? 1 : 0)
.animation(.default)
}
)
}
}
struct CustomNavigationBarHeader: View {
var title: String
var buttonAction: () -> ()
var body: some View {
HStack {
Text(titlE)
.font(.titlE)
.bold()
Spacer()
Button(action: buttonAction,label: {
Image(systemname: "plus")
})
.font(.headlinE)
}
.padding(.horizontal)
}
}
主页查看代码：
struct HomeView: View {
@State private var SELEctedNavigationBarItem: CustomNavigationBarItem = .dashboard
@State private var numPlusButtonClicked: Int = 0
var body: some View {
NavigationView {
VStack {
Text("Home")
switch SELEctedNavigationBarItem {
case .dashboard:
Text("Currently Showing: Dashboard") //Use your view here
case .feed:
Text("Currently Showing: Feed") //Use your view here
case .followers:
Text("Currently Showing: Followers") //Use your views here
}
Text("Plus Button Clicked \(numPlusButtonClicked) times.")
}
}
.navigationBarHidden(true)
.overlay(
CustomNavigationBar(title: "Home",items: [.dashboard,.feed,.followers],SELEctedItem: $SELEctedNavigationBarItem) {
numPlusButtonClicked += 1 // Code executed when the "+" button gets called
}
)
}
}
注意事项：
祝你好运！
编辑：为 HomeView 添加代码
以上是大佬教程为你收集整理的自定义 NavigationView 顶栏全部内容，希望文章能够帮你解决自定义 NavigationView 顶栏所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。