UI（四）布局

文章目录

          • 10、Navigator——路由器组件
          • 11、Pannel——可滑动面板
          • 12、Refresh——刷新组件
          • 13、RelativeContainer——相对布局组件
          • 14、Scroll——可滚动容器
          • 15、SideBarContainer——侧边栏容器
          • 16、Stack——堆叠容器
          • 17、Swiper——滑动块视图容器
          • 18、Tabs和TabContent——页签和页签视图容器

10、Navigator——路由器组件

Navigator是路由器组件，提供路由跳转能力
Navigator的构造函数参数有两个

target目标页面路由
type指定路由方式，默认值是Navigator.Push

type有3个值

push跳转到应用内的指定页面
Replace到应用内的某个页面替换当前页面，并销毁被替换的页面
Back返回上一个页面或指定页面
11、Pannel——可滑动面板

Pannel是可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸间切换

Panel(true){
          Column(){
            Text('今日历程').width('100%').fontSize(30).textAlign(TextAlign.Center)
            Text('1、学习Java').width('100%').fontSize(20).textAlign(TextAlign.Start)
            Text('2、学习ArkUI').width('100%').fontSize(20).textAlign(TextAlign.Start)
            Text('1、学习Android').width('100%').fontSize(20).textAlign(TextAlign.Start)
          }
        }
        .type(PanelType.Foldable).mode(PanelMode.Half)
        .dragBar(true)  //默认开启
        .halfHeight(300) //默认一半
12、Refresh——刷新组件

Refresh是可以进行页面下拉刷新操作的容器组件，主要参数

refreshing当前组件是否正在刷新
offset刷新组件静止时距离父组件顶部的位置，默认值是16，单位是Vp
friction下拉摩擦系数 取值范围0~100
Refresh({
  refreshing:false, //  组件是否正在刷新
  offset:120,   // 新组件静止时距离父组件顶部的距离
  friction:100  //摩擦系数  取值范围 0 ~ 100
}){
  Text('正在刷新')
    .fontSize(30)
    .margin(20)
}
.onStateChange((state:RefreshStatus) => {  //刷新状态监听

})
13、RelativeContainer——相对布局组件
RelativeContainer(){
          //第一个位置父容器的顶部，靠左
          Row().width(100).height(100)
            .backgroundColor("#ff3333")
            .alignRules({
              top:{anchor:"__container__",align:VerticalAlign.Top}, //__container__ 为容器固定的id
              left:{anchor:"__container__",align:HorizontalAlign.Start}
            })
            .id('row1')

          //第二个位置父容器顶部 水平位置结束
          Row().width(100).height(100)
            .backgroundColor("#ffcc00")
            .alignRules({
              top:{anchor:"__container__",align:VerticalAlign.Top},
              right:{anchor:"__container__",align:HorizontalAlign.End}
            })
            .id('row2')

          //第三个位置 顶部对齐row1的底部，左边对齐row1的结束
          Row().width(100).height(100)
            .backgroundColor("#ff6633")
            .alignRules({
              top:{anchor:"row1",align:VerticalAlign.Bottom},
              left:{anchor:"row1",align:HorizontalAlign.End}
            })
            .id('row3')

          // 第四个位置 父容器左边对齐 垂直方向的底部
          Row().width(100).height(100)
            .backgroundColor("#ff9966")
            .alignRules({
              left:{anchor:"__container__",align:HorizontalAlign.Start},
              bottom:{anchor:"__container__",align:VerticalAlign.Bottom}
            })
            .id('row4')
          
          //第五个位置 左边挨着row3的接水 底部对齐父容器底部
          Row().width(100).height(100)
            .backgroundColor("#ff66ff")
            .alignRules({
              left:{anchor:"row3",align:HorizontalAlign.End},
              bottom:{anchor:"__container__",align:VerticalAlign.Bottom}
            })
            .id('row5')

        }
        .width(300)
        .height(300)
        .border({width:2,color:"#6699FF"})

image.png

