TabView/选项卡视图, DarkMode/高亮与黑暗模式 的使用

1. TabView 选项卡视图的使用

  1.1 实现

/// 选项卡视图
struct TabViewBootcamp: View {
    @State var selectedTab: Int = 0
    
    let icons: [String] = [
        "heart.fill", "globe", "house.fill", "person.fill"
    ]
    
    var body: some View {
        // tabView1
        // tabView2
        tabView3
    }
    
    /// 方式三: 滚动的 View
    var tabView3: some View{
        TabView{
            ForEach(icons, id: \.self) { icon in
                Image(systemName: icon)
                    .resizable()
                    .scaledToFit()
                    .padding(30)
            }
        }
        .background(RadialGradient(gradient: Gradient(colors: [.red, .blue]), center: .center, startRadius: 5, endRadius: 300))
        .frame(height: 300)
        .tabViewStyle(.page)
    }
    
    /// 方式二: 像轮播图的方式
    var tabView2: some View{
        TabView{
            RoundedRectangle(cornerRadius: 25)
                .foregroundColor(.red)
            RoundedRectangle(cornerRadius: 25)
            RoundedRectangle(cornerRadius: 25)
                .foregroundColor(.green)
        }
        .frame(height: 300)
        .tabViewStyle(.page)
    }
    
    /// 方式一:  基本用法
    var tabView1: some View{
        TabView(selection: $selectedTab){
            HomeView(selectedTab: $selectedTab)
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
                .tag(0)
            
            Text("BROWSE TAB")
                .tabItem {
                    Image(systemName: "globe")
                    Text("Browse")
                }
                .tag(1)
            
            Text("PROFILE TAB")
                .tabItem {
                    Image(systemName: "person.fill")
                    Text("Profile")
                }
                .tag(2)
        }
        .accentColor(.orange)
    }
}

struct HomeView: View {
    @Binding var selectedTab: Int
    @State var text: String = "Home Tab"
    var body: some View {
        ZStack{
            Color.orange.ignoresSafeArea(edges: .top)
            VStack {
                Text(text)
                    .font(.largeTitle)
                    .foregroundColor(.white)
                Button {
                    selectedTab = 2
                } label: {
                    Text("Go to profile")
                        .font(.headline)
                        .padding()
                        .padding(.horizontal)
                        .background(Color.white)
                        .cornerRadius(10)
                }
            }
        }
    }
}

  1.2 效果图方式一:

  1.2 效果图方式二、三:

    

2. DarkMode 黑暗的模式与高亮模式

  2.1 实现

/// 黑暗模式
struct DarkModeBootcamp: View {
    //环境变量: 配色方案
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        NavigationView{
            ScrollView{
                VStack(spacing: 20) {
                    Text("This text is primary")
                        .foregroundColor(.primary)
                    Text("This text is secondary")
                        .foregroundColor(.secondary)
                    Text("This color is black")
                        .foregroundColor(.black)
                    Text("This color is white")
                        .foregroundColor(.white)
                    Text("This color is red")
                        .foregroundColor(.red)
                    Text("This color is globally adaptive!")
                        .foregroundColor(Color("AdaptiveColor"))
                    Text("This color is locally adaptive!")
                        .foregroundColor(colorScheme == .light ? .green : .yellow)
                }
            }
            .navigationTitle("Dark Mode")
        }
    }
}

struct DarkModeBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        Group{
            DarkModeBootcamp()
                //.preferredColorScheme(.light)
           // DarkModeBootcamp()
           //     .preferredColorScheme(.dark)
        }
    }
}

  2.2 效果图: