SwiftUI實(shí)戰(zhàn)系列

• SwiftUI實(shí)戰(zhàn)-使用ViewModifier自定義微信TabBar底部導(dǎo)航和NavigationView
• SwiftUI實(shí)戰(zhàn)-NavigationLink圖片和文字顯示藍(lán)色或者圖片無(wú)顯示
• SwiftUI實(shí)戰(zhàn)-去除List分割線
• SwiftUI實(shí)戰(zhàn)-自定義彈窗
• SwiftUI實(shí)戰(zhàn)-自定義加載指示器HUD
• SwiftUI實(shí)戰(zhàn)-廣告頁(yè)、歡迎頁(yè)
• SwiftUI實(shí)戰(zhàn)-NavigationView + TabView基本框架搭建
• SwiftUI實(shí)戰(zhàn)-Pager分頁(yè)查看器
• SwiftUI實(shí)戰(zhàn)-隱私政策和用戶協(xié)議彈窗
• SwiftUI實(shí)戰(zhàn)-多圖、大圖圖片瀏覽
• SwiftUI實(shí)戰(zhàn)-下拉菜單
• SwiftUI實(shí)戰(zhàn)-系統(tǒng)NavigationView自定義titleView
• SwiftUI實(shí)戰(zhàn)-WKWebView的使用
• SwiftUI實(shí)戰(zhàn)-自定義轉(zhuǎn)圈指示器
• SwiftUI實(shí)戰(zhàn)-自定義TextField搭建登錄頁(yè)面UI
• SwiftUI實(shí)戰(zhàn)-自定義底部彈窗
• SwiftUI實(shí)戰(zhàn)-顯示星級(jí)評(píng)分
• SwiftUI實(shí)戰(zhàn)-類似新聞?lì)^條輪播滾動(dòng)
• SwiftUI實(shí)戰(zhàn)-仿用戶協(xié)議確認(rèn)頁(yè)面支持點(diǎn)擊文字顯示協(xié)議
• SwiftUI實(shí)戰(zhàn)-新特性、新版本介紹
• SwiftUI實(shí)戰(zhàn)-多圖選擇、圖片選擇器
• SwiftUI實(shí)戰(zhàn)-輪播圖
• SwiftUI實(shí)戰(zhàn)-網(wǎng)絡(luò)請(qǐng)求工具封裝
• SwiftUI實(shí)戰(zhàn)-多級(jí)聯(lián)動(dòng)地址選擇
• SwiftUI實(shí)戰(zhàn)-使用UIActivityIndicatorView
• SwiftUI實(shí)戰(zhàn)-Expanded可伸縮的分組列表List
• SwiftUI實(shí)戰(zhàn)-滾動(dòng)列表內(nèi)容返回頂部、底部、指定位置
• SwiftUI實(shí)戰(zhàn)-List列表內(nèi)容動(dòng)態(tài)改變更新
• SwiftUI-繪制氣泡圖
• SwiftUI-仿微信加號(hào)Popover氣泡彈窗
• SwiftUI實(shí)戰(zhàn)-單邊圓角單個(gè)圓角

本章內(nèi)容

使用ViewModifier自定義微信TabBar底部導(dǎo)航條，方便設(shè)置bage和紅點(diǎn)提示
自定義NavigationView，自帶的NavigationView不方便設(shè)置導(dǎo)航條顏色

效果如下：

效果圖

自定義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()) // 追加熱區(qū)設(shè)置
    }
}

AppBarView使用方法：

import SwiftUI

struct DiscoverView: View {
    var body: some View {
        VStack(alignment:.leading) {
            AppBarView {
                Text("發(fā)現(xiàn)")
                    .frame(maxWidth:.infinity)
            }
            Spacer()
            
        }.edgesIgnoringSafeArea(.top)
    }
}

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