容器组件：弹性布局容器，计数器组件（HarmonyOS学习第四课【4.3】）

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量1.2k 收藏 30
点赞数 21
分类专栏： HarmonyOS 文章标签： java 开发语言 华为 harmonyos typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58213084/article/details/138865554
版权

弹性布局容器

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

说明

  • 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
  • Flex组件主轴默认不设置时撑满父容器，Column、Row组件主轴不设置时默认是跟随子节点大小。

权限列表

无

子组件

可以包含子组件。

接口

Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

标准Flex布局容器。详细指导请参考弹性布局。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名

参数类型

必填

默认值

参数描述

direction

FlexDirection

否

FlexDirection.Row

子组件在Flex容器上排列的方向，即主轴的方向。

wrap

FlexWrap

否

FlexWrap.NoWrap

Flex容器是单行/列还是多行/列排列。

说明：

在多行布局时，通过交叉轴方向，确认新行堆叠方向。

justifyContent

FlexAlign

否

FlexAlign.Start

所有子组件在Flex容器主轴上的对齐格式。

alignItems

ItemAlign

否

ItemAlign.Start

所有子组件在Flex容器交叉轴上的对齐格式。

alignContent

FlexAlign

否

FlexAlign.Start

交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

 

 

ArkUI 开发框架为了方便开发者实现灵活的页面布局方式，提供了弹性布局 Flex ，它用来为盒装模型提供最大的灵活性。 Flex 和 Row 、 Column 组件一样，也有主轴和纵轴之分。

Flex定义介绍

interface FlexInterface {
  (value?: FlexOptions): FlexAttribute;
}

declare interface FlexOptions {
  direction?: FlexDirection;
  wrap?: FlexWrap;
  justifyContent?: FlexAlign;
  alignItems?: ItemAlign;
  alignContent?: FlexAlign;
}

  • value：设置子组件的排列样式， FlexOptions 定义了以下几种样式：

    • direction：设置子组件的的排列方向即主轴方向， FlexDirection 定义了以下4种排列方式：

      • Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。

Flex({direction: FlexDirection.Row}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

 样例运行结果如下图所示：

RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。

Flex({direction: FlexDirection.RowReverse}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

样式：

Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

5_2_3

 

ColumnReverse：子组件竖直排列，即主轴为垂直方向，起点在下边，子组件由下到上排列。

5_2_4

 样例运行结果如下图所示：

wrap：设置子组件是单行/列还是多行/列排序， FlexWrap 提供了以下3种类型：

  • NoWrap（默认值）：子组件单行/列排序，子组件不允许超出容器。

Wrap：子组件多行/列排序，子组件允许超出容器。

WrapReverse：子组件反向多行/列排序，子组件允许超出容器

Flex({direction: FlexDirection.Row, wrap: FlexWrap.WrapReverse}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
  Text('Text5')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text6')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#cabcab")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

 

justifyContent：设置子组件在主轴上的对齐方式， FlexAlign 提供了以下 6 种对齐方式：

  • Start（默认值）：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

   

Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Center}) {
      Text('Text1')
        .fontSize(16)
        .padding(10)
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .padding(10)
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .padding(10)
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .padding(10)
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)

 

End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。

SpaceBetween： Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。

 

SpaceAround： Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。 

 

SpaceEvenly： Flex 主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

alignItems：设置子组件在纵轴方向上的排列方式， ItemAlign 定义了以下 6 种排列方式：

  • Auto：自动布局，简单样例如下所示：

@Entry
@Component
struct Tanxing {
  @State message: string = 'Hello World'

  build() {
    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Auto}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 50, height: 20})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 60, height: 30})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 70, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 80, height: 50})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)


  }
}

 Start：起始对齐，简单样例如下所示：

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 50, height: 20})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 60, height: 30})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 70, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 80, height: 50})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

 

Center：居中对齐，简单样例如下所示：

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 50, height: 20})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 60, height: 30})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 70, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 80, height: 50})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

 

End：末尾对齐，简单样例如下所示：

Baseline：基线对齐，简单样例如下所示：

Stretch（默认值）：

 

