HarmonyOS Next应用开发——半模态框展示

【高心星出品】

半模态框展示

bindSheet用于半模态展示界面，如分享框。

展示效果：

开发方法

参数名	类型	必填	说明
isShow	Optional<boolean>	是	是否显示半模态页面。
builder	CustomBuilder	是	配置半模态页面内容。
options	SheetOptions	否	配置半模态页面的可选属性。

bindSheet(isShow: Optional<boolean>, builder: CustomBuilder, options?: SheetOptions)

其中options中可以设置半模态框的相关属性，高度、标题、是否显示关闭按钮、模态框关闭监听等。

开发步骤：

1.创建控制变量

// 控制变量
@State isshow: boolean = false

2.构建半模态框显示界面

// 构建半模态框界面
@Builder
gensheet() {
  Column() {
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
      ForEach(this.menuList, (item: string) => {
        Text(item)
          .padding(10)
          .margin(10)
          .backgroundColor('rgb(200,200,200)')
          .fontSize(16)
          .stateStyles({
            pressed: {
              .backgroundColor('rgb(100,100,100)')
            }
          })
          .onClick(() => {
            this.isshow = false
          })
      }, (item: string) => JSON.stringify(item))
    }
  }.width('100%').height('100%')
}

注意： 这里的宽高百分比不在是相对于屏幕的，而是相对于半模态框设置的宽和高

3.绑定组件

Row() {
  Text('餐具与口味:选择餐具和口味').fontSize(20).fontWeight(FontWeight.Bold)
  Blank()
  Row().width(12).height(12).border({ width: { top: 2, right: 2 } }).rotate({ angle: 45 })
}
.width('100%')
.padding(10)
.backgroundColor('rgb(200,200,200)')
.bindSheet(this.isshow, this.gensheet(), {
  title: { title: '请选择：' }, //标题
  height: '40%', //半模态框高度
  showClose: true,//显示关闭按钮
  onDisappear: () => {//消失的时候控制变量更新
    this.isshow = false
  }
})

全部代码：

@Entry
@Component
struct Sheetmodel {
  @State message: string = 'Hello World';
  // 控制变量
  @State isshow: boolean = false
  private menuList: string[] =
    ['不要辣', '少放辣', '多放辣', '不要香菜', '不要香葱', '不要一次性餐具', '需要一次性餐具'];

  // 构建半模态框界面
  @Builder
  gensheet() {
    Column() {
      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
        ForEach(this.menuList, (item: string) => {
          Text(item)
            .padding(10)
            .margin(10)
            .backgroundColor('rgb(200,200,200)')
            .fontSize(16)
            .stateStyles({
              pressed: {
                .backgroundColor('rgb(100,100,100)')
              }
            })
            .onClick(() => {
              this.isshow = false
            })
        }, (item: string) => JSON.stringify(item))
      }
    }.width('100%').height('100%')
  }

  build() {
    Column() {
      Row() {
        Text('餐具与口味:选择餐具和口味').fontSize(20).fontWeight(FontWeight.Bold)
        Blank()
        Row().width(12).height(12).border({ width: { top: 2, right: 2 } }).rotate({ angle: 45 })
      }
      .width('100%')
      .padding(10)
      .backgroundColor('rgb(200,200,200)')
      .bindSheet(this.isshow, this.gensheet(), {
        title: { title: '请选择：' }, //标题
        height: '40%', //半模态框高度
        showClose: true,//显示关闭按钮
        onDisappear: () => {//消失的时候控制变量更新
          this.isshow = false
        }
      })
      .onClick(() => {
        this.isshow = true
      })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}