鸿蒙UI开发

TypeScript
//左右定宽
Row() {
  Text("健康使用手机")
    .fontSize(16)
    .width(135)
  Blank()
  Toggle({ type: ToggleType.Switch })
    .width(36)
}
.borderRadius(12)
.padding({ left: 13, right: 13 })
.backgroundColor('#FFFFFF')
.width('100%')

TypeScript
//layoutWeight
//左右不定宽，
  Row() {
    ...
    Text("我的宽度占剩余的宽度"+"111111111111")
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
    ...
  }
  .layoutWeight(1)

  Text("我的宽度不固定")
    .textAlign(TextAlign.End)
    //这个margin自我调整，一般为做组件所有icon的宽度和
    .margin({ left: 54 })
}
.width('100%')

TypeScript
//不换行
Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
  ForEach(this.list, () => {
    this.Item()
  })
}

//换行
Flex({ justifyContent: FlexAlign.Center ,wrap:FlexWrap.Wrap}) {
  ForEach(this.list, () => {
    this.Item()
  })
}

TypeScript
Scroll() {
  Row({ space: 10 }) {
    ForEach(this.appList, () => {
      Column() {
        Image($r('app.media.icon'))
          .width(48)
          .height(48)
        Text($r('app.string.show_app_name'))
          .fontSize(12)
          .textAlign(TextAlign.Center)
      }.width(80).height(102)
    })
  }
}
.scrollable(ScrollDirection.Horizontal)
.width("100%")

TypeScript
//核心代码
private breakpoints: BreakpointEntity[] = [
  { name: 'xs', size: 0 }, { name: 'sm', size: 320 },
  { name: 'md', size: 600 }, { name: 'lg', size: 840 }
]

/**
 * 更新当前断点
 * 当传入的断点与当前断点不同时，更新当前断点并持久化
 */
private updateCurrentBreakpoint(breakpoint: string) {
  if (this.currentBreakpoint !== breakpoint) {
    this.currentBreakpoint = breakpoint;
    AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint);
    console.log('on current breakpoint: ' + this.currentBreakpoint);
  }
}

/**
 * 注册断点监听器
 * 为每个断点创建媒体查询监听器，当屏幕尺寸匹配时，更新当前断点
 */
public register() {
  this.breakpoints.forEach((breakpoint: BreakpointEntity, index) => {
    let condition :string = '';
    // 监听句柄，反应视窗宽度和breakpoint.size的关系
    if (index === this.breakpoints.length - 1) {
      condition = '(' + breakpoint.size + 'vp<=width' + ')';
    } else {
      condition = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)';
    }
    console.log(condition);
    // breakpoint.size vp <= width 的条件改变时触发回调，传递此时视窗大小
    breakpoint.mediaQueryListener = mediaQuery.matchMediaSync(condition);
    breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
      if (mediaQueryResult.matches) {
        this.updateCurrentBreakpoint(breakpoint.name);
      }
    })
  })
}

TypeScript
GridRow() {
  GridCol({ span: { sm: 12, md: 6, lg: 6 } }) {
    Text("图片内容")
  }
  .width("100%")
  .height("50%")
  .backgroundColor(Color.Red)
  GridCol({ span: { sm: 12, md: 6, lg: 6 } }) {
      Text("文字标题")
  }
  .width("100%")
  .height("50%")
  .backgroundColor(Color.Blue)
}

TypeScript
Scroll() {
  GridRow() {
    ForEach([0, 1, 2, 3, 4, 5, 6, 7], () => {
      GridCol({ span: { sm: 12, md: 6, lg: 6 } }) {
        Column() {
          RepeatItemContent()
        }
      }
    })
  }
}

TypeScript
@State needWrap: boolean = true

build() {
  GridRow() {
    // 第一行布局
    GridCol({ span: { sm: 12, md: 6, lg: 7 } }) {
      Row() {
        Text($r('app.string.recommended')).fontSize(24)
        Blank()
        Image($r('app.media.ic_public_more'))
          .width(32)
          .height(32)
          .visibility(this.needWrap ? Visibility.Visible : Visibility.None)
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
    }
    // 第二行布局
    GridCol({ span: { sm: 12, md: 6, lg: 5 } }) {
      Flex({ alignItems: ItemAlign.Center }) {
        Search({ placeholder: '猜您喜欢: 万水千山' })
        Image($r('app.media.audio_fm'))
          .width(32)
          .height(32)
        Image($r('app.media.ic_public_more'))
          .width(32)
          .height(32)
          .visibility(this.needWrap ? Visibility.None : Visibility.Visible)
      }
    }//控制显隐多余元素
  }.onBreakpointChange((breakpoint: string) => {
    if (breakpoint === 'sm') {
      this.needWrap = true
    } else {
      this.needWrap = false
    }
  })
}

TypeScript
// 当前折叠屏状态（若当前为折叠屏设备才有效）
@State curFoldStatus: display.FoldStatus = display.getFoldStatus();
if (display.isFoldable()) {
  // 监听折叠屏状态变更，更新折叠态
  display.on('foldStatusChange', (curFoldStatus: display.FoldStatus) => {
    this.curFoldStatus = curFoldStatus;
  })
}

build() {
   // 折叠屏UI展示
   if (display.isFoldable()) {
       ...
     }
   } else { // 非折叠屏UI展示
       ...
     }
   }
}