harmonyOS ArkTS最新跳转Navigation

news2024/11/18 15:42:52

文章目录

      • 取消标题栏
      • 初始页面(load)
        • 设置为竖屏
      • 自定义标题
      • Tabs&TabContent
        • Tabs
        • 通过divider实现了分割线各种属性
      • 图片下载

官方文档 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State djs:number = 5
  build() {
    Column(){
      Navigation(){

      }.title("go to")
      Row(){
        Text(this.message).fontSize(20)
      }.width('100%').height('5%').backgroundColor(Color.Red)
      Row(){
        Text(this.message).fontSize(20)
      }.width('100%').backgroundColor(Color.Blue)
      Row(){
        Text(this.message).fontSize(20)
      }.width('100%').backgroundColor(Color.Blue)

      Stack({
        alignContent:Alignment.Bottom
      }){
        Text(this.message).fontSize(20)
      }
    }.height("100%").width('100%')
  }
}

注意:这样写其中Row的一些内容是不会呈现的，可以不用。要写也是写在NavigationNavigation里面

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State djs:number = 5
  build() {
    Column(){
      Navigation(){

      }.title("go to")
    }.height("100%").width('100%')
  }
}

但是你会发现还是有标题栏
在这里插入图片描述

取消标题栏

  1. 打开你的HarmonyOS项目的配置文件config.json。
  2. 定位到你想要修改的页面配置部分。
  3. 在metaData对象中添加customizeData数组，其中包含一个对象，该对象的name属性设置为hwc-theme，value属性设置为androidhwext:style/Theme.Emui.Light.NoTitleBar。
    示例配置如下：
{
  "abilities": [
    {
      "orientation": "unspecified",
      "visible": true,
      "name": "com.example.test.MainAbility",
      "icon": "$media:icon",
      "description": "$string:mainability_description",
      "label": "$string:entry_MainAbility",
      "type": "page",
      "launchType": "standard",
      "metaData": {
        "customizeData": [
          {
            "name": "hwc-theme",
            "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
            "extra": ""
          }
        ]
      }
    }
  ]
}

通过上述设置，你可以隐藏默认的标题栏。如果你需要全屏显示，还可以添加其他属性来实现。
在这里插入图片描述

初始页面(load)

也就是这个页面不会停留很久

import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State countdown: number = 5; // 倒计时时间，单位秒
  @State isCounting: boolean = false; // 倒计时是否正在进行

  startCountDown(){
    this.isCounting = true;
    let seconds = this.countdown
    const  inter = setInterval(()=>{
      seconds--
      this.countdown = seconds

      if(this.countdown <= 0){
        clearInterval(inter);
        this.isCounting = false;
        router.replace({
          url:'pages/master'
        })
      }
    },1000)
  }
  
  onPageShow(){ //页面显示加载执行
    this.startCountDown()
  }

  build() {
    Column(){
      Button(`跳转|${this.countdown}`).onClick(()=>{
        router.replace({
          url:'pages/master'
        })
      })
    }
  }
}

可以一横屏一竖屏就会重新加载。。。

设置为竖屏

打开config.json添加

"orientation": "portrait"

在这里插入图片描述

  • unspecified：未指定方向，由系统自动判断显示方向。
  • landscape：横屏。
  • portrait：竖屏。
  • landscape_inverted：反向横屏。
  • portrait_inverted：反向竖屏。
  • auto_rotation：随传感器旋转。
  • auto_rotation_landscape：传感器横屏旋转，包括横屏和反向横屏。
  • auto_rotation_portrait：传感器竖屏旋转，包括竖屏和反向竖屏。
  • auto_rotation_restricted：传感器开关打开，方向可随传感器旋转。
  • auto_rotation_landscape_restricted：传感器开关打开，方向可随传感器旋转为横屏，包括横屏和反向横屏。
  • auto_rotation_portrait_restricted：传感器开关打开，方向随可传感器旋转为竖屏，包括竖屏和反向竖屏。
  • locked：传感器开关关闭，方向锁定。

自定义标题

//pages.main.ets
import router from '@ohos.router'
@Entry
@Component
struct Master{
  @State hello:string = "hello this is master page"
  @State inputButton:string = "测试"
  build(){
    Column(){
      Button(this.inputButton,{ stateEffect: false }).backgroundColor("#F5F5F5")
        .fontColor("#DCDCDC").width(200).height(35).onClick(()=>{
        router.push({
          url: 'pages/main_search'
        })
      })


    }.height('100%').width('100%')
  }
}

点击后跳转pages/main_search页面

@Entry
@Component
struct main_search{
  controller:TextInputController = new TextInputController();
  build(){
    Navigation(){
      TextInput({text:"",placeholder:"测试",controller:this.controller}).placeholderColor(Color.Gray)
    }
  }
}