14、Scroll——可滚动容器

scroll是可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸，内容可以滚动。

 Scroll(new Scroller()){
          Column(){
            ForEach(this.numArr,(item) => {
              Text(item.toString())
                .width('90%')
                .height(200)
                .fontSize(40)
                .backgroundColor(0xffffff)
                .fontColor(Color.Red)
                .margin({top:10})
                .textAlign(TextAlign.Center)
            },item => item)
          }.width('100%')
        }
        .scrollable(ScrollDirection.Vertical) //设置滚动方向为垂直
        .scrollBar(BarState.On) //滚动条常驻显示
        .scrollBarColor(Color.Blue)
        .scrollBarWidth(30)
        .edgeEffect(EdgeEffect.None)
        .onScroll((xOffset: number, yOffset: number) => {
          console.info(xOffset + '  '+ yOffset)
        })
        .onScrollEdge((side:Edge) => {
          console.info("to the edge")
        })
        .onScrollStop(() => {
          console.info("scoll to stop")
        })
        .backgroundColor(0xDcDcdc)

image.png

15、SideBarContainer——侧边栏容器

SideBarContainer是提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。

SideBarContainer(SideBarContainerType.Embed){
  Column(){
    Text('菜单1').width('100%').fontSize(23)
    Text('菜单2').width('100%').fontSize(23)
  }.width('100%')
  .justifyContent(FlexAlign.SpaceEvenly)
  .backgroundColor('#19000000')

  Column(){
    Text('内容1').width('100%').fontSize(23)
    Text('内容2').width('100%').fontSize(23)
  }
}

image.png

16、Stack——堆叠容器

Stack是堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个字组件

Stack() {
  Text('第一层')
    .width('90%')
    .textAlign(TextAlign.Center)
    .height('90%')
    .align(Alignment.Center)
    .backgroundColor(Color.Red)

  Text('第二层')
    .width('70%')
    .textAlign(TextAlign.Center)
    .height('70%')
    .align(Alignment.Center)
    .backgroundColor(Color.Blue)

  Text('第三层')
    .width('40%')
    .textAlign(TextAlign.Center)
    .height('40%')
    .align(Alignment.Center)
    .backgroundColor(Color.Yellow)
}

image.png

17、Swiper——滑动块视图容器

Swiper是滑动块视图容器，提供子组件滑动轮播显示的能力

Swiper(){
  Image($r('app.media.img2')).width('100%').height(200)
  Image($r('app.media.img3')).width('100%').height(200)
  Image($r('app.media.img4')).width('100%').height(200)
}
.cachedCount(2)  //设置预加载子组件的个数
.index(1)  //当前容器默认展示子组件的索引值
.autoPlay(true) // 设置是否自动播放
.interval(4000)  //自动播放的时间间隔 单位毫秒
.loop(true)  //是否循环播放
.duration(1000)  // 子组件切换的动画时长
.itemSpace(20)  // 设置子组件与子组件之间的间隙
.curve(Curve.EaseOut)  // 设置Swiper的动画曲线

格式工厂 屏幕录像20240701_172805 00_00_00-00_00_09.gif

18、Tabs和TabContent——页签和页签视图容器

Tabs是通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图TabContent

barPosition设置tabs的页签位置，默认值是BarPosition.Start
index设置初始页签索引，默认值0
controllerTabs控制器
Tabs({ barPosition:BarPosition.Start,
index:1,
controller:new TabsController()}){
  TabContent(){
    Column().width('100%').height('100%').backgroundColor(Color.Red)
  }
  TabContent(){
    Column().width('100%').height('100%').backgroundColor(Color.Blue)
  }
  TabContent(){
    Column().width('100%').height('100%').backgroundColor(Color.Green)
  }
}
.vertical(false)  //设置为false是横向的tabs 设置为true是纵向的
.barMode(BarMode.Fixed) // TabBar布局样式
.barWidth(360)
.height(56)
.animationDuration(400)
.width('100%')
.height(360)
.margin({ top:52 })

