HarmonyOS应用开发学习-ArkUI-容器组件

34 阅读 0 评论 0 点赞

ArkUI-容器组件

1 ROW组件

沿水平方向布局容器。可以包含子组件。

Row(value?:{space?:string | number})

参数：

参数名	参数类型	必填	默认值	参数描述
space	string \| number	否	0	横向布局元素间距

属性：

名称	参数类型	默认值	描述
alignItems	VerticalAlign	VerticalAlign.Center	在垂直方向上子组件的对齐格式，
justifycontent	FlexAlign	FlexAlign.Start	设置子组件在水平方向上的对齐格式。

示例：

//@Entry装饰器 入口组件
@Entry
  //@Component装饰器 自定义组件（一个一个独立的模块）
@Component
struct Index { //自定义组件 Index组件的名称
  @State title: string = "你好！";
  build(){
    //build中的row组件只能写一个，多个写在row内部
    // {space:10} 子组件的间距
    Row({space:10}){
      //添加其他组件
      // Button('1')
      // Button('2')
      // Button('3')
      // 嵌套Row()
      Row()
        .width('30%')
        .height(50)
        .backgroundColor('red')
      Row()
        .width('30%')
        .height(50)
        .backgroundColor('green')
      Row()
        .width('30%')
        .height(50)
        .backgroundColor('blue')
    }
      .width('100%')
      .height(200)
      .border({width:2})
      .alignItems(VerticalAlign.Top)
      //垂直方向的对齐格式VerticalAlign.top /VerticalAlign.center /VerticalAlign.bottom
      .justifyContent(FlexAlign.SpaceEvenly)
      //水平方向的对齐方式
      // FlexAlign.Start FlexAlign.center FlexAlign.End 左中右
      //FlexAlign.SpaceBetween 两端对齐
      //FlexAlign.SpaceAround 左右间距相同
      //FlexAlign.SpaceEvenly 间隔相同
  }
}

2 Column组件

沿垂直方向布局的容器。可以包含子组件。

Column(value?:{space?:string | number})

参数：

参数名	参数类型	必填	默认值	参数描述
space	string \| number	否	0	纵向布局元素间距

属性：

名称	参数类型	默认值	描述
alignltems	HorizontalAlign	VerticalAlign.Center	设置子组件在水平方向上的对齐格式
justifyContent8+	FlexAlign	FlexAlign.Start	设置子组件在垂直方向上的对齐格式

示例：

@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
  @State title: string = "hello world";
  //UI描述
  build(){
    Column({space:10}){//space:10 设置子组件的间距
      //添加子组件
      Button('click1')
      Button('click2')
      Button('click3')
    }
      .width('100%')
      .height(200)
      .border({width:2})
      //   添加对齐方式（水平方向对齐）
      // 左对齐
      .alignItems(HorizontalAlign.Start)
      // 居中对齐（默认值）
      // .alignItems(HorizontalAlign.Center)
      // 右对齐
      // .alignItems(HorizontalAlign.End)
      //添加对齐方式-垂直方向对齐
      // 上对齐
      .justifyContent(FlexAlign.Start)
      // 居中对齐
      .justifyContent(FlexAlign.Center)
      // 下对齐
      .justifyContent(FlexAlign.End)
      // 两端对齐
      .justifyContent(FlexAlign.SpaceBetween)
      // 元素左右外边距相等
      .justifyContent(FlexAlign.SpaceAround)
       // 元素所有间距相同
      .justifyContent(FlexAlign.SpaceEvenly)
  }
}

3 Flex组件

以弹性方式布局子组件的容器组件。

子组件可以包含子组件。

接口
Flex(value?:{ direction?: FlexDirection, wrap?: Flexwrap, justifycontent?.FlexAlign,alignItems?: ItemAlign,aligncontent?: FlexAlign })

参数：