alignContent：当纵轴有额外的空间时，多行内容的对齐方式。该属性仅在 wrap 属性为 Wrap 或者 WrapReverse 时才生效， FlexAlign 定义了以下 6 种对齐方式：

  • Start（默认值）：设置子组件在纵轴方向首部对齐。

 Center：设置子组件在纵轴方向居中对齐。

 End：设置子组件在纵轴方向尾部对齐。

 

SpaceBetween：设置子组件在纵轴方向等间距布局。

 ​​​​​​​

SpaceAround：设置子组件在纵轴方向间距布局，并且首尾子组件到 Flex 的间距是子组件间距的一半。

 SpaceEvenly：设置子组件在纵轴方向等间距布局，并且首尾子组件到 Flex 的间距子组件之间的间距都相等。

官方多种案例：

// xxx.ets
@Entry
@Component
struct FlexExample1 {
  build() {
    Column() {
      Column({ space: 5 }) {
        Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上行布局
          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
        }
        .height(70)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.RowReverse }) { // 子组件在容器主轴上反向行布局
          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
        }
        .height(70)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.Column }) { // 子组件在容器主轴上列布局
          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
        }
        .height(160)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ direction: FlexDirection.ColumnReverse }) { // 子组件在容器主轴上反向列布局
          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
        }
        .height(160)
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%')
  }
}

 

 

示例2

// xxx.ets
@Entry
@Component
struct FlexExample2 {
  build() {
    Column() {
      Column({ space: 5 }) {
        Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ wrap: FlexWrap.Wrap }) { // 子组件多行布局
          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
        }
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ wrap: FlexWrap.NoWrap }) { // 子组件单行布局
          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
        }
        .width('90%')
        .padding(10)
        .backgroundColor(0xAFEEEE)

        Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // 子组件反向多行布局
          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
        }
        .width('90%')
        .height(120)
        .padding(10)
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%')
  }
}

示例3

 

// xxx.ets
@Component
struct JustifyContentFlex {
justifyContent : number = 0;

build() {
Flex({ justifyContent: this.justifyContent }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}
}

@Entry
@Component
struct FlexExample3 {
build() {
Column() {
Column({ space: 5 }) {
Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.Start }) // 子组件在容器主轴上首端对齐

Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.Center }) // 子组件在容器主轴上居中对齐

Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.End }) // 子组件在容器主轴上尾端对齐

Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) // 子组件在容器主轴上均分容器布局，第一个子组件与行首对齐，最后一个子组件与行尾对齐。

Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) // 子组件在容器主轴上均分容器布局，第一个子组件到行首的距离和最后一个子组件到行尾的距离是相邻子组件之间距离的一半。

Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) // 子组件在容器主轴上均分容器布局，子组件之间的距离与第一子组件到行首、最后一个子组件到行尾的距离相等
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
 

 

 

示例4
 

// xxx.ets
@Component
struct AlignItemsFlex {
alignItems : number = 0

build() {
Flex({ alignItems: this.alignItems }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.size({width: '90%', height: 80})
.padding(10)
.backgroundColor(0xAFEEEE)
}
}

@Entry
@Component
struct FlexExample4 {
build() {
Column() {
Column({ space: 5 }) {
Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Auto }) // 子组件在容器交叉轴上首部对齐

Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Start }) // 子组件在容器交叉轴上首部对齐

Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Center }) // 子组件在容器交叉轴上居中对齐

Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.End }) // 子组件在容器交叉轴上尾部对齐

Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Stretch }) // 子组件在容器交叉轴上拉伸填充

Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Baseline }) // 子组件在容器交叉轴上与文本基线对齐
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
 

 

 

示例5
 

 

// xxx.ets
@Component
struct AlignContentFlex {
alignContent: number

build() {
Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
}
.size({ width: '90%', height: 90 })
.padding(10)
.backgroundColor(0xAFEEEE)
}
}

@Entry
@Component
struct FlexExample5 {
build() {
Column() {
Column({ space: 5 }) {
Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.Start }) // 多行布局下子组件首部对齐

Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.Center }) // 多行布局下子组件居中对齐

Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.End }) // 多行布局下子组件尾部对齐

Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) // 多行布局下第一行子组件与列首对齐，最后一行子组件与列尾对齐

Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) // 多行布局下第一行子组件到列首的距离和最后一行子组件到列尾的距离是相邻行之间距离的一半

Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({
wrap: FlexWrap.Wrap,
alignContent: FlexAlign.SpaceEvenly
}) { // 多行布局下相邻行之间的距离与第一行子组件到列首的距离、最后一行子组件到列尾的距离完全一样
Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
Text('3').width('50%').height(20).backgroundColor(0xF5DEB3)
Text('4').width('50%').height(20).backgroundColor(0xD2B48C)
Text('5').width('50%').height(20).backgroundColor(0xF5DEB3)
}
.size({ width: '90%', height: 100 })
.padding({ left: 10, right: 10 })
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
 

 

 

 

