当前位置：首页 > article >正文

鸿蒙应用开发之流式网络布局

article 2025/1/20 23:55:34

在移动应用开发过程中，经常会遇到需要开发流式网络布局的情况，即大家平时所说的自动换行布局。比如在搜索页面，经常会看到猜你想搜，如下图所示。

在HarmonyOS开发中，实现流式网络布局需要用到Flex组件的wrap属性，并且为了方便在其他项目中使用，我们需要将流式网络布局拆分成一个单独的组件，代码如下。

@Component
export default struct FlowlayoutContainer {
   flowArr: string[]=[]
  build() {
    Scroll() {
      Flex({justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap}) {
        if (this.flowArr.length > 0) {
          ForEach(this.flowArr,
            (item:string) => {
              Text(`${item}`)
                .fontSize(14)
                .backgroundColor('#0D182431')
                .borderRadius(25)
                .padding({top: 5, bottom: 5, right: 10, left: 10})
                .margin({top: 5, right: 10})
                .textOverflow({overflow: TextOverflow.Ellipsis})
                .maxL

查看全文

http://www.kler.cn/a/272460.html