HarmonyOS 5.0 应用开发——半模态框展示
作者：高心星
- 2024-10-31 江苏
本文字数：1577 字
阅读完需：约 5 分钟
【高心星出品】
半模态框展示
bindSheet 用于半模态展示界面，如分享框。
展示效果：
开发方法
bindSheet(isShow: Optional<boolean>, builder: CustomBuilder, options?: SheetOptions)
复制代码
其中 options 中可以设置半模态框的相关属性，高度、标题、是否显示关闭按钮、模态框关闭监听等。
开发步骤：
1.创建控制变量
// 控制变量@State isshow: boolean = false
复制代码
2.构建半模态框显示界面
// 构建半模态框界面@Buildergensheet() { 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@Componentstruct 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) }}
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 5
高心星
关注
天将降大任于斯人也，必先苦其心志。 2024-10-17 加入
华为开发者专家（HDE）。 10年教学经验，兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。
评论