NavigationStack, Toolbar 的使用

news2025/1/5 8:40:38

1. NavigationStack 导航堆栈的使用,NavigationView 已过时

  1.1 实现

/// 导航堆栈 (懒加载)  iOS 16 版本 新特性
struct NavigationStackBootcamp: View {
    let fruits = ["Apple", "Orange", "Banana"]
    //["one","two","three"]
    @State private var stackPath:[String] = []
    
    var body: some View {
        // NavigationView: 会一次性加载 10 个View,不对 View 进行懒加载
        // NavigationStack: 会对View 进行懒加载,执行 View 时,才会初始化内容
        //navigationView
        //navigationStack
        navigationStack1
    }
    
    /// 3. NavigationStack 的 path 使用
    var navigationStack1: some View{
        NavigationStack(path: $stackPath) {
            ScrollView {
                VStack(spacing: 25){
                    Button("Super segue!") {
                        //stackPath.append("Coconut")
                        // 连续跳三个页,显示最后 Mango 页
                        stackPath.append(contentsOf: [
                        "Coconut", "Watermelon", "Mango"
                        ])
                    }
                    
                    ForEach(fruits, id: \.self) { fruit in
                        NavigationLink(value: fruit) {
                            Text(fruit)
                        }
                    }
                    
                    ForEach(0..<10) { index in
                        NavigationLink(value: index) {
                            Text("Click me: \(index)")
                        }
                    }
                }
            }
            .navigationTitle("Nav Bootcamp")
            .navigationDestination(for: Int.self) { value in
                MySecondScreen(value: value)
            }
            .navigationDestination(for: String.self) { value in
                Text("Another screen: \(value)")
            }
        }
    }
    
    /// 2. NavigationStack 的使用
    var navigationStack: some View{
        NavigationStack {
            ScrollView {
                VStack(spacing: 25){
                    ForEach(fruits, id: \.self) { fruit in
                        NavigationLink(value: fruit) {
                            Text(fruit)
                        }
                    }
                    
                    ForEach(0..<10) { index in
                        NavigationLink(value: index) {
                            Text("Click me: \(index)")
                        }
                    }
                }
            }
            .navigationTitle("Nav Bootcamp")
            .navigationDestination(for: Int.self) { value in
                MySecondScreen(value: value)
            }
            .navigationDestination(for: String.self) { value in
                Text("Another screen: \(value)")
            }
        }
    }
    
    /// 1. NavigationView 的使用
    var navigationView: some View{
        NavigationView {
            ScrollView {
                VStack(spacing: 20){
                    ForEach(0..<10) { index in
                        NavigationLink {
                            MySecondScreen(value: index)
                        } label: {
                            Text("Click me: \(index)")
                        }
                    }
                }
            }
            .navigationTitle("Nav Bootcamp")
        }
    }
}

/// 第二个页面
struct MySecondScreen: View{
    let value: Int
    
    init(value: Int) {
        self.value = value
        print("INIT SCREEN: \(value)")
    }
    var body: some View{
        Text("Screen \(value)")
    }
}

  1.2 效果图:

          

2. Toolbar 导航栏的使用

  2.1 实现

/// 导航栏 iOS 16
struct ToolbarBootcamp: View {
    @State private var text: String = ""
    @State private var paths:[String] = []
    
    var body: some View {
        // navigationStack
        navigationStack1
    }
    
    /// 第二种方式
    var navigationStack1: some View{
        NavigationStack(path: $paths) {
            ZStack{
                // 背景
                Color.indigo.ignoresSafeArea()
                ScrollView{
                    TextField("Placehoder", text: $text)
                        .frame(height: 40)
                        .background(Color.white.opacity(0.6))
                        .padding()
                    
                    ForEach(0..<50) { _ in
                        Rectangle()
                            .fill(Color.blue)
                            .frame(width: 200,height: 200)
                    }
                }
            }
            .navigationTitle("Toolbar")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Image(systemName: "heart.fill")
                }
                //.principal 导航栏上中间位置
                ToolbarItem(placement: .navigationBarTrailing) {
                    //HStack{
                    //  Image(systemName: "house.fill")
                    Image(systemName: "gear")
                    //}
                }
            }
            // 隐藏导航栏
            //.navigationBarHidden(true)
            // 隐藏导航栏
            //.toolbar(.hidden, for: .navigationBar)
            // 隐藏导航栏背景
            //.toolbarBackground(.hidden, for: .navigationBar)
            // 导航栏样式
            //.toolbarColorScheme(.dark, for: .navigationBar)
            .toolbarTitleMenu {
                /// 按钮点击事件
                Button("Screen 1") {
                    paths.append("Screen 1")
                }
                Button("Screen 2") {
                    paths.append("Screen 2")
                }
            }
            .navigationDestination(for: String.self) { value in
                Text("New screen: \(value)")
            }
        }
    }
    
    /// 第一种方式
    var navigationStack: some View{
        NavigationStack {
            ZStack{
                // 背景
                Color.indigo.ignoresSafeArea()
                
                Text("Hey 🤩")
                    .foregroundColor(.white)
            }
            .navigationTitle("Toolbar")
            .navigationBarItems(
                leading: Image(systemName: "heart.fill"),
                trailing: Image(systemName: "gear")
            )
        }
    }
}

  2.1 效果图:

    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/754255.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