参数名	参数类型	必填	默认值	参数描述
direction	FlexDirection	否	FlexDirection.Row	子组件在Flex容器上排列的方向，即主轴的方向。
wrap	FlexWrap	否	FlexWrap.NoWrap	Flex容器是单行/列还是多行列排列。
justifyContent	FlexAlign	否	FlexAlign.Start	子组件在Flex容器主轴上的对齐格式。
alignltems	ItemAlign	否	ltemAlign.Stretch	子组件在Flex容器交叉轴上的对齐格式。
alignContent	FlexAlign	否	FlexAlign.Start	交叉轴中有额外的空间时多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效

3.1 direction

设置子组件在flex容器中的排列方式

语法：

 Flex({direction:FlexDirection.属性值}){
     
 }

属性值：

Row：水平方向排列

Column：垂直方向排列

RowReverse：水平方向逆向排列

ColumnReverse：垂直方向逆向排列

示例：

@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
  @State title: string = "hello world";
  //UI描述
  build(){
    Column({space:10}) {
      //子组件在Flex容器上排列的方向，即主轴的方向
      // direction
      // direction:FlexDirection.Row 横向排列
      // direction:FlexDirection.Column 纵向排列
      Flex({direction:FlexDirection.Row}){
        Text('1')
          .width('20%')
          .height(50)
          .backgroundColor('red')
        Text('2')
          .width('20%')
          .height(50)
          .backgroundColor(0x904523)
        Text('3')
          .width('20%')
          .height(50)
          .backgroundColor('green')
        Text('4')
          .width('20%')
          .height(50)
          .backgroundColor(0x123458)
      }
        .width('90%')
        .height(100)
        // 单词
        .backgroundColor('red')
        // #16进制
        .backgroundColor('#F00')
        // 0X + 16进制
        .backgroundColor(0X0F0)
    }
      .width('100%')
      .margin({top:10})
  }
}

3.2 wrap

设置子组件在flex容器中的排列方式

语法：

Flex({wrap:FlexWrap.属性值}){
     
 }

属性值：

Warp：换行

NoWarp:不换行

WrapReverse 换行逆向

示例：

@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
  @State title: string = "hello world";
  //UI描述
  build(){
    Column({space:10}) {
      // warp 设置flex容器单行/多行排列
      // wrap:FlexWrap.Wrap 换行
      //wrap:FlexWrap.NoWrap 不换行
      // wrap:FlexWrap.WrapReverse 换行逆向
      Flex({wrap:FlexWrap.WrapReverse}){
        Text('1')
          .width('50%')
          .height(50)
          .backgroundColor('red')
        Text('2')
          .width('20%')
          .height(50)
          .backgroundColor(0x904523)
        Text('3')
          .width('20%')
          .height(50)
          .backgroundColor('green')
        Text('4')
          .width('20%')
          .height(50)
          .backgroundColor(0x123458)
      }
        .width('90%')
        .height(100)
        // 单词
        .backgroundColor('red')
        // #16进制
        .backgroundColor('#F00')
        // 0X + 16进制
        .backgroundColor(0X0F0)
    }
      .width('100%')
      .margin({top:10})
  }
}

3.3 justifyContent

设置子组件在flex容器中的主轴的对齐方式

语法：

Flex({justifyContent:FlexAlign.属性值}){
     
 }

属性值：

Start 顶部对齐
Center 居中对齐
End 尾部对齐
SpaceBetween 两端对齐
SpaceAround 左右外边距相同
SpaceEvenly 间距相同

示例：

@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
  @State title: string = "hello world";
  //UI描述
  build(){
    Column({space:10}) {
      // justifyContent 设置flex容器在主轴的对齐方式
      // justifyContent:FlexAlign.Start 顶部对齐
      // justifyContent:FlexAlign.Center 居中对齐
      // justifyContent:FlexAlign.End 尾部对齐
      // justifyContent:FlexAlign.SpaceBetween 两端对齐
      // justifyContent:FlexAlign.SpaceAround 左右外边距相同
      // justifyContent:FlexAlign.SpaceEvenly 间距相同
      Flex({justifyContent:FlexAlign.SpaceEvenly}){
        Text('1')
          .width('20%')
          .height(50)
          .backgroundColor('red')
        Text('2')
          .width('20%')
          .height(50)
          .backgroundColor(0x904523)
        Text('3')
          .width('20%')
          .height(50)
          .backgroundColor('green')
        Text('4')
          .width('20%')
          .height(50)
          .backgroundColor(0x123458)
      }
        .width('90%')
        .height(100)
        // 单词
        .backgroundColor('red')
        // #16进制
        .backgroundColor('#F00')
        // 0X + 16进制
        .backgroundColor(0X0F0)
    }
      .width('100%')
      .margin({top:10})
  }
}

