diff --git a/README.md b/README.md index b6540d9db94e0a4bac93a6eeb847c693f9ab7814..22c719cf13a1a250765da7d975ba7383897cd1df 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# **实现自定义样式弹窗** +# **自定义弹窗选型与开发** ## 介绍 本示例主要介绍如何给应用添加自定义样式的弹窗,包括非模态弹窗:文本提示、图文提示、操作提示等;以及模态弹窗:确认弹窗、隐私弹窗、进度条、操作列表、评论回复弹窗等。旨在帮助开发者了解 如何实现这些弹窗,给应用添加这些交互弹窗,也能提升用户体验。 diff --git a/entry/src/main/ets/pages/AgreementPage.ets b/entry/src/main/ets/pages/AgreementPage.ets index c7b0610d0d9cd31fc34fef84425a7a15e46ea33f..9f346f833c1b387f0153f3df64264fba095f99f0 100644 --- a/entry/src/main/ets/pages/AgreementPage.ets +++ b/entry/src/main/ets/pages/AgreementPage.ets @@ -16,8 +16,31 @@ // [Start AgreementPage] @Component export struct AgreementPage { + @Consume('NavPathStack') pageStack: NavPathStack; + build() { NavDestination() { + Row(){ + Row() { + Image($r('app.media.chevron_left')) + .width(16) + .height(16) + .margin({ left: 12 }) + } + .width(40) + .height(40) + .borderRadius(48) + .margin({ top: 42 }) + .backgroundColor('#e6eaeb') + .onClick(() => { + this.pageStack.pop(); + }) + } + .width('100%') + .padding({ + left: 16, + right: 16 + }) Scroll() { Column() { Image($r('app.media.privacy')) @@ -83,6 +106,7 @@ export struct AgreementPage { right: 16 }) } + .hideTitleBar(true) .height('100%') .backgroundColor('#F1F3F5') } diff --git a/entry/src/main/ets/pages/CommentList.ets b/entry/src/main/ets/pages/CommentList.ets index b09eb3ef04a6bf4b90c88411f1347f711c10f4ff..1162aeb33849650a943436674641a3cb16ade909 100644 --- a/entry/src/main/ets/pages/CommentList.ets +++ b/entry/src/main/ets/pages/CommentList.ets @@ -180,14 +180,21 @@ export struct CommentList { } }, (item: Person) => JSON.stringify(item)) } - .padding({ left: 16, right: 16 }) + .padding({ + left: 16, + right: 16 + }) .width('100%') .height('auto') this.ToolBar() } - .borderRadius({ topLeft: 16, topRight: 16 }) - .backgroundColor('#F1F3F5') + .padding({ bottom: 32 }) + .borderRadius({ + topLeft: 16, + topRight: 16 + }) + .backgroundColor(Color.White) .onAreaChange(this.onCommentListAreaChange) } } diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index ab801a4b5dd0e5bdf0de54ce6dda71a3f4a59880..67aaea6d1a42a907376284a289f82ab2efacfe15 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -576,16 +576,14 @@ struct Index { bottom: 4 }) } + .height('100%') .padding({ + top: 32, + bottom: 36, left: 16, right: 16 }) - .height('100%') } - .padding({ - top: 32, - bottom: 36 - }) .backgroundColor('#F1F3F5') .navDestination(this.PagesMap) .width('100%') diff --git a/entry/src/main/ets/pages/PrivacyDialog.ets b/entry/src/main/ets/pages/PrivacyDialog.ets index 798fa495252b35c5046155a446bb4bf8d71f027f..bf57df13b9b56b441329751804b53eb30b7e6078 100644 --- a/entry/src/main/ets/pages/PrivacyDialog.ets +++ b/entry/src/main/ets/pages/PrivacyDialog.ets @@ -99,6 +99,21 @@ export struct PrivacyDialog { NavDestination() { // [Start privacy_dialog] Column() { + Row() { + Image($r('app.media.chevron_left')) + .width(16) + .height(16) + .margin({ left: 12 }) + } + .width(40) + .height(40) + .borderRadius(48) + .margin({ top: 42 }) + .backgroundColor('#e6eaeb') + .onClick(() => { + this.pageStack.pop(); + }) + Row() { Button('OPEN') .id('privacyDialog') @@ -131,12 +146,16 @@ export struct PrivacyDialog { .height('100%') .padding({ left: 16, - right: 16 + right: 16, + bottom: 32 }) - .justifyContent(FlexAlign.End) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(HorizontalAlign.Start) + // [End privacy_dialog] } .hideToolBar(true) + .hideTitleBar(true) .width('100%') .height('100%') .backgroundColor('#F1F3F5') diff --git a/entry/src/main/resources/base/media/chevron_left.png b/entry/src/main/resources/base/media/chevron_left.png new file mode 100644 index 0000000000000000000000000000000000000000..158c2c6264e1ddd7cb4e6f3975d8979637eef83c Binary files /dev/null and b/entry/src/main/resources/base/media/chevron_left.png differ