ArkUI半屏状态（模态，SideBarContainer）

一，模态

1.效果展示

模态分为全模态（bindContentCover）和半模态（bindsheet），用法类似，就半模态展开说明

2.基本语法

@Entry
  @Component
  struct SheetTransitionExample1 {
    // 1. 定义控制变量
    @State isShow: boolean = false

    // 2.自定义内容
    @Builder
    myBuilder() {
       // 结构略
    }

    build() {
      Column() {
        Button(`显示半模态`)
          //  3.绑定半模态框
                  **说明**
                    在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。
                    为了使isShow参数值与半模态界面的状态同步，建议使用$$双向绑定isShow参数。
          .bindSheet($$this.isShow, this.myBuilder())  //$$作用：双向绑定，代码可以控制UI，改变UI也可以控制视图
          .onClick(() => {
            // 4.控制显示
            this.isShow = true
          })
      }
    }
  }

3.用自定义函数创建模态

@Entry
@Component
struct Index {
  // 2. 准备bindSheet的两个参数
  @State isShow:boolean = false
  @Builder sheetBuilder(){
    Column(){
      Text('半模态提示框内容')
        .fontSize(50)
    }
  }
  build() {
    Column() {
        /*
         * 半模态提示框：
         * .bindSheet()
         * */

      Button('点我弹出')
        // 1. 在按钮上注册bindSheet实现半模态提示框
        // $$this.isShow 表示将this.isShow这个状态变量与bindSheet内部的动作进行双向绑定
        // 双向： 数据发生改变 -> 驱动页面更新 +  当页面发生改变 -> 驱动数据跟着改变  双向
        .bindSheet($$this.isShow,this.sheetBuilder()),{
        //改变模态的属性
           showClose:false ,   // 关闭按钮的隐藏显示
        // height:300,     //半模态高度
        // height:SheetSize.MEDIUM,  //半模态高度，枚举类型
           dragBar:true,   // 拖拉条显示
        // detents:[300,600,900]   //可以拖拉的挡位
           detents:[SheetSize.MEDIUM,SheetSize.LARGE,SheetSize.FIT_CONTENT]
        }
        .onClick(()=>{
          // 3. 点击按钮的时候打开半模态
          this.isShow = true
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)

  }
}

4.分享弹窗代码实现

@Entry
@Component
struct Index {
  @State isBindSheet: boolean = false

  @Builder
  BindSheetBUilder() {
    Column() {
      Row() {
        Text('分享给好友')
          .fontSize(19)
          .fontWeight(600)
          .textAlign(TextAlign.Center)
          .layoutWeight(1)
        Image($r('app.media.ic_public_cancel'))
          .width(20)
          .fillColor('rgba(0,0,0,0.5)')
      }
      .padding(20)
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      Row({ space: 40 }) {
        Column({ space: 10 }) {
          Image($r('app.media.ic_share_wechat'))
            .width(50)
          Text('微信')
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_pyq'))
            .width(50)
          Text('朋友圈')
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_sina'))
            .width(50)
          Text('微博')
        }

        Column({ space: 10 }) {
          Image($r('app.media.ic_share_url'))
            .width(50)
          Text('链接')
        }
      }
    }
    .height(200)
  }

  build() {
    Column() {
      Button('点击分享')
        .bindSheet($$this.isBindSheet, this.BindSheetBUilder(), {
          showClose: false,
          height: SheetSize.FIT_CONTENT
        })
        .onClick(() => {
          this.isBindSheet = true
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Orange)
  }
}

二，侧边栏（SideBarContainer）

1.效果展示

2.基础语法

@Entry
@Component
struct SideBarContainer01 {
  build() {
    SideBarContainer(SideBarContainerType.Overlay) {
      Column() {
        // 子组件 1：侧边容器
      }
      .backgroundColor(Color.Orange)


      Column() {
        // 子组件 2：内容区域
      }
      .backgroundColor(Color.Pink)

    }
    //.属性
    .showControlButton(false)   //关闭控制按钮
    .showSideBar($$this.showSidebar)     //拖动之后可以再次开启
    .sideBarWidth(200)     // 侧边栏宽度
    // .minSideBarWidth(100)
    .maxSideBarWidth('100%')    // 侧边栏最大宽度,自定义宽度超过最大宽度，仍显示侧边栏最大宽度
    .sideBarPosition(SideBarPosition.End)    // 侧边栏展示位置
    .showSideBar(false) // 默认隐藏
  }
}

2.1注意点

• 子组件类型：系统组件和自定义组件
• 子组件个数：必须且仅包含2个子组件，第一个位置的组件作为侧边栏的内容，第二个位置的组件是内容
• 子组件个数异常时：3个或以上子组件，显示第一个和第二个。1个子组件显示侧边栏，内容区为空白。

3.属性

名称	参数类型	描述
showSideBar	boolean	设置是否显示侧边栏。true：显示侧边栏false：不显示侧边栏默认值：true从API version 10开始，该属性支持$$双向绑定变量。
showControlButton	boolean	设置是否显示控制按钮。true：显示控制按钮false：不显示控制按钮默认值：true
sideBarWidth	number	设置侧边栏的宽度。默认值：240vp单位：vp
sideBarPosition	SideBarPosition	设置侧边栏显示位置。默认值：SideBarPosition.Start
minSideBarWidth	number	设置侧边栏最小宽度。默认值：240vp单位：vp
maxSideBarWidth	number	设置侧边栏最大宽度。默认值：280vp单位：vp

4.代码实现

@Entry
@Component
struct Index {
  @State showSidebar:boolean=false
  build() {
    Column() {

      SideBarContainer(SideBarContainerType.Overlay) {
        Column() {
          Text('侧边栏内容')
            .onClick(()=>{
              this.showSidebar=false
            })
        }
        .backgroundColor(Color.White)

        Column() {
          Text('主体内容')
            .onClick(()=>{
              this.showSidebar=true
            })
        }
      }
      .showControlButton(false)   //关闭控制按钮
      .showSideBar($$this.showSidebar)     //拖动之后可以再次开启
      .sideBarWidth(200)     // 侧边栏宽度
      // .minSideBarWidth(100)
      .maxSideBarWidth('100%')    // 侧边栏最大宽度,自定义宽度超过最大宽度，仍显示侧边栏最大宽度
      .sideBarPosition(SideBarPosition.End)    // 侧边栏展示位置
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Orange)
  }
}