3.7：显隐设置

3.7.1：显隐设置

export declare class CommonMethod<T> {
  visibility(value: Visibility): T;
}

declare enum Visibility {
    Visible,
    Hidden,
    None
}

设置组件的显示和隐藏， Visibility 类型说明如下：

• Visible（默认值）：组件显示在页面上。
• Hidden：组件在屏幕上占位但是不显示。
• None：组件在屏幕上不显示也不占用位置。

简单样例如下图所示：

Row() {
  Text()
    .height(30)
    .width(120)
    .backgroundColor("#aabbcc")
    .layoutWeight(1)

  Text()
    .height(30)
    .backgroundColor("#aaccbb")
    .visibility(Visibility.Visible) // 设置默认值Visible
    .layoutWeight(1)

  Text()
    .height(30)
    .backgroundColor(Color.Pink)
    .layoutWeight(1)
}

Row() {
  Text()
    .height(30)
    .width(120)
    .backgroundColor("#aabbcc")
    .layoutWeight(1)

  Text()
    .height(30)
    .backgroundColor("#aaccbb")
    .visibility(Visibility.Hidden) // 设置Hidden，不在界面显示但是还占着位置
    .layoutWeight(1)

  Text()
    .height(30)
    .backgroundColor(Color.Pink)
    .layoutWeight(1)
}

Row() {
  Text()
    .height(30)
    .backgroundColor("#aabbcc")
    .layoutWeight(1)

  Text()
    .height(30)
    .visibility(Visibility.None) // 设置None，不在界面上显示
    .backgroundColor("#aaccbb")
    .layoutWeight(1)

  Text()
    .height(30)
    .backgroundColor(Color.Pink)
    .layoutWeight(1)
}

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

3.7.2：优先级设置

export declare class CommonMethod<T> {
  displayPriority(value: number): T;
}

设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏，该属性仅在Row 、Column、和 Flex(单行) 容器组件中生效。

简单样例如下所示：

class ContainerInfo {
  label: string = '';
  size: string = '';
}

class ChildInfo {
  text: string = '';
  priority: number = 0;
}

@Entry @Component struct ArkUIClubDisplayPriorityExample {
  // 显示容器大小
  private container: ContainerInfo[] = [
    { label: 'Big container', size: '100%' },
    { label: 'Middle container', size: '50%' },
    { label: 'Small container', size: '30%' }
  ]

  private children: ChildInfo[] = [
    { text: '1\n(priority:2)', priority: 2 },
    { text: '2\n(priority:1)', priority: 1 },
    { text: '3\n(priority:3)', priority: 3 },
    { text: '4\n(priority:1)', priority: 1 },
    { text: '5\n(priority:2)', priority: 2 }
  ]

  @State currentIndex: number = 0;

  build() {
    Column({ space: 10 }) {

      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        ForEach(this.children, (item) => {
          Text(item.text)
            .width(100)
            .height(160)
            .fontSize(24)
            .textAlign(TextAlign.Center)
            .backgroundColor(0xbbb2cb)
            .displayPriority(item.priority)           // 使用displayPriority给子组件绑定显示优先级
        }, item => item.text)
      }
      .width(this.container[this.currentIndex].size)  // 通过变量设置Flex父容器宽度
      .backgroundColor(0xd2cab3)

      Button(this.container[this.currentIndex].label) // 切换父级容器大小
        .backgroundColor(0x317aff)
        .onClick(() => {
          this.currentIndex = (this.currentIndex + 1) % this.container.length;
        })

    }
    .padding(10)
    .width("100%")
  }
}

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