SwiftUI实战-使用ViewModifier自定义微信TabBar底部导航和NavigationView

SwiftUI实战系列

• SwiftUI实战-使用ViewModifier自定义微信TabBar底部导航和NavigationView
• SwiftUI实战-NavigationLink图片和文字显示蓝色或者图片无显示
• SwiftUI实战-去除List分割线
• SwiftUI实战-自定义弹窗
• SwiftUI实战-自定义加载指示器HUD
• SwiftUI实战-广告页、欢迎页
• SwiftUI实战-NavigationView + TabView基本框架搭建
• SwiftUI实战-Pager分页查看器
• SwiftUI实战-隐私政策和用户协议弹窗
• SwiftUI实战-多图、大图图片浏览
• SwiftUI实战-下拉菜单
• SwiftUI实战-系统NavigationView自定义titleView
• SwiftUI实战-WKWebView的使用
• SwiftUI实战-自定义转圈指示器
• SwiftUI实战-自定义TextField搭建登录页面UI
• SwiftUI实战-自定义底部弹窗
• SwiftUI实战-显示星级评分
• SwiftUI实战-类似新闻头条轮播滚动
• SwiftUI实战-仿用户协议确认页面支持点击文字显示协议
• SwiftUI实战-新特性、新版本介绍
• SwiftUI实战-多图选择、图片选择器
• SwiftUI实战-轮播图
• SwiftUI实战-网络请求工具封装
• SwiftUI实战-多级联动地址选择
• SwiftUI实战-使用UIActivityIndicatorView
• SwiftUI实战-Expanded可伸缩的分组列表List
• SwiftUI实战-滚动列表内容返回顶部、底部、指定位置
• SwiftUI实战-List列表内容动态改变更新
• SwiftUI-绘制气泡图
• SwiftUI-仿微信加号Popover气泡弹窗
• SwiftUI实战-单边圆角单个圆角

本章内容

使用ViewModifier自定义微信TabBar底部导航条，方便设置bage和红点提示
自定义NavigationView，自带的NavigationView不方便设置导航条颜色

效果如下：

效果图

自定义NavigationView AppBarView.swift

import SwiftUI

struct AppBarView<Content: View>: View {
    let safeAreaInset = UIApplication.shared.windows.first?.safeAreaInsets
    
    let padding: CGFloat = 8.0
    
    private let content:Content
    
    init(@ViewBuilder content:() -> Content) {
        self.content = content()
        
    }
    var body: some View {
        HStack(){
            content
        }
        .foregroundColor(.white)
        .padding(.top,safeAreaInset?.top ?? 0 + padding)
        .padding(.bottom, padding)
        .padding(.horizontal, 5.0)
        .background(LinearGradient(gradient: Gradient(colors: [Color(red: 20/255.0, green: 158/255.0, blue: 231/255.0),Color(red: 45/255.0, green: 205/255.0, blue: 245/255.0)]), startPoint: /*@START_MENU_TOKEN@*/.leading/*@END_MENU_TOKEN@*/, endPoint: /*@START_MENU_TOKEN@*/.trailing/*@END_MENU_TOKEN@*/))
        .contentShape(Rectangle()) // 追加热区设置
    }
}

AppBarView使用方法：

import SwiftUI

struct DiscoverView: View {
    var body: some View {
        VStack(alignment:.leading) {
            AppBarView {
                Text("发现")
                    .frame(maxWidth:.infinity)
            }
            Spacer()
            
        }.edgesIgnoringSafeArea(.top)
    }
}

struct DiscoverView_Previews: PreviewProvider {
    static var previews: some View {
        DiscoverView()
    }
}