但出现
在这里插入图片描述
为了平齐我们需要自定义标题栏

@Entry
@Component
struct main_search{
  controller:TextInputController = new TextInputController();

  @Builder title(){ // 自定义标题栏
    Row(){
      TextInput({text:"",placeholder:"测试",controller:this.controller}).placeholderColor(Color.Gray)
    }
  }

  build(){
    Navigation(){
      
    }.title(this.title())
  }
}

Tabs&TabContent

Tabs官方文档
TabContent官方文档

Tabs

不支持自定义组件作为子组件， 仅可包含子组件TabContent

格式为

//需要添加@State currentIndex:number = 0
Tabs({{barPosition: BarPosition.Start, index: this.currentIndex,controller:this.tabs_controller}}){
	TabContent(){
	}.tabBar({icon:<string>,text:<string>})
}

其中icon就是索引,text是名称

  • barPosition: 设置Tabs的页签位置。默认值：BarPosition.Start(左侧)还可以设置为BarPosition.End(右侧)
  • index: 显示当前索引值
  • controller:Tabs的控制器必须要有，写法@State currentIndex:number = 0
    可以自定义
//需要添加
//@State currentIndex:number = 0
//@State fontColor: string = '#182431'
//@State selectedFontColor: string = '#007DFF'

@Builder tabBuilder(index:number,name:string){
	Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) //当前那个索引被选中更改颜色
        .fontSize(16) 
        .fontWeight(this.currentIndex === index ? 500 : 400) //选中和没选中更改字体粗细
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
}

你可以这么写

Tabs({{barPosition: BarPosition.Start, index: this.currentIndex,controller:this.tabs_controller}}){
	//绿色整体
	TabContent(){
		Column(){}.width('100%').height('100%').backgroundColor(Color.Green)
	}.tabBar(this.tabBuilder(0,"green"))
	//蓝色整体
	TabContent(){
		Column(){}.width('100%').height('100%').backgroundColor(Color.Blue)
	}.tabBar(this.tabBuilder(0,"blue"))
}

在这里插入图片描述

通过divider实现了分割线各种属性
Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
        //.margin({ top: 7, bottom: 0 }) //可以对分割线位置进行修改

图片下载

我的图像SVG

<svg t="1727174544161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1537" width="200" height="200"><path d="M1024 512c0-281.6-230.4-512-512-512S0 230.4 0 512s230.4 512 512 512 512-230.4 512-512z m-512 448c-249.6 0-448-198.4-448-448s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448z" fill="#777777" p-id="1538"></path><path d="M627.2 505.6c44.8-38.4 76.8-89.6 76.8-153.6 0-108.8-83.2-192-192-192s-192 83.2-192 192c0 64 32 115.2 76.8 153.6-102.4 44.8-172.8 147.2-172.8 262.4 0 19.2 12.8 32 32 32s32-12.8 32-32c0-121.6 102.4-224 224-224s224 102.4 224 224c0 19.2 12.8 32 32 32s32-12.8 32-32c0-115.2-70.4-217.6-172.8-262.4zM512 480c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" fill="#777777" p-id="1539"></path></svg><svg t="1727174544161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1537" width="200" height="200"><path d="M1024 512c0-281.6-230.4-512-512-512S0 230.4 0 512s230.4 512 512 512 512-230.4 512-512z m-512 448c-249.6 0-448-198.4-448-448s198.4-448 448-448 448 198.4 448 448-198.4 448-448 448z" fill="#777777" p-id="1538"></path><path d="M627.2 505.6c44.8-38.4 76.8-89.6 76.8-153.6 0-108.8-83.2-192-192-192s-192 83.2-192 192c0 64 32 115.2 76.8 153.6-102.4 44.8-172.8 147.2-172.8 262.4 0 19.2 12.8 32 32 32s32-12.8 32-32c0-121.6 102.4-224 224-224s224 102.4 224 224c0 19.2 12.8 32 32 32s32-12.8 32-32c0-115.2-70.4-217.6-172.8-262.4zM512 480c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" fill="#777777" p-id="1539"></path></svg>

信封SVG

