SwiftUI学习 页面跳转及TabView

SwiftUI学习 页面跳转及TabView

一、页面跳转实现

（一）页面跳转，隐藏导航栏

在登录、注册页面，选择兴趣页面之间跳转需要有隐藏导航栏，使用相关参数来实现。

在目标页面的 body 中使用 .navigationBarHidden(true)来实现隐藏导航栏。

示例如下：

struct testView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink("跳转到隐藏导航栏的页面", destination: HiddenView())
            }
            .navigationTitle("主页")
        }
    }
}

struct HiddenView: View {
    var body: some View {
        Text("这是隐藏导航栏的页面")
            .navigationBarHidden(true) // 隐藏导航栏
    }
}

（二）实现底部的状态栏

TabView是 SwiftUI 中内置的组件，用于创建底部导航栏。

可以设置底部的状态栏的图标和文字。

示例如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("主页", systemImage: "house.fill")
                }
            
            SettingsView()
                .tabItem {
                    Label("设置", systemImage: "gear")
                }
        }
    }
}

struct HomeView: View {
    var body: some View {
        Text("这是主页")
            .font(.largeTitle)
    }
}

struct SettingsView: View {
    var body: some View {
        Text("这是设置页面")
            .font(.largeTitle)
    }
}

这个示例代码中使用的图片是苹果自带的图案

（三）实现在TabView中跳转到其他页面

将TabView全部放在NavigationView中，在直接使用NavigationLink

代码示例:

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("主页", systemImage: "house.fill")
                }
            
            SettingsView()
                .tabItem {
                    Label("设置", systemImage: "gear")
                }
        }
    }
}

struct HomeView: View {
    var body: some View {
        NavigationLink(destination: DetailView()) {
            Text("这是主页，点击跳转")
            .font(.largeTitle)
        }
        
    }
}

struct SettingsView: View {
    var body: some View {
        NavigationLink(destination: DetailView()) {
            Text("这是设置页面，点击跳转")
            .font(.largeTitle)
        }
    }
}

struct TurnView: View {
    var body: some View {
        Text("这是跳转后的页面")
            .font(.largeTitle)
    }
}

二、按需处理图片及颜色

（一）处理图片

您可以将图片添加到 Xcode 项目的 Assets.xcassets文件夹中，然后通过 Image 控件来引用它。

需要确保图片名称唯一

（二） 处理颜色

1. 将颜色添加到 Xcode 项目的 Assets.xcassets文件夹中，然后通过 Color 来引用它。

2. 使用UIColor定义颜色

   代码示例如下：

   //使用预定义的颜色常量
   let redColor = UIColor.red
   let blueColor = UIColor.blue
   
   //使用RGB创建颜色
   //red、green、blue 的值范围是 0 到 1，而 alpha 表示透明度（0 为完全透明，1 为完全不透明）
   let aaaaColor = UIColor(red: 0.5, green: 0.8, blue: 0.2, alpha: 1.0)
   
   //使用 Hex 颜色代码
   let cccColor = UIColor(hex: "#3498db")
   

三、重复部分使用自定义视图来简化代码

重复使用的视图可以通过自定义视图组件来简化代码。这不仅可以减少冗余，还能提高代码的可维护性和可重用性。

示例代码如下：

import SwiftUI

// 自定义视图组件
struct CustomTextView: View {
    var text: String  // 传入要显示的文本
    
    var body: some View {
        Text(text)
            .font(.title)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            CustomTextView(text: "Hello, World!")  // 使用自定义视图
            CustomTextView(text: "Welcome to SwiftUI!")  // 使用自定义视图
            CustomTextView(text: "This is a simple example.")  // 使用自定义视图
        }
        .padding()
    }
}

四、遇到的问题

因全面屏安全区域显示导致页面下沉异常，没法调整到合适位置。