信贷系统开发设计基础(二)

目录 架构演进篇 01 信贷架构演进概述 02 单体架构案例简介 03 单体系统群架构案例分析 04 微服务案例分析 架构演进篇 01 信贷架构演进概述 02 单体架构案例简介 03 单体系统群架构案例分析 04 微服务案例分析 总结&#xff1a; ---------------------------------------…

MySQL数据库管理——用户管理(二)

文章目录 一.表结构(增加字段)1.创建表结构2.复制数据表2.1 复制格式2.2 克隆表 3.清空表&#xff0c;删除表内的所有数据4.创建临时表 二.MySQL中6种常见的约束1.外键的定义2.创建外键约束作用3.创建主表blue4.创建从表Icecream5.为主表blue添加一个主键约束。主键名建议以&qu…

复习第四课 C语言-分支语句和循环

目录 【1】字符输入输出 【2】C语言下的垃圾字符回收 【3】分支语句 【4】循环 练习&#xff1a; 【1】字符输入输出 按字符的输入输出 int getchar(void); 功能&#xff1a;从终端输入一个字符 参数&#xff1a;无 返回值&#xff1a;输入字符的ASCII值int putchar(int…

中信银行西安分行举办金融助力外贸企业“走出去“高端论坛

7月14日&#xff0c;中信银行西安分行联合中国出口信用保险公司陕西分公司、西安市工商联举办"智汇西安、信融全球"——金融助力外贸企业"走出去"高端论坛。该论坛紧跟“加快建设贸易强国”的战略指引&#xff0c;以创新金融服务助力外贸企业融入高水平对外…

ConfigMap/Secret:配置、定制我的应用

首先你要知道&#xff0c;应用程序有很多类别的配置信息&#xff0c;但从数据安全的角度来看可以分成两类&#xff1a; 一类是明文配置&#xff0c;也就是不保密&#xff0c;可以任意查询修改&#xff0c;比如服务端口、运行参数、文件路径等等。另一类则是机密配置&#xff0…

VTK 种子小部件 SeedWidget

Part1 vtkSeedWidget介绍 vtkSeedWidget 用于在场景中放置多个种子点。种子点可用于诸如连通性&#xff0c; 区域生长分割算法之&#xff0c;分割等。 效果图&#xff1a; vtkSeedWidget默认交互操作&#xff1a; 1. 鼠标点击widget上空白位置放置种子点 2. 鼠标移入种子点&am…

【测试开发】测试用例的设计方法

目录 一. 测试用例的基本要素 二. 测试用例的设计方法 1. 测试用例设计的万能公式 水杯测试用例 2. 基于需求的设计方法 邮箱注册测试用例 3. 等价类方法 有效等价类和无效等价类 等价类思想设计测试用例步骤 4. 边界值方法 边界值思想设计测试用例步骤 5. 判定表方法…

51单片机的智能交通控制系统【含仿真+程序+演示视频带原理讲解】- 未完稿

51单片机的智能交通控制系统【含仿真程序演示视频带原理讲解】 1、系统概述2、核心功能3、仿真运行及功能演示4、程序代码 1、系统概述 该系统由AT89C51单片机、LED灯组、数码管组成。通过Protues对十字路口红绿灯控制逻辑进行了仿真。 每个路口包含了左转、右转、直行三条车道…

SpringCloud Alibaba——Nacos1.x作为注册中心的原理

目录 一、原理二、原理步骤图解 一、原理 使用Http发送注册查询服务提供方列表定时拉取 (每10秒)检测到服务提供者异常&#xff0c;基于UDP协议推送更新定时心跳 (5秒)&#xff0c;检测服务状态定时心跳任务检查集群数据同步任务使用Distro 二、原理步骤图解 Nacos1.x作为注…

