IT评测·应用市场-qidao123.com

标题: 鸿蒙ArkTS中的结构容器组件（Column、Row、Flex、 Stack、Grid） [打印本页]
作者: 前进之路    时间: 2024-11-20 12:25
标题: 鸿蒙ArkTS中的结构容器组件（Column、Row、Flex、 Stack、Grid）
　　在鸿蒙ArkTS中，结构容器组件有很多，常见的有：
　　⑴ Column：（垂直结构容器）：用于将子组件垂直排列。
　　⑵ Row：（水平结构容器）：用于将子组件水平排列。
　　⑶ Flex：（弹性结构方式）它提供了更加有用的方法对容器中的子元素进行排列、对齐和分配剩余空间。
　　⑷ Stack：Stack结构是一种可以将多个组件按照肯定顺序叠放的结构。
　　⑸ Grid（网格容器）：用于创建二维网格结构，适合必要行列对齐的复杂结构。
　　⑹ List（列表容器）：用于展示列表数据，可以设置列表项的结构和样式。
　　⑺ Tabs（页签容器）：用于创建页签结构，允许用户在差异的页面或视图间切换。
　　⑻ Swiper（滑块视图容器）：用于创建滑动视图，常用于图片轮播或广告等场景。
　　⑼ Scroll（可滑动的容器）：允许用户滚动检察超出视图范围的内容。
　　⑽ RelativeContainer（相对结构容器）：允许子元素相对于容器或指定的兄弟元素进行定位。
　　上面的11中结构容器组件各有特点，共同的特性是：
　　⑴ 空间分配属性（如space）：用于调整子组件之间的间距。
　　⑵ 对齐属性（如justifyContent和alignItems）：用于设置子组件在主轴和交叉轴方向上的对齐方式。
　　⑶ 尺寸属性（如width和height）：用于设置容器的宽度和高度。
　　⑷ 边距和添补（如padding和margin）：用于设置容器的内边距和外边距。
　　⑸ 其他属性，比如配景色等。
　　可以一起学习，方便对比。
　　一、Column和Row
　　Column和Row都是线性结构方式。
　　Column组件：用于创建垂直方向的线性结构，其子组件会按照从上到下的顺序排列。
　　Row组件：用于创建水平方向的线性结构，其子组件会按照从左到右的顺序排列。
　　常用属性：
　　① width：设置组件的宽度。
　　② height：设置组件的高度。
　　③ alignment：设置子组件在垂直方向上的对齐方式（如顶部对齐、底部对齐、居中对齐等）。
　　④ spacing：设置子组件之间的间距。
　　⑤ backgroundColor：设置组件的配景颜色。
　　⑥ padding：设置组件的内边距。
　　⑦ Row组件的特有属性wrap：设置是否允许子组件换行（当子组件总宽度凌驾Row宽度时）。
　　做一个2行三列的宫格结构，使用Column和Row。
  1. // 获取随机颜色的函数
  2. function getRandomColor() {
  3.     const letters :string= '0123456789ABCDEF';
  4.     let color:string = '#';
  5.     for (let i = 0; i < 6; i++) {
  6.       let Itemp:number=Math.floor(Math.random() * 16)
  7.       color += letters.substr(Itemp,1);
  8.     }
  9.     return color;
  10. }
  12. @Entry
  13. @Component
  14. struct Index {
  15.   str:string='在鸿蒙ArkTS中，Column和Row是两种常用的布局容器组件，它们分别用于垂直和水平布局。Column（垂直布局容器）用于将子组件垂直排列，Row（水平布局容器）用于将子组件水平排列。'
  16.   build() {
  17.     Column() {
  18.         Row(){
  19.           Column(){
  20.             Text(this.str)
  21.               .fontSize(18).fontColor(getRandomColor()).textAlign(TextAlign.Center)
  22.               .maxLines(4).textOverflow({
  23.               overflow:TextOverflow.Ellipsis
  24.             })
  25.           }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
  26.           Column(){
  27.             Text(this.str).fontSize(18).fontColor(getRandomColor()).align(Alignment.Center)
  28.           }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
  29.           Column(){
  30.             Text(this.str).fontSize(18).fontColor(getRandomColor())
  31.           }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
  32.         }.height('50%')
  33.         Row(){
  34.           Column(){
  35.             Text(this.str).fontSize(18).fontColor(getRandomColor())
  36.           }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
  37.           Column(){
  38.             Text(this.str).fontSize(18).fontColor(getRandomColor())
  39.           }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
  40.           Column(){
  41.             Text(this.str).fontSize(18).fontColor(getRandomColor())
  42.           }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
  43.         }.height('50%')
  44.     }.width('100%').height('100%')
  45.   }
  46. }
复制代码
　　效果图：