3.4 alignltems

设置子组件在flex容器中的交叉轴的对齐方式

语法：

Flex({alignItems:ItemAlign.属性值}){
     
 }

属性值：

Start 顶部对齐
Center 居中对齐
End 底部对齐
Stretch 伸展，拉伸到容器尺寸

示例：

@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
  @State title: string = "hello world";
  //UI描述
  build(){
    Column({space:10}) {
      // alignltems 设置子组件在flex容器中的交叉轴的对齐方式
      // alignItems:ItemAlign.Start 顶部对齐
      // alignItems:ItemAlign.Center 居中对齐
      // alignItems:ItemAlign.End  底部对齐
      // alignItems:ItemAlign.Stretch 伸展，拉伸到容器尺寸
      Flex({alignItems:ItemAlign.Stretch}){
        Text('1')
          .width('20%')
          .height(30)
          .backgroundColor('red')
        Text('2')
          .width('20%')
          .height(40)
          .backgroundColor(0x904523)
        Text('3')
          .width('20%')
          .height(50)
          .backgroundColor('green')
      }
        .width('90%')
        .height(100)
        // 单词
        .backgroundColor('red')
        // #16进制
        .backgroundColor('#F00')
        // 0X + 16进制
        .backgroundColor(0X0F0)
    }
      .width('100%')
      .margin({top:10})
  }
}

4 List

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

子组件
包含ListItem子组件

接口
List(value?:{space?: number | string, initialIndex?: number, scroller?:Scro11er})

5 ListItem

6 Tabs

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

子组件
包含子组件Tabcontent。

接口说明

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?:Tabscontro1ler})

参数:

参数名	参数类型	必填	默认值	参数描述
barPosition	BarPosition	否	BarPosition.Start	指定页签位置来创建Tabs容器组件。
index	number	否	0	指定初次初始页签索引。
controller	TabsController	否	-	设置Tabs控制器。

BarPosition枚举说明

名称	描述
Start	vertical属性方法设置为true时，页签位于容器左侧;vertical属性方法设置为false时，页签位于容器顶部。
End	vertical属性方法设置为true时，页签位于容器右侧;vertical属性方法设置为false时，页签位于容器底部。

属性

不支持触摸热区设置。

名称	参数类型	默认值	描述
vertical	boolean	false	设置为false是为横向Tabs，设置为true时为纵向Tabs。
scrollable	BarMode	true	设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。
barMode	BarMode	BarMode.Fixed	TabBar布局模式，具体描述见BarMode枚举说明。
barWidth	Length	-	TabBar的宽度值。
barHeight	Length	-	TabBar的高度值。
animationDuration	number	200	TabContent滑动动画时长,

BarMode枚举说明

名称	描述
Scrollable	TabBar使用实际布局宽度,超过总长度后可滑动。
Fixed	所有TabBar平均分配宽度。

事件

名称

描述

onChange(event: (index: number)=>

void)

Tab页签切换后触发的事件。-index:tab标签的索引值。

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页签切换。

导入对象

controller:TabsController = new TabsController()

changeindex

控制Tabs切换到指定页签

changelndex(value: number): void

7 TabContent

仅在Tabs中使用，对应一个切换页签的内容视图。

接口
Tabcontent()

属性

名称	参数类型	描述
tabBar	string \| Resource \| {icon?:string \| Resource,text?:string \| Resource} \| CustomBuilder8+	设置TabBar上显示内容。CustomBuilder:构造器，内部可以传入组件(API8版本以上适用)。说明:如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。

8 Swiper

滑块视图容器，提供子组件滑动轮播显示的能力。

子组件
可以包含子组件。

接口
Swiper(controller?:SwiperController)

参数

参数名	参数类型	必墳	参数描述
controller	SwiperController	否	给组件绑定一个控制器，用来控制组件翻页

