HarmonyOS 鸿蒙Next怎么排版才能让Progress放到屏幕中心啊row和Column都不太好用

HarmonyOS 鸿蒙Next怎么排版才能让Progress放到屏幕中心啊row和Column都不太好用

54f7d70e-4015-4b31-8809-cedaebeb0152.png

Column() {
  Column() {

  }.height('40%')
  Column() {
    Progress({ value: 50, total: 50, type: ProgressType.Ring })
      .width(50)
      .height(50)
      .color($r('app.color.green_default'))
  }.width('100%').backgroundColor(Color.Green).height('20%').alignItems(HorizontalAlign.Center)

  Column() {

  }.height('40%')
}.alignItems(HorizontalAlign.Center).width('100%').height('100%').backgroundColor(Color.Red)

怎么才能在红色中心放个加载条呢。。。 感觉好费劲。。。


更多关于HarmonyOS 鸿蒙Next怎么排版才能让Progress放到屏幕中心啊row和Column都不太好用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

本地这样，是居中的

Column() {
  Progress({ value: 50, total: 50, type: ProgressType.Ring })
    .width(50)
    .height(50)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-container-column-V13#justifycontent8

参数名 类型 必填 说明
value FlexAlign 是 子组件在垂直方向上的对齐格式。
默认值：FlexAlign.Start

更多关于HarmonyOS 鸿蒙Next怎么排版才能让Progress放到屏幕中心啊row和Column都不太好用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在对应Column配合使用.alignItems和.justifyContent来对Column内的子组件进行水平和垂直方向上的对齐。

Column() {
  Column() {

  }.height('40%')
  Column() {
    Progress({ value: 50, total: 50, type: ProgressType.Ring })
      .width(50)
      .height(50)
      .color($r('app.color.green_default'))
  }
  .width('100%')
  .backgroundColor(Color.Green)
  .height('20%')
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)

  Column() {

  }.height('40%')
}.alignItems(HorizontalAlign.Center).width('100%').height('100%').backgroundColor(Color.Red)

配合使用：

.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)

在HarmonyOS鸿蒙Next中，要将Progress组件居中显示，可以使用Stack布局。Stack允许子组件堆叠在一起，并通过Align属性来控制子组件的位置。以下是一个示例代码，展示如何将Progress组件居中：

@Entry
@Component
struct CenterProgress {
  build() {
    Stack({ alignContent: Align.Center }) {
      Progress({ value: 50 })
        .width(100)
        .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

在这个示例中，Stack布局的alignContent属性设置为Align.Center，使得Progress组件在水平和垂直方向上都居中。通过设置Stack的宽度和高度为100%，确保它占据整个屏幕空间。

回到顶部