<svg t="1727174609255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2645" width="200" height="200"><path d="M914.285714 73.142857h-804.571428C51.2 73.142857 0 124.342857 0 182.857143v585.142857c0 58.514286 51.2 109.714286 109.714286 109.714286h804.571428c58.514286 0 109.714286-51.2 109.714286-109.714286v-585.142857c0-58.514286-51.2-109.714286-109.714286-109.714286z m-804.571428 73.142857h804.571428L563.2 497.371429c-14.628571 14.628571-29.257143 21.942857-51.2 21.942857s-36.571429-7.314286-51.2-21.942857L109.714286 146.285714zM73.142857 782.628571V212.114286l285.257143 285.257143L73.142857 782.628571z m80.457143 21.942858l256-256c29.257143 29.257143 65.828571 43.885714 102.4 43.885714s73.142857-14.628571 102.4-43.885714l43.885714-43.885715-43.885714 43.885715 256 256H153.6z m797.257143-36.571429v14.628571L665.6 497.371429 950.857143 212.114286v555.885714z" p-id="2646"></path></svg>

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

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

相关文章

一文详解GB28181、RTSP、RTMP

一文详解GB28181、RTSP、RTMP

GB28181 GB28181 即 GB/T28181—2016《公共安全视频监控联网系统信息传输、交换、控制技术要求》。它是公安部提出的公共安全行业标准&#xff0c;在视频监控领域具有重要地位。 主要目的和应用场景&#xff1a; 目的&#xff1a;解决不同厂家的视频监控设备执行各自标准&…
阅读更多...
9.24 C++ 常成员，运算符重载

9.24 C++ 常成员，运算符重载

//my_string.cpp #include "my_string.h" #include <iostream> #include <cstring>using namespace std;My_string::My_string():size(15){this->ptr new char[size];this->ptr[0] \0; //表示串为空串this->len 0;}//有参构造My_…
阅读更多...
业务数据批量插入数据库实践

业务数据批量插入数据库实践

业务数据如何存储一直以来都是项目开发中的一个比较重要的话题。我们要从资源的利用率&#xff0c;业务场景和技术实现多个方面考虑存储的问题。“抛开业务谈技术就是耍流氓”&#xff0c;所有技术架构都要站在实际的业务场景中分析。比如个人端的产品&#xff0c;这种就属于读…
阅读更多...
代码随想录算法训练营Day7 | 454.四数相加Ⅱ、383.赎金信、15.三数之和、18.四数之和

代码随想录算法训练营Day7 | 454.四数相加Ⅱ、383.赎金信、15.三数之和、18.四数之和

454.四数相加Ⅱ 题目 454. 四数相加 II - 力扣&#xff08;LeetCode&#xff09; 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums…
阅读更多...
weblogic中间件漏洞复现

weblogic中间件漏洞复现

后台弱口令getshell 1.开启环境 cd vulhub-master/weblogic/weak_password docker-compose up -d docker ps 2.f访问靶场 访问/console/login/LoginForm.jsp这个目录进行登录&#xff0c; 默认账号密码&#xff1a;weblogic/Oracle123 需要注意的是单个账号进行登录时&…
阅读更多...
C++_CH18_构造函数与析构函数

C++_CH18_构造函数与析构函数

C_CH18_构造函数与析构函数 1 类的默认成员函数 在编写类的时候&#xff0c;C编译器会默认生成6个默认的函数&#xff0c;但是不显示出来&#xff1a; 需要关注以下两个方面: 第一:我们不写时&#xff0c;编译器默认生成的函数行为是什么&#xff0c;是否满足我们的需求。 …
阅读更多...
LabVIEW界面输入值设为默认值

LabVIEW界面输入值设为默认值

在LabVIEW中&#xff0c;将前面板上所有控件的当前输入值设为默认值&#xff0c;可以通过以下步骤实现&#xff1a; 使用控件属性节点&#xff1a;你可以创建一个属性节点来获取所有控件的引用。 右键点击控件&#xff0c;选择“创建” > “属性节点”。 设置属性节点为“D…
阅读更多...
实践出真知！8个案例速通栅格系统

实践出真知！8个案例速通栅格系统

在现代设计中&#xff0c;栅格系统作为一种重要的布局方案&#xff0c;能够有效提升设计的秩序感。对于 UI 设计领域&#xff0c;栅格系统也广泛用于跨屏幕的响应式设计&#xff0c;帮助设计师打造更好的多端体验。本文将简要介绍栅格系统的基本概念和搭建方法&#xff0c;并提…
阅读更多...
什么是unix中的fork函数？

什么是unix中的fork函数？

一、前言 在本专栏之前的文档中已经介绍过unix进程环境相关的概念了&#xff0c;本文将开始介绍unix中一个进程如何创建出新进程&#xff0c;主要是通过fork函数来实现此功能。本文将包含如下内容&#xff1a; 1.fork函数简介 2.父进程与子进程的特征 3.如何使用fork创建新进程…
阅读更多...
依赖不对应导致java文件不能正常显示

依赖不对应导致java文件不能正常显示