计数器组件（Counter）
 

计数器组件，提供相应的增加或者减少的计数操作。
 

说明
 

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 

子组件
 

可以包含子组件。
 

接口
 

Counter()
 

从API version 9开始，该接口支持在ArkTS卡片中使用。
 

属性
 

支持通用属性。
 

事件
 

不支持通用事件和手势， 仅支持如下事件：
 

 
名称
 		 
功能描述
 
 
onInc(event: () => void)
 		 
监听数值增加事件。
 
从API version 9开始，该接口支持在ArkTS卡片中使用。
 
 
onDec(event: () => void)
 		 
监听数值减少事件。
 
从API version 9开始，该接口支持在ArkTS卡片中使用。
 
 

 
 

Counter 定义介绍
 

interface CounterInterface {
  (): CounterAttribute;
}

 

由源码可知，Counter 使用时暂不需要配置额外参数。
 

简单样例如下所示：
 

@Entry @Component struct ComponentTest {
  build() {
    Column() {
      Row() {
        Counter()         // 默认效果

        Counter() {       // 包含一个子组件
          Text('1')       // Text 默认值为 1
            .fontSize(18) // Text 字体大小
        }
      }
      .justifyContent(FlexAlign.SpaceAround)
      .width("100%")
    }
    .width("100%")
    .height("100%")
    .padding(10)
  }
}

 

样例运行结果如下图所示：
 

 

Counter 事件介绍
 

declare class CounterAttribute extends CommonMethod<CounterAttribute> {
  onInc(event: () => void): CounterAttribute;
  onDec(event: () => void): CounterAttribute;
}

 

Counter 没有提供额外的属性方法，只提供了 onInc() 和 onDec() 两个事件回调方法，各方法说明如下所示：
 

  • onInc：数字增加的事件回调。
  • onDec：数字减少的事件回调。
 

Counter 完整样例
 

@Entry
@Component
struct ComponentTes{
  @State value: number = 0