属性

名称	参数类型	描述
index	number	设置当前在容器中显示的子组件的索引值。默认值:0
autoPlay	boolean	子组件是否自动播放，自动播放状态下导航点不可操作。默认值:false
interval	number	使用自动播放时播放的时间间隔，单位为毫秒。默认值:3000
indicator	boolean	是否启用导航点指示器。默认值:true
loop	boolean	是否开启循环。设置为true时表示开启循环，在LazyForEach懒循环加载模式下加载的组件数量建议大于5个。默认值:true
duration	number	子组件切换的动画时长，单位为毫秒。默认值:400
vertical	boolean	是否为纵向滑动。默认值:false
itemSpace	number string	设置子组件与子组件之间间隙。默认值:0
displayMode	SwiperDisplayMode	设置子组件显示模式。默认值:SwiperDisplayMode.Stretch
cachedCount8+	number	设置预加载子组件个数。默认值:1
disableSwipe8+	boolean	禁用组件滑动切换功能，默认值:false
displayCount8+	number\|string	设置一页中显示子组件的个数，设置为“auto”时等同于 SwiperDisplayMode.AutoLinear的显示效果。默认值:1
effectMode8+	EdgeEffect	设置滑动到边缘时的显示效果。默认值:EdgeEffect.Spring
curve8+	Curve\|string	设置Swiper的动画曲线，默认为淡入淡出曲线
indicatorStyle8+	{left?: Length,top?:Length,right?:Length,bottom?: Length,size?:Length,mask?: boolean,color?:ResourceColor,selectedColor?:ResourceColor}	设置导航点样式:-left: 设置导航点距离Swiper组件左边的距离。- top: 设置导航点距离Swiper组件顶部的距离。-right: 设置导航点距离Swiper组件右边的距离。-bottom:设置导航点距离Swiper组件底部的距离。-size:设置导航点的直径。-mask: 设置是否显示导航点蒙层样式。一color: 设置导航点的颜色。-selectedcolor:设置选中的导航点的颜色

9 Grid

网格容器，由“行”和“列”分割的单元格所组成，通过指定”项目”所在的单元格做出各种各样的布局。

子组件
包含GridItem子组件。
接口
Grid(scroller?:scroller)

参数：

参数名	参数类型	必填	参数描述
scroller	Scroller	否	可滚动组件的控制器，用于与可滚动组件进行绑定

属性

名称	参数类型	描述
columnsTemplate	string	设置当前网格布局列的数量，不设置时默认1列。例如,"1fr 1fr 2fr'是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。默认值:'1fr'
rowsTemplate	string	设置当前网格布局行的数量，不设置时默认1行。例如,"1fr 1fr 2fr”是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。默认值:'1fr
columnsGap	Length	设置列与列的间距。默认值:0
rowsGap	Length	设置行与行的间距，默认值:0
scrollBar	BarState	设置滚动条状态。默认值:BarState.0ff
scrollBarColor	string \| number \| Color	设置滚动条的颜色。
scrollBarWidth	string \| number	设置滚动条的宽度。
cachedCount	number	设置预加载的Gridltem的数量，具体使用可参考减少应用白块说明。默认值:1
editMode8+	boolean	是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部Gridltem。默认值:false

10 GridItem

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » HarmonyOS应用开发学习-ArkUI-容器组件

点赞(0) 打赏

本文分类：文章资讯
本文标签：HarmonyOS应用开发学习-ArkUI-容器组件
浏览次数：34 次浏览
本文链接：https://freeymw.com/article/22796.html

上一篇 > rabbitmq镜像集群搭建
下一篇 > 【赵渝强老师】Spark SQL的数据模型：DataFrame

评论列表共有 0 条评论

暂无评论

HarmonyOS应用开发学习-ArkUI-容器组件

ArkUI-容器组件

1 ROW组件

2 Column组件

3 Flex组件

3.1 direction

3.2 wrap

3.3 justifyContent

3.4 alignltems

4 List

5 ListItem

6 Tabs

7 TabContent

8 Swiper

9 Grid

10 GridItem

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复