格式工厂 屏幕录像20240701_174028 00_00_00-00_00_08.gif

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Nginx-2

Nginx-2

一、高级配置 1.1网页状态页 基于nginx 模块 ngx_http_stub_status_module 实现，在编译安装nginx的时候需要添加编译参数 --with-http_stub_status_module，否则配置完成之后监测会是提示语法错误注意: 状态页显示的是整个服务器的状态,而非虚拟主机的状…
阅读更多...
【SQL】已解决：SQL错误（208）：对象名‘STRING_SPLIT‘无效

【SQL】已解决：SQL错误（208）：对象名‘STRING_SPLIT‘无效

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决：SQL错误（208）：对象名‘STRING_SPLIT‘无效 在使用SQL Server进行数据库操作时，遇到错误（208&#xff…
阅读更多...
反向沙箱技术：安全隔离上网

反向沙箱技术：安全隔离上网

在信息化建设不断深化的今天，业务系统的安全性和稳定性成为各公司和相关部门关注的焦点。面对日益复杂的网络威胁，传统的安全防护手段已难以满足需求。深信达反向沙箱技术，以其独特的设计和强大的功能，成为保障政务系统信息安全的…
阅读更多...
SpringBoot项目中获取IP地址

SpringBoot项目中获取IP地址

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 OkHttp 是一个由 Square 开发的高效、现代的 HTTP 客户端库，用于 Android 和 Java 应用程序。它支持 HTTP/2 和 SPDY 等现代网络协议，…
阅读更多...
详解COB显示屏的技术特点

详解COB显示屏的技术特点

COB（Chip on Board）显示屏作为一种采用倒装COB封装技术的LED显示屏，在显示效果以及使用稳定性跟防护性方面，拥有更大优势，今天跟随COB显示屏厂家中品瑞科技一起来看看，COB显示屏的技术特点： 1、…
阅读更多...
【前端vue3】TypeScrip-类型推论和类型别名

【前端vue3】TypeScrip-类型推论和类型别名

类型推论 TypeScript里，在有些没有明确指出类型的地方，类型推论会帮助提供类型。 例如： 变量xiaoc被推断类型为string 如重新给xiaoc赋值数字会报错 let xiaoc "xiaoc"xiaoc 1111111111111如没有给变量指定类型和赋值&#xf…
阅读更多...
tcpdump命令详解及使用实例

tcpdump命令详解及使用实例

1、抓所有网卡数据包，保存到指定路径 tcpdump -i any -w /oemdata/123.pcap&一、tcpdump简介 tcpdump可以将网络中传送的数据包完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来去掉无用的信…
阅读更多...
内网服务器时间校正

内网服务器时间校正

新购买的云服务器发现内网机器和可以访问外网的机器时间慢了三分钟，导致有些访问会报错，那么我们配置一下ntp校正一下时间。外网配置起来比较简单，直接下载ntp执行校正命令即可。 比当前时间慢了三分钟 注意当前服务器是可以访问外网的机器这…
阅读更多...
道可云AI智能体平台全新升级，加快培育发展新质生产力

道可云AI智能体平台全新升级，加快培育发展新质生产力

数字化时代浪潮下，以人工智能为代表的新一代信息技术正在加速推动社会变革，给各行各业带来巨大发展机遇。在AI技术的加持下，“人工智能”成为时代发展趋势，也是加快培育和发展新质生产力的新动能。 为培育数字经济发展新动能&…
阅读更多...
自定义vue3 hooks

自定义vue3 hooks

文章目录 hooks目录结构demo hooks 当页面内有很多的功能，js代码太多，不好维护，可以每个功能都有写一个js或者ts，这样的话，代码易读，并且容易维护，组合式setup写法与此结合👍&#…
阅读更多...
Java基础(判断和循环)

Java基础(判断和循环)