python的浅拷贝和深拷贝

1、结论 python中的拷贝有以下三种 变量的赋值操作 只是形成两个变量,实际上还是指向同一个对象 浅拷贝 Python拷贝一般都是浅拷贝&#xff0c;拷贝时&#xff0c;对象包含的子对象内容不拷贝&#xff0c;因此&#xff0c;源对象与拷贝对象会引用同一个子对象 深拷贝 使用co…

【C++】开源:Web文件服务器

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍开源项目——Web文件服务器。 无专精则不能成&#xff0c;无涉猎则不能通。。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#x…

代码随想录day17

110. 平衡二叉树 首先是明白什么是平衡二叉树&#xff1a; 一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 然后&#xff0c;区别二叉树的高度和深度&#xff1a; 二叉树的高度&#xff1a;从叶子节点到根节点 二叉树的…

【C语言】多组输入

C系列文章目录 目录 C系列文章目录 一、什么是多组输入&#xff1f; 二、如何使用多组输入 2.1&#xff0c;试题举例讲解 2.2&#xff0c;错误解法 2.3&#xff0c;我们实现多组输入的思路 2.4&#xff0c;第一种正确的解法 2.5&#xff0c;第二种正确的解法 2.6&…

Exchange 服务器监控工具

Microsoft Exchange Server 是个消息与协作系统&#xff0c;提供了通常所需要的全部邮件服务功能&#xff0c;可以被用来构架应用于企业、学校的邮件系统或免费邮件系统。包括从电子邮件、会议安排、团体日程管理、任务管理、文档管理、实时会议和工作流等丰富的协作应用&#…

基于PyQt5的图形化界面开发——打砖块

目录 0. 前言1. 砖块类定义2. 挡板类定义3. 碰撞检测4. 小球和游戏初始化5. 完整代码6. 运行效果演示7. Pyinstaller 编译exe程序PyQt5 0. 前言 本文使用 PyQt5实现一个打砖块小游戏 操作系统&#xff1a;Windows10 专业版 开发环境&#xff1a;Pycahrm Comunity 2022.3 Pyt…

自学成为一名顶级黑客(网络安全)

一、自学网络安全学习的误区和陷阱 1.不要试图先成为一名程序员&#xff08;以编程为基础的学习&#xff09;再开始学习 行为&#xff1a;从编程开始掌握&#xff0c;前端后端、通信协议、什么都学。 缺点&#xff1a;花费时间太长、实际向安全过渡后可用到的关键知识并不多。…

加密与解密 解密篇 逆向分析技术 (一) 栈/调用约定

目录 逆向是什么 32位软件逆向技术 1.启动函数 2.函数 函数的识别 函数的参数 利用栈进行传递 下面是通过esp来寻址 通过寄存器来传递参数 例子 例子 函数的返回值 例子 例子 逆向是什么 将可执行程序反汇编 通过分析反汇编代码来理解其代码功能&#xff08;各个…

慢速减压控制技术在预防同步辐射光源和原位透射电镜氮化硅窗口膜真空中破裂的应用

摘要&#xff1a;氮化硅薄膜窗口广泛应用于同步辐射光源中的扫描透射软X射线显微镜和原位透射电镜&#xff0c;但氮化硅薄膜只有几百纳米的厚度&#xff0c;很容易因真空抽取初期的快速压差变化造成破裂。为此&#xff0c;本文提出了线性缓变压力控制解决方案&#xff0c;即控制…

【小数据处理】从日志中获取json数据的处理

写在头上 本次分析的数据来源是SpringBoot服务输出的logback日志。具体配置参考&#xff1a; 处理工具:Notepad v7.6。处理的日志内容不易过大&#xff0c;Notepad能打开电脑不卡最好&#xff08;100M以内吧&#xff09;。如果实在过大&#xff0c;先从日志源头进行截取&…

【javaEE面试题(五)在JMM(Java Memory Model (Java 内存模型))下谈volatile的作用】【保证内存可见 和 指令有序】

volatile的作用 JMM下volatile作用 volatile 能保证内存可见性 volatile 修饰的变量, 能够保证 “内存可见性”. 代码在写入 volatile 修饰的变量的时候 改变线程工作内存中volatile变量副本的值将改变后的副本的值从工作内存刷新到主内存 代码在读取 volatile 修饰的变量的时…