首页 > 其他分享 >鸿蒙开发实战：Column和Row容器组件的使用规范

鸿蒙开发实战：Column和Row容器组件的使用规范

时间：2024-08-29 14:57:15浏览次数：5  
标签：鸿蒙 Column media app List Image Row

Column与Row

由之前的介绍可知，我们可以通过Column和Row容器来对页面进行以一个简单的布局，划分不同的功能分区，以搭建一个完整的页面，接下来我将介绍它更多的属性，使其在使用中更好的对页面进行排布划分。

首先如图

图片

我们可以看到，Column和Row都有一个可选参数“space”，space的类型可以是string或number类型，space的作用是调节其在主轴上子组件之间的距离（Column和Row的主轴分别为纵向和横向），举个例子：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}

该代码显示效果如下：

图片

但在加入Column和Row的space参数后

Column({spaec:30}){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row({spaec:20}){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}

该效果就呈现为：

图片

比较后不难发现，在纵向和横向上，各个组件之间的距离发生的变化

图片

这个便是space参数的用法。

接下来，还要介绍这个两个容器的重要属性“justifyContent”以及“alignItems”

图片

其中，justifyContent的数据类型为FlexAlign,它的具体类型有以下几个：

图片

接下来，我为大家提供前三个代码示例：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.Start)//首端对齐
  .width('100%')
}

效果如图：

图片

同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.End)//末端对齐
  .width('100%')
}

效果如图：

图片

同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
  .justifyContent(FlexAlign.Center)//中心对齐
  .width('100%')
}

效果如图：

图片

接下来，我们来介绍alignItems属性，该属性可以控制该容器的子组件在交叉轴上（Column与Row的交叉轴分别为横向与纵向）上的排列方式，alignItems属性在这两个容器中的参数类型并不相同，其中Column容器的参数为HorizontalAlign(水平对齐)，而Row容器的参数为VerticalAlign（垂直对齐），它们分别由如下几个排列方式：

图片

图片

下面，我将以Column容器为例，介绍它的alignItems属性的用法：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
.alignItems(HorizontalAlign.Start)//首端对齐
.width('100%')

效果如图，可以发现子组件排列在了Column容器的交叉轴的最左端：

图片

同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
.alignItems(HorizontalAlign.Center)//中心对齐
.width('100%')

效果如图：

图片

同理：

Column(){
  Test($r('app.string.orther_login_method'))
  .fontsize(50)

  Row(){
    Image($r('app.media.method1'))
    Image($r('app.media.method2'))
    Image($r('app.media.method3'))
  }
}
.alignItems(HorizontalAlign.End)//末端对齐
.width('100%')

效果如图：

图片

以上便是全部对Column和Row容器的补充内容

下面我们来一起学习新的组件内容：

在日常生活的软件中，大家应该经常能碰到像这样的页面：

图片

它通过一行行的表格使它的功能整齐排列在页面中，不仅使得页面美观，而且给用户带来了方便的使用体验，那么这样的表格是如何实现的？接下来将介绍一个生成表格的组件----List。

List

上面已经介绍到，List组件是用于生成表格的，它一般和它的子组件ListItem一起使用，按照水平或垂直方向线性排列，它的参数情况如下：

图片

如图所示，可以看到List组件一共有三个参数，分别是“space”“initalIndex”以及“scroller”，其中

space的作用是用于调整列表项之间的间距，

initalIndex是用于设置List初次加载时起始位置显示的item，

scroller的作用则是控制List组件的滚动。

而List组件的属性则主要有以下两种：

图片

在正式学习List组件之前，我们需要学会ForEach循环渲染，它将有利于我们更好的构建出大量格式相仿的表格项，大大减少我们的代码量。

ForEach循环渲染

首先，我们来看到它的基本格式，如图：

图片

不难发现它也是拥有3个参数。

  • 参数1：arr arr为需要迭代的数组，我们需要将数据提前存放在这个数组里，ForEach会将数据按顺序渲染进列表项里'

  • 参数2：itemGenerator itemGenerator是为子组件生成函数，主要是用于设定好列表样式以进行循环渲染。

  • 参数3:keyGenerator keyGenerator是用于为数组唯一键值生成函数。

学习完ForEach后，我们便可以开始学习使用List组件了，首先，我们先来看看构建一个列表的步骤，如下图：

图片

接下来，我将以此图为例，尝试做出一张列表

图片

我们先对列表的每一项进行分析，例如：

图片

在这个列表项里，我们可以看到，它是由最左侧的图标，接着的文本，还有最右侧的箭头图标三个部分组成的，获得这些信息后，我们首先得创建一个命名为itemData的类，用于存放一个列表项里的数据（定义列表数据对象）：

export default class itemData{
  img?:Resouce;
  title: Resouce;
  others:Resouce;

//初始化列表项数据构建对应数据
constructor（img?:Resouce，title: Resouce，others:Resouce）{
    this.img = img;
    this.title = title;
    this.others = others;
  }
}

接着到第二步，创建列表数据数组，代码如下：

export class MainViewModel{
...
//创建函数getSettingListData用于接收数据
getSettingListData():array<ItemData>{
//创建数组settingListData用于存放接收到的数据
  let settingListData:ItemData[] = [
    new ItemData($r('app.media,news'),$r('app.string.setting_List_news'),$r('app.strinjg.setting.List.toggle')),
new ItemData($r('app.media.data'),$r('app.string.setting_List_data'),null),
new ItemData($r('app.media.menu'),$r('app.string.setting_List_menu'),null),
...
];
  return settingListData;
  }
}