项目中若出现非正常显示的java文件&#xff0c;检查下是否依赖版本不对应。&#xff08;前提必须是maven项目&#xff09;
阅读更多...
网络原理（4）——网络层（IP）、数据链路层

网络原理（4）——网络层（IP）、数据链路层

1. IP 协议 基本概念&#xff1a; 主机&#xff1a;配有 IP 地址&#xff0c;但是不进行路由控制的设备 路由器&#xff1a;即配有 IP 地址&#xff0c;又能进行路由控制 节点&#xff1a;主机和路由器的统称 IP 协议报头格式 1) 4 位版本&#xff1a;实际上只有两个取值&…
阅读更多...
通义灵码AI 程序员正式发布：写代码谁还动手啊

通义灵码AI 程序员正式发布：写代码谁还动手啊

虽然见不到面 但你已深潜我心 前几天&#xff0c;在 2024 年的杭州云栖大会上&#xff0c;随着通义大模型能力的全面提升&#xff0c;阿里云通义灵码这位中国的首位 AI 程序员也迎来重大的升级。 一年前这位 AI 程序员还只能完成基础的编程任务&#xff0c;到现在可以做到几…
阅读更多...
Leetcode 543. 124. 二叉树的直径 树形dp C++实现

Leetcode 543. 124. 二叉树的直径 树形dp C++实现

问题&#xff1a;Leetcode 543. 二叉树的直径&#xff08;边权型&#xff09; 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。两节点之间路径的 长度 由它们之…
阅读更多...
探索未来：MultiOn，AI的下一个革命

探索未来：MultiOn，AI的下一个革命

文章目录 探索未来&#xff1a;MultiOn&#xff0c;AI的下一个革命背景&#xff1a;为什么选择MultiOn&#xff1f;MultiOn是什么&#xff1f;如何安装MultiOn&#xff1f;简单的库函数使用方法场景应用常见问题及解决方案总结 探索未来&#xff1a;MultiOn&#xff0c;AI的下一…
阅读更多...
图表示学习中的Transformer：Graphormer的突破

图表示学习中的Transformer：Graphormer的突破

人工智能咨询培训老师叶梓 转载标明出处 在自然语言处理和计算机视觉等领域&#xff0c;Transformer架构已经成为主导选择。然而&#xff0c;在图级别的预测任务中&#xff0c;它的表现并不如主流的图神经网络&#xff08;GNN&#xff09;变体。这一现象引发了一个思考&#x…
阅读更多...
指针变量的自增、自减运算

指针变量的自增、自减运算

指针变量的自增、自减运算相比较于普通变量的自增、自减运算又什么区别呢&#xff1f; 让我们先来复习一下普通变量的自增、自减运算 int main() {int i; //定义一个整型变量printf("请输入一个数字&#xff1a;\n");scanf("%d&qu…
阅读更多...
JetBrains系列产品无限重置免费试用方法

JetBrains系列产品无限重置免费试用方法

JetBrains系列产品无限重置免费试用方法 写在前面安装插件市场安装插件 写在前面 支持的产品&#xff1a; IntelliJ IDEA AppCode CLion DataGrip GoLand PhpStorm PyCharm Rider RubyMine WebStorm为了保证无限重置免费试用方法的稳定性&#xff0c;推荐下载安装2021.2.2及其…
阅读更多...
QT Creator cmake 自定义项目结构， 编译输出目录指定

QT Creator cmake 自定义项目结构， 编译输出目录指定

1. 目的 将不同的源文件放到不同的目录下进行管理&#xff0c; 如下&#xff1a; build: 编译输出目录 include: 头文件目录 rsources: 资源文件目录 src: cpp文件目录 2. 创建完cmake工程后修改CMakeLists.txt 配置 注 &#xff1a; 这里头文件目录是include, 所以在includ…
阅读更多...
CSS05-复合选择器

CSS05-复合选择器

一、什么是复合选择器 1-1、后代选择器&#xff08;重要&#xff09; 示例1&#xff1a; 示例2&#xff1a; 示例3&#xff1a; 1-2、子选择器 示例&#xff1a; 1-3、并集选择器&#xff08;重要&#xff09; 示例&#xff1a; 1-4、伪类选择器 1、链接伪类选择器 注意事项&am…
阅读更多...
CVPR最牛图像评价算法！

CVPR最牛图像评价算法！

本文所涉及所有资源均在 传知代码平台可获取。 目录 概述 一、论文思路 1.多任务学习框架&#xff1a; 2.视觉-语言对应关系&#xff1a; 3.动态损失权重&#xff1a; 4.模型优化和评估&#xff1a; 二、模型介绍 三、详细实现方法 1.图像编码器和语言编码器&#xff08;Image…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023