  build() {
    Column() {
      Counter() {
        Text(this.value.toString())
          .fontSize(18)
      }
      .onInc(() => { // 自增操作
        this.value++;
      })
      .onDec(() => { // 自减操作
        this.value--;
      })
    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}
 

官方案例：
 

// xxx.ets
@Entry
@Component
struct CounterExample {
  @State value: number = 0

  build() {
    Column() {
      Counter() {
        Text(this.value.toString())
      }.margin(100)
      .onInc(() => {
        this.value++
      })
      .onDec(() => {
        this.value--
      })
    }.width("100%")
  }
}
 

 


                

        

        

    




    

      

        

            

              
                
                  chenchen-IT
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    21
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    30
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
鸿蒙HarmonyOS实战-ArkUI组件（Flex）

				
			

			

				

					单口相声Jay
				

				

					03-28
					
					1973
					
				

			

		

		

			
				
Flex布局它可以让容器中的子元素具有弹性伸缩性。Flex布局是一种二维布局模型，它可以在任意方向上对元素进行排列，并且可以动态地调整元素的大小和位置，以适应不同的屏幕尺寸和设备。通过使用Flex布局，我们可以实现响应式布局效果，以适应不同的屏幕尺寸和设备。Flex布局主要由容器和项目两个部分组成，容器是需要进行布局的元素，项目是容器中的每个子元素。主轴是Flex容器的主要方向，也是子元素排列的方向，通常设置为水平方向。

			
		

	



                

              
                



	

		

			

				
					
鸿蒙开发Flex、栅格布局详解

				
			

			

				

					Androiddddd的博客
				

				

					01-15
					
					1562
					
				

			

		

		

			
				
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。

			
		

	



                


  
              

                


	

		

			

				
					
鸿蒙开发-UI-布局-弹性布局

				
			

			

				

					中年程序员
				

				

					01-17
					
					1694
					
				

			

		

		

			
				
上文详细学习常见布局方式-层叠布局，学习如何控制层叠布局中子元素的堆叠顺序，在最后的案例中使用Flex容器组件，Flex容器组件是用来做弹性布局的组件，本文详细学习鸿蒙开发弹性布局。本文详细学习常见布局方式-弹性布局，学习弹性布局容器主轴、交叉轴上子元素的顺序方式，同时也学习了弹性布局容器子元素自动伸缩机制，下文将学习相对布局。

			
		

	





	

		

			

				
					
鸿蒙Harmony-弹性布局（Flex）详解

				
			

			

				

					袁震的博客
				

				

					01-18
					
					1200
					
				

			

		

		

			
				
今天是1月18号星期四，农历腊月初八，早安，腊八过了就是年，归家有期，团圆有盼，愿腊八的暖意，驱散过去一年的事与愿违，愿来年日子常新与胜意，又是一年好四季！

			
		

	



		

			
		



	

		

			

				
					
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Flex容器组件

				
			

			

				

					zy0412326的专栏
				

				

					02-26
					
					856
					
				

			

		

		

			
				
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Flex容器组件。

			
		

	





	

		

			

				
					
电工电子技术：53 中规模集成计数器组件.ppt

				
			

			

				

					05-17
				

			

		

		

			
				
电工电子技术：53 中规模集成计数器组件.ppt

			
		

	





	

		

			

				
					
vue框架+element组件：计数器应用

				
			

			

				

					11-08
				

			

		

		

			
				
运行前先在当前文件夹内安装element-plus，命令：npm install element-plus --save vue框架+element组件：计数器应用

			
		

	





	

		

			

				
					
51单片机汇编语言教程：20课单片机定时、计数器实验.zip

				
			

			

				

					01-14
				

			

		

		

			
				
51单片机汇编语言教程：20课单片机定时、计数器实验.zip

			
		

	





	

		

			

				
					
微机原理及应用：第九章 可编程计数器／定时器8253.pdf

				
			

			

				

					06-17
				

			

		

		

			
				
总结来说，8253作为一个多功能的可编程计数器/定时器，其强大的计数和定时能力使得它成为微机系统中不可或缺的组件。通过精心设计的初始化编程，可以实现精确的定时和计数任务，满足各种复杂的系统需求。

			
		

	





	

		

			

				
					
text-counter-react:组件React文本计数器

				
			

			

				

					05-25
				

			

		

		

			
				
文字计数器  :magnifying_glass_tilted_left: 关于该项目 使用create-react-app创建的React项目。 它包含一个组件，该组件计算在文本框中输入并显示给用户的字符数以及预定义的字符数限制。 使用类，构造函数，组件...

			
		

	





	

		

			

				
					
HarmonyOS ArkUI容器类组件-弹性布局容器（Flex）

				
			

			

				

					m0_71263309的博客
				

				

					04-22
					
					262
					
				

			

		

		

			
				
(value?direction?wrap?: FlexWrap;alignItems?value：设置子组件的排列样式，direction：设置子组件的的排列方向即主轴方向，Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

			
		

	





	

		

			

				
					
HarmonyOS4.0系统性深入开发37 改善布局性能

				
			

			

				

					qq_46189388的博客
				

				

					02-26
					
					978
					
				

			

		

		

			
				
Flex为采用弹性布局的容器。容器内部的所有子元素，会自动参与弹性布局。子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸。在单行布局场景下，容器里子组件的主轴尺寸长度总和可能存在不等于容器主轴尺寸长度的情况。例如，三个子组件的宽均为200px，容器宽为500px，当第一个子组件和第二个子组件布局完成后，为了显示第三个子组件，需要给第二个子组件和第三个子组件设置压缩属性，此时第二个子组件会被再布局一次，导致布局效率下降。

			
		

	





	

		

			

				
					
HarmonyOS鸿蒙学习笔记（11）Flex组件alignItems属性说明

				
			

			

				

					菜鸟博客
				

				

					09-20
					
					1146
					
				

			

		

		

			
				
HarmonyOS Flex组件使用说明

			
		

	





	

		

			

				
					
鸿蒙之布局

				
			

			

				

					m0_61305804的博客
				

				

					08-14
					
					206
					
				

			

		

		

			
				
justify-content（左右的位置：center，flex-end）align-items（上下的位置：center，flex-end）它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。grid-template-columns：用来指定列的宽度。grid-template-rows：用来指定行的高度。...

			
		

	





	

		

			

				
					
从零实现HarmonyOS（鸿蒙）运动手表两个游戏的合并

				
			

			

				

					weixin_52542088的博客
				

				

					12-01
					
					1537
					
				

			

		

		

			
				
HarmonyOS（鸿蒙）运动手表游戏app合并
前言
此次博客是深鸿会博主（Zzt_01-23）学习完HarmonyOS（鸿蒙）后，将前两个自行开发的鸿蒙小游戏合并为一个app，两个小游戏分别为黑白翻棋和数字华容道，此处将不再详细讲述这两个小游戏的开发，读者可以自行前往观看相应的博客：从零开发HarmonyOS（鸿蒙）运动手表小游戏——黑白翻棋、从零开发HarmonyOS（鸿蒙）运动手表小游戏——数字华容道，本博客详细讲述了游戏合并的开发思路，适合学习完前两篇博客的读者，使读者能自行将不同的小游戏合并为一

			
		

	





	

		

			

				
					
数据结构与算法-差分数组及应用

				
			

			

				

					qq_36115196的博客
				

				

					06-20
					
					602
					
				

			

		

		

			
				
差分数组： 其实差分数组是创建一个一个辅助数组，用来表示给定数组的变化，一般用来对数组进行区间修改的操作。

			
		

	





	

		

			

				
					
Day43

					
最新发布

				
			

			

				

					m0_67496588的博客
				

				

					06-20
					
					542
					
				

			

		

		

			
				
JSON，Ajax

			
		

	





	

		

			

				
					
Java 中 什么是 lambda 表达式？有什么优点？

				
			

			

				

					liangzai215的专栏
				

				

					06-13
					
					976
					
				

			

		

		

			
				
但是，Lambda 表达式绝对不是 Java 8 的银弹，它在消除代码冗余、支持并发这两方面表现优秀，但是在其他方面并未有太多贡献，所以我们在编程的时候，还是需要结合实际情况，灵活选择使用。Lambda表达式在Java 8中是非常强大的工具，但是需要注意的是，Lambda并并不适合所有情况，它主要适用于函数式编程，处理集合操作和Stream操作，在某些具体的业务逻辑操作中就不一定会产生预期的效果。代码块：是 Lambda 表达式需要执行的功能，可以是一行代码，也可以是复杂的多行代码。

			
		

	





	

		

			

				
					
基于springboot的青年公寓服务平台源码数据库

				
			

			

				

					s123456sj的博客
				

				

					06-16
					
					1217
					
				

			

		

		

			
				
本青年公寓服务平台分为管理员还有用户两个权限，管理员可以管理用户的基本信息内容，可以管理房屋投诉信息以及房屋投诉的租赁信息，能够与用户进行相互交流等操作，用户可以查看房屋信息，可以查看房屋投诉以及查看管理员回复信息等操作。

			
		

	





	

		

			

				
					
在第二天凌晨00:00:00，将redis计数器清空：

				
			

			

				

					02-06
				

			

		

		

			
				
可以使用 `DEL` 命令来删除计数器的键：

```
DEL key
```

如果要在每天凌晨 00:00:00 清空计数器，可以使用 Redis 的 `EXPIRE` 命令为计数器设置过期时间，让它每天凌晨过期，然后在程序中设置一个定时任务，在凌晨 00:00:00 时执行 `DEL` 命令清空计数器：

```
EXPIRE key 86400
```

这样就可以在每天凌晨 00:00:00 时自动清空计数器了。

注意：

- `DEL` 命令可以删除多个键，所以可以用它来删除多个计数器。
- `EXPIRE` 命令设置的是过期时间，单位是秒。在上面的例子中，设置的是 86400 秒，也就是 24 小时。所以在每天的凌晨 00:00:00 时，计数器就会过期。
- 如果计数器的值是在程序中维护的，则可以在程序中直接将计数器的值设置为 0，而不用删除计数器的键。


			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值