Skip to content

Commit 9393e3a

Browse files
author
damengbuxing
committed
feature/popup
1 parent 7065072 commit 9393e3a

14 files changed

Lines changed: 627 additions & 35 deletions

File tree

‎build-profile.json5‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,6 @@
11
{
22
"app": {
3-
"signingConfigs": [
4-
{
5-
"name": "default",
6-
"type": "HarmonyOS",
7-
"material": {
8-
"certpath": "C:\\Users\\Administrator\\.ohos\\config\\default_ibest-ui_xXJLqStmQDl9P_6bRKkoHbj-HILGKBG46C6yaRfgFhQ=.cer",
9-
"storePassword": "0000001BAC9A01C62FDEAA7F84E249537A055770DE16986AE2A223E701177962B77FDE9C985F81BC2F6534",
10-
"keyAlias": "debugKey",
11-
"keyPassword": "0000001B58D89D64A79F5B0EFB6012C295A6931F8FE62FE64DD091D0FCC4B0BB5DCBBAF824E1F5419367A7",
12-
"profile": "C:\\Users\\Administrator\\.ohos\\config\\default_ibest-ui_xXJLqStmQDl9P_6bRKkoHbj-HILGKBG46C6yaRfgFhQ=.p7b",
13-
"signAlg": "SHA256withECDSA",
14-
"storeFile": "C:\\Users\\Administrator\\.ohos\\config\\default_ibest-ui_xXJLqStmQDl9P_6bRKkoHbj-HILGKBG46C6yaRfgFhQ=.p12"
15-
}
16-
}
17-
],
3+
"signingConfigs": [],
184
"products": [
195
{
206
"name": "default",

‎entry/src/main/ets/pages/Index.ets‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ struct Index {
2626
name: 'Checkbox复选框',
2727
path: 'pages/Checkbox'
2828
},
29+
{
30+
name: 'Popup弹出层',
31+
path: 'pages/Popup'
32+
},
2933
{
3034
name: 'Switch开关',
3135
path: 'pages/Switch'

‎entry/src/main/ets/pages/Popup.ets‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
import { IBestCell, IBestCellGroup, IBestPopup, IBestToast } from "@ibestservices/ibest-ui"
2+
import { router } from '@kit.ArkUI'
3+
import { ComponentRouterParams } from '../assets/global.type'
4+
import TitleBar from '../components/TitleBar'
5+
import ComponentShowContainer from '../components/ComponentShowContainer'
6+
import { BACKGROUND_COLOR, CONTAINER_SIZE, FONT_SIZE, SPACE } from '../assets/styles/BaseStyle'
7+
8+
@Extend(Column) function positionColStyle(bd: boolean = false){
9+
.layoutWeight(1)
10+
.height("150lpx")
11+
.justifyContent(FlexAlign.Center)
12+
.border({width:{left: bd ? 1 : 0}, color: "#ebedf0"})
13+
}
14+
@Extend(Image) function positionImageStyle(){
15+
.width("50lpx")
16+
.aspectRatio(1)
17+
.fillColor("#333")
18+
}
19+
20+
@Entry
21+
@Component
22+
struct PopupPage {
23+
@State title: string = (router.getParams() as ComponentRouterParams).title || ''
24+
@State baseVisible: boolean = false
25+
@State upVisible: boolean = false
26+
@State downVisible: boolean = false
27+
@State leftVisible: boolean = false
28+
@State rightVisible: boolean = false
29+
@State showHeaderVisible: boolean = false
30+
@State cusCloseIconVisible: boolean = false
31+
@State centerCornerVisible: boolean = false
32+
@State bottomCornerVisible: boolean = false
33+
@State eventVisible: boolean = false
34+
@State safeAreaVisible: boolean = false
35+
36+
@Builder baseBuilder() {
37+
Column(){
38+
Text("内容")
39+
}
40+
}
41+
@Builder safeBuilder() {
42+
Column(){
43+
Text("内容")
44+
Text("内容")
45+
}
46+
.width("100%")
47+
.height("100%")
48+
.justifyContent(FlexAlign.SpaceBetween)
49+
.alignItems(HorizontalAlign.Center)
50+
}
51+
52+
build() {
53+
Column(){
54+
TitleBar({
55+
title: this.title
56+
}).backgroundColor('#FFF')
57+
List() {
58+
ListItem() {
59+
ComponentShowContainer({ title: '基础用法', titlePaddingLeft: SPACE.SMALL }) {
60+
IBestCellGroup({ inset: true }) {
61+
Column() {
62+
IBestCell({
63+
title: '展示弹出层',
64+
isLink: true,
65+
hasBorder: false,
66+
onClickCell: () => {
67+
this.baseVisible = true
68+
}
69+
})
70+
}
71+
}
72+
}
73+
}
74+
ListItem() {
75+
ComponentShowContainer({ title: '弹出位置', titlePaddingLeft: SPACE.SMALL }) {
76+
IBestCellGroup({ inset: true }) {
77+
Row(){
78+
Column(){
79+
Image($r("app.media.arrow_up"))
80+
.positionImageStyle()
81+
Text("顶部弹出")
82+
.margin({top: "16lpx"})
83+
.fontSize(FONT_SIZE.MINI)
84+
}
85+
.positionColStyle()
86+
.onClick(() => {
87+
this.upVisible = true
88+
})
89+
Column(){
90+
Image($r("app.media.arrow_down"))
91+
.positionImageStyle()
92+
Text("底部弹出")
93+
.margin({top: "16lpx"})
94+
.fontSize(FONT_SIZE.MINI)
95+
}
96+
.positionColStyle(true)
97+
.onClick(() => {
98+
this.downVisible = true
99+
})
100+
Column(){
101+
Image($r("app.media.arrow_left"))
102+
.positionImageStyle()
103+
Text("左侧弹出")
104+
.margin({top: "16lpx"})
105+
.fontSize(FONT_SIZE.MINI)
106+
}
107+
.positionColStyle(true)
108+
.onClick(() => {
109+
this.leftVisible = true
110+
})
111+
Column(){
112+
Image($r("app.media.arrow_right"))
113+
.positionImageStyle()
114+
Text("右侧弹出")
115+
.margin({top: "16lpx"})
116+
.fontSize(FONT_SIZE.MINI)
117+
}
118+
.positionColStyle(true)
119+
.onClick(() => {
120+
this.rightVisible = true
121+
})
122+
}
123+
.width(CONTAINER_SIZE.FULL)
124+
.backgroundColor("#fff")
125+
}
126+
}
127+
}
128+
ListItem() {
129+
ComponentShowContainer({ title: '显示标题', titlePaddingLeft: SPACE.SMALL }) {
130+
IBestCellGroup({ inset: true }) {
131+
Column() {
132+
IBestCell({
133+
title: '显示标题',
134+
isLink: true,
135+
onClickCell: () => {
136+
this.showHeaderVisible = true
137+
}
138+
})
139+
IBestCell({
140+
title: '自定义关闭图标',
141+
isLink: true,
142+
hasBorder: false,
143+
onClickCell: () => {
144+
this.cusCloseIconVisible = true
145+
}
146+
})
147+
}
148+
}
149+
}
150+
}
151+
ListItem() {
152+
ComponentShowContainer({ title: '圆角弹窗', titlePaddingLeft: SPACE.SMALL }) {
153+
IBestCellGroup({ inset: true }) {
154+
Column() {
155+
IBestCell({
156+
title: '圆角弹窗(居中)',
157+
isLink: true,
158+
onClickCell: () => {
159+
this.centerCornerVisible = true
160+
}
161+
})
162+
IBestCell({
163+
title: '圆角弹窗(底部)',
164+
isLink: true,
165+
hasBorder: false,
166+
onClickCell: () => {
167+
this.bottomCornerVisible = true
168+
}
169+
})
170+
}
171+
}
172+
}
173+
}
174+
ListItem() {
175+
ComponentShowContainer({ title: '事件监听', titlePaddingLeft: SPACE.SMALL }) {
176+
IBestCellGroup({ inset: true }) {
177+
Column() {
178+
IBestCell({
179+
title: '监听显示事件',
180+
isLink: true,
181+
hasBorder: false,
182+
onClickCell: () => {
183+
this.eventVisible = true
184+
}
185+
})
186+
}
187+
}
188+
}
189+
}
190+
ListItem() {
191+
ComponentShowContainer({ title: '安全区域适配', titlePaddingLeft: SPACE.SMALL }) {
192+
IBestCellGroup({ inset: true }) {
193+
Column() {
194+
IBestCell({
195+
title: '安全区域适配',
196+
isLink: true,
197+
hasBorder: false,
198+
onClickCell: () => {
199+
this.safeAreaVisible = true
200+
}
201+
})
202+
}
203+
}
204+
}
205+
}
206+
}
207+
.layoutWeight(1)
208+
// 基础展示
209+
IBestPopup({
210+
visible: this.baseVisible
211+
})
212+
// 弹框位置
213+
IBestPopup({
214+
visible: this.upVisible,
215+
popupAlign: "top"
216+
})
217+
IBestPopup({
218+
visible: this.downVisible,
219+
popupAlign: "bottom"
220+
})
221+
IBestPopup({
222+
visible: this.leftVisible,
223+
popupAlign: "left"
224+
})
225+
IBestPopup({
226+
visible: this.rightVisible,
227+
popupAlign: "right"
228+
})
229+
// 关闭图标
230+
IBestPopup({
231+
visible: this.showHeaderVisible,
232+
popupAlign: "bottom",
233+
isShowHeader: true,
234+
title: "标题"
235+
})
236+
IBestPopup({
237+
visible: this.cusCloseIconVisible,
238+
popupAlign: "bottom",
239+
isShowHeader: true,
240+
title: "标题",
241+
closeIcon: "https://ibestui.ibestservices.com/favicon.ico"
242+
})
243+
// 圆角弹窗
244+
IBestPopup({
245+
visible: this.centerCornerVisible,
246+
cornerRadius: 10
247+
})
248+
IBestPopup({
249+
visible: this.bottomCornerVisible,
250+
popupAlign: "bottom",
251+
cornerRadius: 30
252+
})
253+
// 事件监听
254+
IBestPopup({
255+
visible: this.eventVisible,
256+
popupAlign: "bottom",
257+
onOpen: () => {
258+
IBestToast.show("open")
259+
},
260+
onClose: () => {
261+
IBestToast.show("close")
262+
}
263+
})
264+
// 安全区域适配
265+
IBestPopup({
266+
visible: this.safeAreaVisible,
267+
popupAlign: "left",
268+
contentBuilder: this.safeBuilder,
269+
safeAreaInsetTop: true,
270+
safeAreaInsetBottom: true
271+
})
272+
}
273+
.width(CONTAINER_SIZE.FULL)
274+
.height(CONTAINER_SIZE.FULL)
275+
.backgroundColor(BACKGROUND_COLOR.BASE)
276+
}
277+
}

‎entry/src/main/resources/base/media/arrow_down.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎entry/src/main/resources/base/media/arrow_left.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎entry/src/main/resources/base/media/arrow_up.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎entry/src/main/resources/base/profile/main_pages.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"pages/Calendar",
1616
"pages/Loading",
1717
"pages/Toast",
18-
"pages/Tab"
18+
"pages/Tab",
19+
"pages/Popup"
1920
]
2021
}

‎library/Index.ets‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,5 @@ export { IBestLoading } from './src/main/ets/components/loading/index'
4242

4343
export { IBestTabs } from './src/main/ets/components/tab/index'
4444
export { IBestTabItem, IBestTabController } from './src/main/ets/components/tab/index.type'
45+
46+
export { IBestPopup } from './src/main/ets/components/popup/index'

‎library/src/main/ets/assets/ets/utils.ets‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import { componentUtils, ComponentUtils, window } from '@kit.ArkUI'
2+
import { ComInfoType, ComAvoidAreaSize } from '../../utils/Global.type'
3+
import { common } from '@kit.AbilityKit'
14
/**
25
* 休眠
36
* @param {number} time 休眠时间
47
* @returns
58
*/
6-
import { componentUtils, ComponentUtils } from '@kit.ArkUI'
7-
import { ComInfoType } from '../../utils/Global.type'
8-
99
export function sleep(time = 300): Promise<void> {
1010
return new Promise((resolve) => {
1111
setTimeout(() => {
@@ -117,4 +117,17 @@ export const getComponentsInfo = (context: UIContext, key: string): ComInfoType
117117
windowLeft: px2lpx(info.windowOffset.x),
118118
windowTop: px2lpx(info.windowOffset.y)
119119
}
120+
}
121+
/**
122+
* 获取窗口域尺寸信息
123+
* */
124+
export const getWindowAvoidSize = async (context: common.BaseContext): Promise<ComAvoidAreaSize> => {
125+
let topWindow: window.Window = await window.getLastWindow(context)
126+
let avoidArea = topWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
127+
return {
128+
topSize: px2lpx(avoidArea.topRect.height),
129+
bottomSize: px2lpx(avoidArea.bottomRect.height) || 60, // TODO 暂时没法获取 先写固定值
130+
leftSize: px2lpx(avoidArea.leftRect.width),
131+
rightSize: px2lpx(avoidArea.rightRect.width)
132+
}
120133
}

0 commit comments

Comments
 (0)