IT乐手
从事互联网行业的音乐玩家,音乐和美酒都能让人沉醉
展开
-
一、鸿蒙 Harmony 初体验
看现在网上传得沸沸扬扬的鸿蒙,打算弄个 hello world 玩一下, 不然就跟不上时代的发展了。原创 2024-03-14 18:38:06 · 364 阅读 · 0 评论 -
2.1、线性布局(Row/Column)
横向布局、垂直布局、间距、对齐、排列方式等代码写法原创 2024-03-18 18:37:48 · 166 阅读 · 0 评论 -
2.2、层叠布局(Stack)
层叠布局()用于在屏幕上预留一块区域来显示组件中的元素,提供元素可以重叠的布局。层叠布局通过容器组件实现位置的固定定位与层叠,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力,其使用场景有广告、卡片层叠效果等。原创 2024-03-19 14:13:20 · 254 阅读 · 0 评论 -
2.3、弹性布局(Flex)
Flex 布局方式、布局换行、主轴对齐方式、交叉轴对齐方式,原创 2024-03-20 14:58:38 · 50 阅读 · 0 评论 -
2.4、相对布局(RelativeContainer)
为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个的概念图,图中的虚线表示位置的依赖关系。原创 2024-03-20 16:49:53 · 55 阅读 · 0 评论 -
2.5、栅格布局(GridRow/GridCol)
栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。主要优势包括:提供可循的规律:栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数,可以方便地对页面元素进行定位和排版。统一的定位标注:栅格布局可以为系统提供一种统一的定位标注,保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度,提高工作效率。灵活的间距调整方法:栅格布局可以提供一种灵活的间距调整方法,满足特殊场景布局调整的需求。原创 2024-03-21 15:12:01 · 50 阅读 · 0 评论 -
2.6、媒体查询(mediaquery)
媒体查询作为响应式设计的核心,在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。原创 2024-03-22 11:30:40 · 528 阅读 · 0 评论 -
2.7、创建列表(List)
在初始化列表时,如需在列表项之间添加间距,可以使用space参数。例如,在每个列表项之间沿主轴方向添加55vp对应局部代码Stack()})原创 2024-03-25 10:15:55 · 262 阅读 · 0 评论 -
2.8、下拉刷新与上拉加载
*** 实现思路* 监听手指按下事件,记录其初始位置的值。* 监听手指按压移动事件,记录并计算当前移动的位置与初始值的差值,大于0表示向下移动,同时设置一个允许移动的最大值。* 监听手指抬起事件,若此时移动达到最大值,则触发数据加载并显示刷新视图,加载完成后将此视图隐藏。*/@Component// 列表y坐标偏移量// 按下的y坐标// 上一次移动的y坐标// 当前列表首部的索引// 当前列表尾部的索引// 下拉刷新的布局高度。原创 2024-03-25 17:51:49 · 281 阅读 · 0 评论 -
2.9、创建网格(Grid/GridItem)
网格布局是由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局,其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid容器组件和子组件GridItem,用于构建网格布局。Grid用于设置网格布局相关参数,GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。原创 2024-03-26 15:39:04 · 43 阅读 · 0 评论 -
2.10、创建轮播(Swiper)
Swiper 组件提供滑动轮播显示的能力。Swiper 本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。Swiper 作为一个容器组件,在自身尺寸属性未被设置时,会自动根据子组件的大小设置自身的尺寸。如果开发者对 Swiper 组件设置了固定的尺寸,则在轮播显示过程中均以该尺寸生效;否则,在轮播过程中,会根据子组件的大小自动调整自身的尺寸。通过 loop 属性控制是否循环播放,该属性默认值为 true。当 loop 为 t原创 2024-03-28 18:45:23 · 38 阅读 · 0 评论 -
3.1、按钮 Button
Button是按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。以下代码均经过我 demo 的实战验证,确保代码和效果对应Button通过调用接口来创建,接口调用有以下两种形式:创建包含子组件的按钮设置按钮类型Button 有三种可选类型,分别为 Capsule(胶囊类型)、Circle(圆形按钮)和 Normal(普通按钮),通过type进行设置。圆形按钮普通按钮自定义样式设置边框原创 2024-04-01 11:59:04 · 139 阅读 · 0 评论 -
3.2、单选框(Radio)
Radio是单选框组件,通常用于提供相应的用户交互选择项,同一组的Radio中只有一个可以被选中。原创 2024-04-01 14:20:48 · 42 阅读 · 0 评论 -
3.3、切换按钮(Toggle)
通过属性设置Toggle打开选中后的背景颜色。通过属性设置Switch类型的圆形滑块颜色,仅对type为生效。原创 2024-04-02 11:04:23 · 31 阅读 · 0 评论 -
3.4、进度条(Progress)
Progress是进度条显示组件,显示内容通常为某次目标操作的当前进度。具体用法请参考。原创 2024-04-08 13:51:15 · 109 阅读 · 0 评论 -
3.5、文本显示(Text/Span)
创建文本、添加子组件、自定义文本样式原创 2024-04-08 16:43:26 · 29 阅读 · 0 评论 -
3.6、文本输入(TextInput/TextArea)
创建输入框、设置输入框类型、自定义样式原创 2024-04-10 16:12:12 · 62 阅读 · 0 评论 -
3.7、自定义弹窗(CustomDialog)
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。build() {Column() {Text('我是内容')3.创建构造器,与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})原创 2024-04-17 16:30:34 · 24 阅读 · 0 评论 -
3.8、气泡提示(Popup)
开发者可以使用构建器创建自定义气泡,@Builder中可以放自定义的内容。除此之外,还可以通过popupColor等参数控制气泡样式。})builder: this.popupBuilder(), // 气泡的内容placement:Placement.Bottom, // 气泡的弹出位置popupColor:Color.Pink, // 气泡的背景色onStateChange: (e)=> { // 返回当前的气泡状态if (!// popup构造器定义弹框内容。原创 2024-04-23 14:38:34 · 26 阅读 · 0 评论 -
3.9、菜单(Menu)
当默认样式不满足开发需求时,可使用@Builder自定义菜单内容。可通过bindMenu接口进行菜单的自定义。原创 2024-04-26 13:42:10 · 8 阅读 · 0 评论