一、流程控制语句-顺序结构 顺序结构语句是Java程序默认的执行流程，按照代码的先后顺序，从上到下依次执行。 二、流程控制语句-分支结构（分支结构包括if、switch) if语句：在程序中用来进行判断 1、If语句的第一种格式&#xf…
阅读更多...
HTTP请求响应/与HTTPS区别

HTTP请求响应/与HTTPS区别

HTTP（Hypertext Transfer Protocol）和HTTPS（Hypertext Transfer Protocol Secure）是用于在计算机网络上传输信息的两种协议。 HTTP（Hypertext Transfer Protocol）: HTTP 是一种用于传输超文本的应用层协议…
阅读更多...
谈谈创意设计中的AI、AGI、AIGC

谈谈创意设计中的AI、AGI、AIGC

在当今的数字化时代，创意设计领域正经历着前所未有的变革。随着人工智能（AI）、通用人工智能（AGI）以及人工智能生成内容（AIGC）的迅猛发展，设计师们的工作方式和创作手段都发生了深刻的…
阅读更多...
网络基础-RIP协议

网络基础-RIP协议

RIP（Routing Information Protocol）是一个基于距离矢量的动态路由协议，常用于小型到中型网络。RIP是较早的路由协议之一，具有简单易用的特点。以下是关于RIP协议的详细介绍： RIP的主要特点 ①使用跳数（ho…
阅读更多...
Flutter循序渐进==＞数据结构（列表、映射和集合）和错误处理

Flutter循序渐进==＞数据结构（列表、映射和集合）和错误处理

导言 填鸭似的教育确实不行，我高中时学过集合，不知道有什么用，毫无兴趣，等到我学了一门编程语言后，才发现集合真的很有用；可以去重，可以看你有我没有的，可以看我有你没有的&#xf…
阅读更多...
SAP 替代关系完全替代简介

SAP 替代关系完全替代简介

最近用户在对长周期物料进行备料的时候又提出替代料的问题，主料库存不足的时候需要考虑替代料的在途库存，经常会忘了SAP标准的替代料逻辑，这次一次性把这个逻辑写清楚。 关于替代料的逻辑在前面的博文中测试多个替代料的使用场景 1、后继物料 2、组合替代 本文主要测试一下…
阅读更多...
【密码学基础】对随机不经意传输（Random Oblivious Transfer）的理解

【密码学基础】对随机不经意传输（Random Oblivious Transfer）的理解

ROT在offline阶段生成大量的OT对，在online阶段通过one-pad方式高效加密，并且只需要简单的异或运算就能实现OT过程（去随机化）。 在ROT中，有一个关键点是：需要考虑offline阶段的选择比特和online阶段的选择比…
阅读更多...
(六)Shader

(六)Shader

Shader Shader(着色器)：一种运行在GPU端的类C语言GLSL，用于处理顶点数据以及决定像素片元最终着色。 Shader对三角形数据的处理，分为顶点处理和片元处理，分别称为顶点着色器(Vertex Shader)和片元着色器(Fragment Shader) GLSL …
阅读更多...
生信新包｜Mellon·量化单细胞表型景观中的细胞状态密度

生信新包｜Mellon·量化单细胞表型景观中的细胞状态密度

分化是支持所有多细胞生物发育和功能的动态过程。了解细胞如何沿着分化轨迹分布对解析驱动分化的机制、找出关键调控因素以及表征疾病中的失调至关重要。细胞状态密度是这种细胞分布的表现，受到基本生物过程的影响。增殖会增加某一状态下的细胞数目，从而…
阅读更多...
centos7搭建zookeeper 集群 1主2从

centos7搭建zookeeper 集群 1主2从

centos7搭建zookeeper 集群 准备前提规划防火墙开始搭建集群192.168.83.144上传安装包添加环境变量修改zookeeper 的配置 192.168.83.145 和 192.168.83.146 配置 启动 集群 准备 vm 虚拟机centos7系统zookeeper 安装包FinalShell或者其他shell工具 前提 虚拟机安装好3台cen…
阅读更多...
最新文章

Copyright @ 2022~2023