HarmonyOS鸿蒙Next中Select下拉组件和.visibility控制显示隐藏

HarmonyOS鸿蒙Next中Select下拉组件和.visibility控制显示隐藏 Visibility.Visible//创建
Visibility.None //销毁
Visibility.Hidden//隐藏 还是会占用空间

@Component
struct vip {
  msg: string = ''
  bgColor: ResourceColor = Color.White

  build() {
    Text(this.msg)
      .backgroundColor(this.bgColor)
      .width(60)
      .textAlign(TextAlign.Center)
      .height(30)
      .borderRadius(15)
  }
}

@Entry
@Component
struct Index1 {
  @State selectedMsg: string = '未开通';
  @State selectIndex: number = 0

  build() {
    Column({ space: 20 }) {
      Row() {
        Text('开通会员:').margin({ right: 30 })
        Select([{ value: '未开通' }, { value: 'VIP' }, { value: 'SVIP' }])
          .value($$this.selectedMsg).layoutWeight(1)
          .selected($$this.selectIndex)
      }.width('100%')

      //if 控制
      Row() {
        Image($r('app.media.startIcon'))
          .width(40).aspectRatio(1)
          .borderRadius(20)

        Text('西北吴彦祖')

        if (this.selectedMsg == '未开通') {
          vip({
            msg: 'VIP',
            bgColor: '#ff968282'
          })
        } else if (this.selectedMsg == 'VIP') {
          vip({
            msg: 'VIP',
            bgColor: Color.Yellow
          })
        } else {
          vip({
            msg: 'SVIP',
            bgColor: Color.Red
          })
        }

      }.width('100%').justifyContent(FlexAlign.SpaceAround)

      //if 控制
      Row() {
        Image($r('app.media.startIcon'))
          .width(40).aspectRatio(1)
          .borderRadius(20)

        Text('西北吴彦祖')

        if (this.selectIndex == 0) {
          vip({
            msg: 'VIP',
            bgColor: '#ff968282'
          })
        } else if (this.selectIndex == 1) {
          vip({
            msg: 'VIP',
            bgColor: Color.Yellow
          })
        } else {
          vip({
            msg: 'SVIP',
            bgColor: Color.Red
          })
        }

      }.width('100%').justifyContent(FlexAlign.SpaceAround)


      //visibility
      Row() {
        Image($r('app.media.startIcon'))
          .width(40).aspectRatio(1)
          .borderRadius(20)

        Text('西北吴彦祖')

        vip({
          msg: 'VIP',
          bgColor: '#ff968282'
        })
          .visibility(this.selectedMsg == '未开通' ? Visibility.Visible : Visibility.None)
        vip({
          msg: 'VIP',
          bgColor: Color.Yellow
        })
          .visibility(this.selectedMsg == 'VIP' ? Visibility.Visible : Visibility.None)
        vip({
          msg: 'SVIP',
          bgColor: Color.Red
        })
          .visibility(this.selectedMsg == 'SVIP' ? Visibility.Visible : Visibility.None)

      }.width('100%').justifyContent(FlexAlign.SpaceAround)

    }.padding(20)
    .height('100%')
    .width('100%')

  }
}

更多关于HarmonyOS鸿蒙Next中Select下拉组件和.visibility控制显示隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，Select下拉组件通过声明式UI构建，使用Picker或自定义组件实现选择功能。.visibility属性用于控制组件显示或隐藏，可设置为Visibility.Visible、Visibility.Hidden或Visibility.None。Hidden保留布局空间，None完全移除不占位。通过状态变量动态绑定条件渲染实现交互控制。

更多关于HarmonyOS鸿蒙Next中Select下拉组件和.visibility控制显示隐藏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，通过Select组件与.visibility修饰符结合实现条件显示是常见的UI控制方式。您的代码示例展示了三种不同的条件渲染策略：

  1. Select组件：通过绑定@State变量selectedMsg和selectIndex实现选项联动，这是正确的数据驱动方式。

  2. 条件渲染差异：

    • 使用if条件语句时，组件会按条件创建或销毁，适合需要完全移除组件的场景
    • 使用.visibility(Visibility.Visible/None)时，组件保持存在但不可见，不占用渲染空间但保留组件实例
    • Visibility.Hidden（您未使用）会隐藏组件但仍保留布局空间

  3. 代码优化建议： 您的第三个Row中使用多个vip组件并通过visibility控制显示，虽然功能正确，但会产生多个组件实例。对于这种互斥显示的场景，使用单个组件通过条件改变属性值会更高效：

vip({
  msg: this.selectedMsg,
  bgColor: this.selectedMsg === '未开通' ? '#ff968282' : 
           this.selectedMsg === 'VIP' ? Color.Yellow : Color.Red
})
.visibility(this.selectedMsg !== '未开通' ? Visibility.Visible : Visibility.None)

这样只需维护一个组件实例，通过改变属性来实现样式切换，性能更优。

回到顶部