　　代码写得有些乱，重要是公共的属性太多，可以使用@style和@Extend来优化代码，而且还可以提供厘革的灵活性。
　　下面的代码@Style只是展示一种写法，重要是@Extend（组件）的写法。
  1. function getRandomColor() {
  2.     const letters :string= '0123456789ABCDEF';
  3.     let color:string = '#';
  4.     for (let i = 0; i < 6; i++) {
  5.       let Itemp:number=Math.floor(Math.random() * 16)
  6.       color += letters.substr(Itemp,1);
  7.     }
  8.     return color;
  9. }
  10. @Extend(Text) function CustomText() {
  11.   .fontColor(getRandomColor())
  12.   .fontSize(18)
  13.   .textAlign(TextAlign.Center)
  14.   .maxLines(5)
  15.   .textOverflow({ overflow: TextOverflow.Ellipsis })
  16. }
  17. @Extend(Column) function ColumnCustomAttr(){
  18.   .justifyContent(FlexAlign.Center)
  19.   .alignItems(HorizontalAlign.Center)
  20. }
  22. @Entry
  23. @Component
  24. struct Index {
  25.   str: string = '在鸿蒙ArkTS中，Column和Row是两种常用的布局容器组件，它们分别用于垂直和水平布局。Column（垂直布局容器）用于将子组件垂直排列，Row（水平布局容器）用于将子组件水平排列。'
  26.   @Styles
  27.   CommonStyle() {
  28.     .layoutWeight(1)
  29.     .height('100%')
  30.     .padding({top:5,left:5,right:5,bottom:5})
  31.     .margin({top:5,left:5,right:5,bottom:5})
  32.     .border({width:2,color:getRandomColor()})
  33.   }
  34.   build() {
  35.         Column() {
  36.             Row() {
  37.                 Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()
  38.                 Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
  39.                 Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
  40.             }.height('50%')
  41.             Row() {
  42.                 Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
  43.                 Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()
  44.                 Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
  45.             }.height('50%')
  46.         }.width('100%').height('100%')
  47.   }
  48. }
复制代码
　　上面的代码就整洁了一些，而且方便修改，无论修改的是公共属性还是组件独有属性。
　　实际效果图：

　　二、Flex（弹性结构组件）
　　Flex结构是一种二维结构模子，它可以在任意方向上对元素进行排列，而且可以动态地调整元素的大小和位置，以适应差异的屏幕尺寸和装备。通过使用Flex结构，可以实现相应式结构效果。
　

　　Flex（弹性伸缩结构）组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相称于Flex中的主轴，Column相称于Flex中的交叉轴。
　　Flex重要属性：
　　① direction（主轴的方向）：用于指定子组件在Flex容器上排列的方向，即主轴的方向。可选值包括Row（主轴方向为水平向右）、RowReverse（主轴方向为水平向左）、Column（主轴方向为垂直向下）和ColumnReverse（主轴方向为垂直向上）。
　　② justifyContent（主轴的对齐方式）：用于定义所有子组件在Flex容器主轴上的对齐方式。，可选值：justifyContent：FlexAlign.Start / Center / End / SpaceBetween / SpaceAround / SpaceEvenly，共有6种方式。
　　③ alignItems（交叉轴的对弃方式）：用于定义所有子组件在Flex容器交叉轴上的对齐方式。可选值：alignItems.Auto / Start / Center / End / Baseline /Stretch，共有6种方式。
　　④ wrap（结构换行）：用于确定Flex容器是单行/列排列还是多行/列排列。在多行结构时，它还会通过交叉轴方向确定新行的堆叠方向。可选值：wrap：FlexWrap.NoWrap / Wrap / WrapReverse。
　　演示：
  1. function getRandomColor() {
  2.     const letters :string= '0123456789ABCDEF';
  3.     let color:string = '#';
  4.     for (let i = 0; i < 6; i++) {
  5.       let Itemp:number=Math.floor(Math.random() * 16)
  6.       color += letters.substr(Itemp,1);
  7.     }
  8.     return color;
  9. }
  10. @Extend(Text) function CustomText() {
  11.   .fontColor(getRandomColor()).fontSize(18).textAlign(TextAlign.Center)
  12.   .maxLines(5).textOverflow({ overflow: TextOverflow.Ellipsis })
  13.   .margin(5).padding(5)
  14.   .height('50%').width('30%')
  15.   .border({width:2,color:getRandomColor()})
  16. }
  17. @Entry
  18. @Component
  19. struct Index {
  20.   str: string = 'Flex（弹性伸缩布局）组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相当于Flex中的主轴，Column相当于Flex中的交叉轴。'
  21.   build() {
  22.       Flex({wrap:FlexWrap.Wrap}){
  23.         Text(this.str).CustomText()
  24.         Text(this.str).CustomText()
  25.         Text(this.str).CustomText()
  26.         Text(this.str).CustomText()
  27.         Text(this.str).CustomText()
  28.         Text(this.str).CustomText()
  29.       }.height('100%').width('100%')
  30.   }
  31. }
复制代码
　　效果图：

