HarmonyOS 鸿蒙Next ArkTs 实现 FlowLayout布局，示例代码

@Entry @Component export struct FlowLayout { tags: string[] = [‘中国’, ‘阿富汗’, ‘阿联酋’, ‘阿曼’, ‘阿塞拜疆’, ‘巴基斯坦’, ‘巴勒斯坦’, ‘巴林’, ‘不丹’, ‘朝鲜’, ‘菲律宾’, ‘格鲁吉亚’, ‘哈萨克斯坦’, ‘韩国’]

build() { Scroll() { Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) { if (this.tags && this.tags.length > 0) { ForEach(this.tags, (tag: string, index: number) => { Text(tag) { } .padding({ top: 5, bottom: 5, left: 10, right: 10 }) .margin(5) .borderRadius(5) .borderStyle(BorderStyle.Solid) .borderWidth(1) .borderColor($r(‘app.color.red_d5’)) }) } } } } }

更多关于HarmonyOS 鸿蒙Next ArkTs 实现 FlowLayout布局，示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 1楼•9 天前

在HarmonyOS鸿蒙Next中，使用ArkTS实现FlowLayout布局可以通过Flex组件结合Wrap组件来实现。以下是一个简单的示例代码：

import { Flex, Text, Wrap } from '@ohos/arkui';

@Entry
@Component
struct FlowLayoutExample {
  build() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Wrap({ spacing: 10, runSpacing: 10 }) {
        Text('Item 1').fontSize(20).padding(10).backgroundColor('#FFD700')
        Text('Item 2').fontSize(20).padding(10).backgroundColor('#FF4500')
        Text('Item 3').fontSize(20).padding(10).backgroundColor('#ADFF2F')
        Text('Item 4').fontSize(20).padding(10).backgroundColor('#00BFFF')
        Text('Item 5').fontSize(20).padding(10).backgroundColor('#FF69B4')
        Text('Item 6').fontSize(20).padding(10).backgroundColor('#8A2BE2')
        Text('Item 7').fontSize(20).padding(10).backgroundColor('#FF6347')
        Text('Item 8').fontSize(20).padding(10).backgroundColor('#7CFC00')
        Text('Item 9').fontSize(20).padding(10).backgroundColor('#FFA07A')
        Text('Item 10').fontSize(20).padding(10).backgroundColor('#20B2AA')
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

在这个示例中，Wrap组件用于实现流式布局，spacing和runSpacing属性分别控制元素之间的水平和垂直间距。Flex组件用于将Wrap组件居中对齐。每个Text组件代表一个流式布局中的项，设置了不同的背景颜色和字体大小。

更多关于HarmonyOS 鸿蒙Next ArkTs 实现 FlowLayout布局，示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 2楼•9 天前

在HarmonyOS（鸿蒙Next）中，使用ArkTS实现FlowLayout布局可以通过Flex组件结合FlexWrap.Wrap属性来实现。以下是一个简单的示例代码：

import { Flex, FlexWrap, Text, Column } from '@ohos.arkui';

@Entry
@Component
struct FlowLayoutExample {
  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
        Text('Item 1').fontSize(16).padding(10).backgroundColor('#f0f0f0')
        Text('Item 2').fontSize(16).padding(10).backgroundColor('#e0e0e0')
        Text('Item 3').fontSize(16).padding(10).backgroundColor('#d0d0d0')
        Text('Item 4').fontSize(16).padding(10).backgroundColor('#c0c0c0')
        Text('Item 5').fontSize(16).padding(10).backgroundColor('#b0b0b0')
      }
      .width('100%')
      .padding(10)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在这个示例中，Flex组件设置了wrap: FlexWrap.Wrap，使得子组件在超出容器宽度时自动换行，从而实现类似FlowLayout的效果。