手机怎么自己建网站,中国矿井建设相关媒体网站,dedecms 广告管理 js 网站变慢,wordpress一键缓存一 ArkUI(基于ArkTS)概述
基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架#xff0c;提供了构建应用UI所必需的能力
点击详情
特点 开发效率高#xff0c;开发体验好 代码简洁#xff1a;通过接近自然语义的方式描述UI#x…
一 ArkUI(基于ArkTS)概述
基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架提供了构建应用UI所必需的能力
点击详情
特点 开发效率高开发体验好 代码简洁通过接近自然语义的方式描述UI不必关心框架如何实现UI绘制和渲染。数据驱动UI变化让开发者更专注自身业务逻辑的处理。当UI发生变化时开发者无需编写在不同的UI之间进行切换的UI代码 开发人员仅需要编写引起界面变化的数据具体UI如何变化交给框架。开发体验好界面也是代码让开发者的编程体验得到提升。 性能优越 声明式UI前端和UI后端分层UI后端采用C语言构建提供对应前端的基础组件、布局、动效、交互事件、组件状态管理和渲染管线。语言编译器和运行时的优化统一字节码、高效FFIForeign Function Interface、AOTAhead Of Time、引擎极小化、类型优化等。 生态容易快速推进 能够借力主流语言生态快速推进语言相对中立友好有相应的标准组织可以逐步演进。 二 布局概述
组件按照布局的要求依次排列构成应用的页面。在声明式UI中所有的页面都是由自定义组件构成开发者可以根据自己的需求选择合适的布局进行页面开发。
如何选择布局
声明式UI提供了以下10种常见布局开发者可根据实际应用场景选择合适的布局进行页面开发。
布局应用场景线性布局Row、Column如果布局内子元素超过1个时且能够以某种方式线性排列时优先考虑此布局。层叠布局Stack组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理则优先考虑在外层使用堆叠布局。弹性布局Flex弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局可使得多个容器内子组件能有更好的视觉上的填充效果。相对布局RelativeContainer相对布局是在二维空间中的布局方式不需要遵循线性布局的规则布局方式更为自由。通过在子组件上设置锚点规则AlignRules使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。栅格布局GridRow、GridCol栅格是多设备场景下通用的辅助定位工具可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分可以实现不同设备下不同的布局空间划分更随心所欲从而显著降低适配不同屏幕尺寸的设计及开发成本使得整体设计和开发流程更有秩序和节奏感同时也保证多设备上应用显示的协调性和一致性提升用户体验。推荐内容相同但布局不同时使用。媒体查询ohos.mediaquery媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局以及屏幕发生动态改变时更新应用的页面布局。列表List使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集例如图片和文本。网格Grid网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列当网格容器尺寸发生变化时所有子元素以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用例如计算器、相册、日历等。轮播Swiper轮播组件通常用于实现广告轮播、图片预览等。选项卡Tabs选项卡可以在一个页面内快速实现视图内容的切换一方面提升查找信息的效率另一方面精简用户单次获取到的信息量。
三 线性布局 (Row/Column)
Row和Column是最常用的布局类似于 前端中 的 flex
Column 纵向布局
它默认子元素水平居中纵向排列
Entry
Component
struct Index {State message: string Hello World;build() {Column() {Column(){}.width(80%).height(20%).backgroundColor(#ff6700).margin({bottom:20})Column(){}.width(80%).height(20%).backgroundColor(#ff6700).margin({bottom:20})Column(){}.width(80%).height(20%).backgroundColor(#ff6700).margin({bottom:20})}.height(100%).width(100%)}
} Row 横向布局
它默认子元素水平居中纵向排列这里我没有设置间据它门贴在一起了
Entry
Component
struct Index {State message: string Hello World;build() {Row() {Column(){}.width(80%).height(20%).backgroundColor(#ff6700).margin({bottom:20})Column(){}.width(80%).height(20%).backgroundColor(#ff6700).margin({bottom:20})Column(){}.width(80%).height(20%).backgroundColor(#ff6700).margin({bottom:20})}.height(100%).width(100%)}
} Space 设置子元素的间距
线性布局默认不会根据父元素收缩这个跟 flex有区别 alignItems 交叉轴方向布局
交叉轴为垂直方向时(Row)取值为VerticalAlign类型可选值Top,Center,Bottom
水平方向(Column)取值为HorizontalAlign类型,可选值Start,Center,End
// 官方代码
Column({}) {Column() {}.width(80%).height(50).backgroundColor(0xF5DEB3)Column() {}.width(80%).height(50).backgroundColor(0xD2B48C)Column() {}.width(80%).height(50).backgroundColor(0xF5DEB3)
}.width(100%).alignItems(HorizontalAlign.Start).backgroundColor(rgb(242,242,242))
Row({}) {Column() {}.width(20%).height(30).backgroundColor(0xF5DEB3)Column() {}.width(20%).height(30).backgroundColor(0xD2B48C)Column() {}.width(20%).height(30).backgroundColor(0xF5DEB3)
}.width(100%).height(200).alignItems(VerticalAlign.Top).backgroundColor(rgb(242,242,242))
justifyContent主轴对齐
可选值FlexAlign.(Start | Center | End | SpaceBetween | SpaceAround | SpaceEvenly) 自适应拉伸
在线性布局下常用空白填充组件Blank在容器主轴方向自动填充空白空间达到自适应拉伸效果。
自适应缩放
自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸适应各种不同大小的设备。在线性布局中可以使用以下两种方法实现自适应缩放。
父容器尺寸确定时使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重忽略元素本身尺寸设置使它们在任意尺寸的设备下自适应占满剩余空间父容器尺寸确定时使用百分比设置子元素和兄弟元素的宽度使他们在任意尺寸的设备下保持固定的自适应占比。
未完待续