export default new MainViewModel();

第三步，使用List组件构建列表。

@Builder SettingCell(item:ItemData){
  Row(){
    Row({space:12}){
      Image(item.img)
      Test(item.title)     
 }
  if(itme.others == null){
    Image($r('app.media.right_grey'))//向右箭头图标        
  }else{
     Toggle(Toggle({type:ToggleType.switch,isOn:false}))//启动按钮 
  }
}
.justifyContent(FlexAlign.SpaceBetween)//第一个元素行首对齐，最后一个元素行尾对齐
.width('100%')
} 

第四步，使用ForEach构建列表：

@Component
export default struct Setting{
  @Builder SettingCell(item:ItemData){...}
  ...
  List(){
    ForEach(MainViewModel.getSettingListData(),//遍历数组数据
       (item:ItemData) => {ListItem(){
        this.settingCell(item)
      }//生成子组件
    },item => JSON.stringify(item))//生成数组项键值
  }
  .divider({...})//设置列表分割线
...
}

经过上面的步骤，我们就能完成一个List列表的构建，完成一个

图片

这样的列表，以上便是本片博客的全部内容。

标签：鸿蒙,Column,media,app,List,Image,Row
From： https://blog.csdn.net/qazwsx957486/article/details/141677290

相关文章

  • 鸿蒙开发实战：声明静态订阅应用规范
    静态订阅者在未接收订阅的目标事件时，处于未拉起状态，当系统或应用发布了指定的公共事件后，静态订阅者将被拉起，并执行onReceiveEvent回调。开发者可通过在onReceiveEvent回调中执行业务逻辑，实现当应用接收到特定公共事件时执行业务逻辑的目的。例如，某应用希望在设备开机的时......
  • 2024鸿蒙开发【面试题库】，转岗看这一篇就够了【收藏篇】
    鸿蒙面试浪潮来袭，你是否也想着利用这次机会去实现，跳槽涨薪的梦呢？如果关注了华为鸿蒙的人应该知道：鸿蒙开发岗位需求飙升6倍！可想而知该岗位前景多么广阔，为此就为大家整理些（鸿蒙HarmonyOS）开发岗位面试题。面试题目页面和组件的生命周期，及其流程@Entry装饰的页面和Naviga......
  • 鸿蒙harmonyOS HDC环境配置
    HDC下载官方下载渠道：......
  • 鸿蒙界面开发（三）：层叠布局&绝对定位
    层叠布局——Stack容器组件层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有......
  • 鸿蒙OS试题
    25.为了使isShow参数值与半模态界面的状态同步，可以使用下列那种方式双向绑定参数?D.Column(){Button("transitionmodal1").onClick(()=>{this.isShow=true}).fontSize(20).margin(10).bindSheet($$this.isShow,this.myBuilder(),{height:this.sheetHeight,......
  • 鸿蒙OS应用开发试题
    1.作依次调用如下方法4次启动U为应用开发者，你使用hiAppEvent订阅了崩溃事件。应用崩溃后，从onReceive接口返回的AppEventInfo中()属性可以获取崩溃调用信息。A.eventTypeB.nameC.domainD.Params2.某个应用开发了一个UIAbilityA，其启动模式是specified，并且对应的AbilityS......
  • 鸿蒙OS高级应用开发试题
    66.为了加快构建速度，提高开发效率，可以如何调整hvigor配置，从而优化构建速度A.启用hvigor的incremental，在增量场景下检查任务是否可以跳过B.启动hvigor的daemon模式，在增量场景下复用缓存C.启用hvigor的parallel，在增量场景下进行并行编译处理D.启用hvigor的typeCheck，在增量场......
  • 鸿蒙DevEco Studio 快捷键
    window版快捷键 相关说明Ctrl+Q 查看API说明⽂档（官方神器）Ctrl+F 查找Ctrl+shift+F 全局查找Ctrl+R 替换Ctrl+shift+R 全局替换Ctrl+Z 撤销Ctrl+D 当前行+1Ctrl+Y 删除当行Ctrl+Enter 光标后面换行Ctrl+G 跳转至某一行Ctrl+Alt+L 格式化Ctrl+N 快速打......
  • 【鸿蒙学习】HarmonyOS应用开发者高级认证 - 应用DFX能力介绍（含闯关习题）
    学完时间：2024年8月24日学完排名：第1698名一、PerformanceAnalysisKit简介PerformanceAnalysisKit（性能分析服务）为开发者提供应用事件、日志、跟踪分析工具，可观测应用运行时状态，用于行为分析、故障分析、安全分析、统计分析，帮助开发者持续改进应用体验。使用场景应用......
  • ".prisma/client/index-browser" is imported by ".prisma/client/index-browser?comm
    背景在nuxt3项目中使用prisma操作数据库。dev阶段可以正常运行，但是到了build时出现以上错误。分析由于npm的依赖采用扁平化管理，而pnpm并不适用扁平化管理，从而导致pnpm存在兼容性问题。最简单的办法是直接换掉pnpm，直接改成yarn或者npm。yarnpnpm仔细观察可以发现，没有.prisma......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99