郑州网站及优化,wordpress ui,windows server2012 wordpress,泉州建设系统培训中心网站安装DevEco Studio和新建项目就不多说了#xff0c;可以移步官网 就可以把他们拆成这几个部分了#xff0c;如果看不懂可以暂时忽略下面冒号后面的内容
装饰器#xff1a;用于装饰类、结构、方法以及变量#xff0c;并赋予其特殊的含义。如上述示例中Entry、Component和St…安装DevEco Studio和新建项目就不多说了可以移步官网 就可以把他们拆成这几个部分了如果看不懂可以暂时忽略下面冒号后面的内容
装饰器用于装饰类、结构、方法以及变量并赋予其特殊的含义。如上述示例中Entry、Component和State都是装饰器Component表示自定义组件Entry表示该自定义组件为入口组件State表示组件中的状态变量状态变量变化会触发UI刷新。UI描述以声明式的方式来描述UI的结构例如build()方法中的代码块。自定义组件可复用的UI单元可组合其他组件如上述被Component装饰的struct Hello。系统组件ArkUI框架中默认内置的基础和容器组件可直接被开发者调用比如示例中的Column、Text、Divider、Button。属性方法组件可以通过链式调用配置多项属性如fontSize()、width()、height()、backgroundColor()等。事件方法组件可以通过链式调用设置多个事件的响应逻辑如跟随在Button后面的onClick()。 解释这些东西一大堆对新手来说理解有那么一点不容易只要记住这个大概的格式就像这个样子
Entry
Component
struct Index {
//放你写的数据build() {//放你写的页面代码 }}
3.布局
下面的内容有些复杂新手看不懂可以暂时只看线性布局这个是我们最常用的一种布局方式
1.线性布局Row、Column
线性布局Row、Column如果布局内子元素为复数个且能够以某种方式线性排列时优先考虑此布局。
2.层叠布局Stack
层叠布局Stack组件需要有堆叠效果时优先考虑此布局层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理则优先考虑在外层使用堆叠布局。
3.弹性布局Flex
弹性布局Flex弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局可使得多个容器内子组件能有更好的视觉上的填充容器效果。
4.相对布局RelativeContainer
相对布局RelativeContainer相对布局是在二维空间中的布局方式不需要遵循线性布局的规则布局方式更为自由。通过在子组件上设置锚点规则AlignRules使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。
5.栅格布局GridRow、GridCol
栅格布局GridRow、GridCol栅格是多设备场景下通用的辅助定位工具通过将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分可以实现不同设备下不同的布局空间划分更随心所欲从而显著降低适配不同屏幕尺寸的设计及开发成本使得整体设计和开发流程更有秩序和节奏感同时也保证多设备上应用显示的协调性和一致性提升用户体验。推荐内容相同但布局不同时使用。
6.媒体查询ohos.mediaquery
媒体查询ohos.mediaquery媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局以及屏幕发生动态改变时更新应用的页面布局。
7.列表List
列表List使用列表可以轻松高效地显示结构化、可滚动的信息。在ArkUI中列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集例如图片和文本。
8.网格Grid
网格Grid网格布局具有较强的页面均分能力子组件占比控制能力是一种重要自适应布局。网格布局可以控制元素所占的网格数量、设置子组件横跨几行或者几列当网格容器尺寸发生变化时所有子组件以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用例如计算器、相册、日历等。
9.轮播Swiper
轮播Swiper轮播组件通常用于实现广告轮播、图片预览、可滚动应用等。
使用
暂时看不懂也没关系我们暂时只看用的最多的线性布局
线性布局分为两种
一种是竖直方向的线性布局Column
另一种是水平方向的线性布局Row 我们把他们加入我们写的代码中
Entry
Componentstruct Index {
//放你写的数据build() {Row() { Column() { //放你写的组件 } } }}
这样页面布局就写好了下面我们要开始在页面布局中写组件了
4.组件
下面我们就在我们的页面中添加组件
常见的组件有
按钮单选框切换按钮进度条文本显示文本输入自定义弹窗视频播放XComponent
今天我们先来看一下按钮和文本显示
1.组件格式
组件的格式基本上都是这个样子 2.文本组件使用
这个我们点右边的这个小眼睛可以预览效果 也就是这个样子 同样的我们在线性布局的下面加上修饰的东西可以让这个文字显示在屏幕中央 .width(100%)是让垂直布局的宽度占据整个屏幕的宽度让文本位于左右居中
同理.height(100%)是让水平布局的高度占据整个屏幕的高度让文本上下居中
3.按钮组件使用
然后我们可以增加一个按钮Bottom组件
Entry
Component
struct Index {State message: string Hello World‘ build() {Row() {Column() {//文本组件Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)//按钮组件Button(按钮中的内容).onClick(() { //点击//点击按钮后发生的事情})}.width(100%)}.height(100%)}}
例如我用来演示的这个 点击按钮后message的内容就会发生变化点击按钮后的效果如下 我们今天的内容就到这里
结尾
我们今天入门了ArkTS初步接触了一下组件的应用如果有什么错误希望大家可以在评论区中指正祝大家可以早日成为ArkTS大佬。