　　三、Stack（层叠结构组件）
　　Stack结构是一种可以将多个组件按照肯定顺序叠放的结构。在Stack结构中，后添加的组件会自动覆盖前面添加的组件，可以通过设置zIndex控制层级。
　　① 层叠效果：组件必要有堆叠效果时优先考虑此结构，层叠结构的堆叠效果不会占用或影响其他同容器内子组件的结构空间。
　　② zIndex控制：通过设置子组件的zIndex可以控制层级，zIndex越大越在上层。
　　③ 动画支持：Stack结构还支持添加动画，通过动画可以实现组件的平移、旋转等动态效果。
　　Stack重要的结构属性：alignContent:Alignment.Bottom / ToStart / Top / TopEnd / Start / End / Center / BottomSatrt /Bottom / BottomEnd 共有9种样式
　　测试代码：
  1. function getRandomColor() {
  2.     const letters :string= '0123456789ABCDEF';
  3.     let color:string = '#';
  4.     for (let i = 0; i < 6; i++) {
  5.       let Itemp:number=Math.floor(Math.random() * 16)
  6.       color += letters.substr(Itemp,1);
  7.     }
  8.     return color;
  9. }
  10. @Extend(Button) function CustomText(iW:number,iH:number,iZ:number) {
  11.   .fontColor(Color.White).fontSize(18)
  12.   .margin(5).padding(5)
  13.   .height(iH).width(iW)
  14.   .backgroundColor(getRandomColor())
  15.   .align(Alignment.Start)
  16.   .border({width:1,color:getRandomColor()})
  17.   .zIndex(iZ)
  18. }
  19. @Entry
  20. @Component
  21. struct Index {
  22.   @State zIndexValue:number[]=[1,2,3,4,5,6]
  23.   build() {
  24.       Stack({alignContent:Alignment.Bottom}){
  25.         Button('1').CustomText(300,50,this.zIndexValue[0]).onClick(()=>{
  26.           this.zIndexValue[0]=-this.zIndexValue[0]
  27.         })
  28.         Button('2').CustomText(250,100,this.zIndexValue[1]).onClick(()=>{
  29.           this.zIndexValue[1]=-this.zIndexValue[1]
  30.         })
  31.         Button('3').CustomText(200,200,this.zIndexValue[2]).onClick(()=>{
  32.           this.zIndexValue[2]=-this.zIndexValue[2]
  33.         })
  34.         Button('4').CustomText(150,300,this.zIndexValue[3]).onClick(()=>{
  35.           this.zIndexValue[3]=-this.zIndexValue[3]
  36.         })
  37.         Button('5').CustomText(100,400,this.zIndexValue[4]).onClick(()=>{
  38.           this.zIndexValue[4]=-this.zIndexValue[4]
  39.         })
  40.         Button('6').CustomText(50,500,this.zIndexValue[5]).onClick(()=>{
  41.           this.zIndexValue[5]=-this.zIndexValue[5]
  42.         })
  43.       }.height('100%').width('100%').backgroundColor(Color.Pink)
  44.   }
  45. }
复制代码
　　效果图：

　　点击按钮可以更改按钮的叠放次序。
　　四、Grid（层叠结构组件）
　　Grid组件用于控制网格的结构和样式。
　　常用的属性：
　　① columnsTemplate：设置网格结构的列数及每列的宽度比例。比方，'1fr 1fr 1fr'表示将容器分为三列，每列占据雷同的宽度。
　　② rowsTemplate：设置网格结构的行数及每行的高度比例。比方，'1fr 1fr'表示将容器分为两行，每行占据雷同的高度。
　　③ columnsGap：设置列与列之间的间距。
　　④ rowsGap：设置行与行之间的间距。
　　⑤ width：设置Grid组件的宽度。
　　⑥ height：设置Grid组件的高度。
　　⑦ backgroundColor：设置Grid组件的配景颜色。
　　⑧ scroller：可滚动组件的控制器，用于与可滚动组件进行绑定（可选）。
　　GridItem是Grid的子组件，用于在网格中定义具体的项目（即单位格的内容）。GridItem组件支持多种属性，用于控制项目的结构和样式。
　　常用属性：
　　① rowStart、rowEnd：指定当前GridItem元素的起始行号和尽头行号。
　　② columnStart、columnEnd：指定当前GridItem元素的起始列号和尽头列号。
　　测试代码：
  1. function getRandomColor() {
  2.     const letters :string= '0123456789ABCDEF';
  3.     let color:string = '#';
  4.     for (let i = 0; i < 6; i++) {
  5.       let Itemp:number=Math.floor(Math.random() * 16)
  6.       color += letters.substr(Itemp,1);
  7.     }
  8.     return color;
  9. }
  10. @Entry
  11. @Component
  12. struct Index {
  13.   @State numbers: string[] = ['1', '2', '3', '4','5','6'];
  15.   build() {
  16.     Column() {
  17.       Grid() {
  18.         ForEach(this.numbers, (item: string, index: number) => {
  19.           GridItem() {
  20.                 Text(item)
  21.                   .fontSize(16)
  22.                   .backgroundColor(getRandomColor())
  23.                   .width('50%')
  24.                   .height('50%')
  25.                   .textAlign(TextAlign.Center)
  26.                   .padding(20)
  27.                   .margin(20)
  28.           }
  29.           .backgroundColor(getRandomColor())
  30.         })
  31.       }.columnsTemplate('1fr 1fr').rowsTemplate('1fr 1fr 1fr')
  32.     }
  33.   }
  34. }
复制代码
　　效果图：


　　实际在使用结构组件中，经常多种容器组件结合起来使用。
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4