import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { display, window } from '@kit.ArkUI';
const DOMAIN = 0x0000;
export default class EntryAbility extends UIAbility {
private curBp: string = '';
onCreate(): void {
try {
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
} catch (err) {
hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
}
hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
}
// 根据当前窗口尺寸更新断点
private updateBreakpoint(windowWidth: number): void {
// 将长度的单位由px换算为vp
let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
let newBp: string = '';
if (windowWidthVp < 320) {
newBp = 'xs';
} else if (windowWidthVp < 600) {
newBp = 'sm';
} else if (windowWidthVp < 840) {
newBp = 'md';
} else {
newBp = 'lg';
}
if (this.curBp !== newBp) {
this.curBp = newBp;
// 使用状态变量记录当前断点值
AppStorage.setOrCreate('currentBreakpoint', this.curBp);
}
}
onDestroy(): void {
hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
}
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.getMainWindow().then((windowObj) => {
// 获取应用启动时的窗口尺寸
this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width);
// 注册回调函数，监听窗口尺寸变化
windowObj.on('windowSizeChange', (windowSize) => {
this.updateBreakpoint(windowSize.width);
});
});
windowStage.loadContent('pages/Index', (err) => {
if (err.code) {
hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
return;
}
hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
});
}
onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}
onForeground(): void {
// Ability has brought to foreground
hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
}
onBackground(): void {
// Ability has back to background
hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
}
};
interface ElementType {
index: number
text: string
color: ResourceColor
}
@Entry
@Component
struct GridRowSample3 {
@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
private controller: TextInputController = new TextInputController();
private elements: ElementType[] = [
{index: 1, text: '在售', color: $r('sys.color.ohos_id_color_palette_aux1')},
{index: 2, text: '住宅', color: $r('sys.color.ohos_id_color_palette_aux2')},
{index: 3, text: '江景', color: $r('sys.color.ohos_id_color_palette_aux3')},
{index: 4, text: '品质楼盘', color: $r('sys.color.ohos_id_color_palette_aux4')},
{index: 5, text: '地铁沿线', color: $r('sys.color.ohos_id_color_palette_aux5')},
];
build() {
Column() {
TextInput({ text: '', placeholder: 'input your word...', controller: this.controller })
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
.caretColor(Color.Blue)
.width('95%')
.height(40)
.margin(20)
.fontSize(14)
.fontColor(Color.Black)
.inputFilter('[a-z]', (e) => {
console.info(JSON.stringify(e));
})
// 配置不同断点下columns和gutter的取值
GridRow({columns: {sm: 4, md: 8, lg: 12},
gutter: {x: {sm: 8, md: 16, lg: 24}, y: {sm: 8, md: 16, lg: 24}}}) {
ForEach([1,2], ()=>{
GridCol({span: {sm: 2, md: 4, lg: 6}}) {
Column() {
Image($r('app.media.startIcon'))
.width('100%')
.height(this.currentBreakpoint =='sm' ? '10%': this.currentBreakpoint == 'md' ? "15%": '20%')
.layoutWeight(1)
Text('金顶学府').margin({top: 16, bottom: 8}).padding({left: 8, right: 8})
Text('地点： 武汉/武昌').fontSize(12).margin({bottom: 8}).fontColor('#333').padding({left: 8})
Flex({justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
ForEach(this.elements, (item: ElementType) => {
Text(item.text).backgroundColor(item.color)
.padding(2)
.margin({right: 12})
.fontSize(12)
})
}.padding({left: 8})
Text('24599/元m²起').fontSize(24).margin({top: 12}).fontColor(Color.Red).padding({left: 8})
}
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Start)
.border({radius: this.currentBreakpoint == 'sm' ? '4%' : '8%'})
.height(this.currentBreakpoint == 'sm' ? '30%' : '50%')
.width('100%')
.backgroundColor(Color.White)
}
})
}
.height('100%')
.width('100%')
}.padding({left: 12, right: 12})
.backgroundColor('#eee')
.height('100%')
.width('100%')
}
} 完整代码如下：
interface ElementType {
index: number
text: string
color: ResourceColor
}
@Entry
@Component
struct GridRowSample3 {
@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
private controller: TextInputController = new TextInputController();
private elements: ElementType[] = [
{index: 1, text: '在售', color: $r('sys.color.ohos_id_color_palette_aux1')},
{index: 2, text: '住宅', color: $r('sys.color.ohos_id_color_palette_aux2')},
{index: 3, text: '江景', color: $r('sys.color.ohos_id_color_palette_aux3')},
{index: 4, text: '品质楼盘', color: $r('sys.color.ohos_id_color_palette_aux4')},
{index: 5, text: '地铁沿线', color: $r('sys.color.ohos_id_color_palette_aux5')},
];
build() {
Column() {
TextInput({ text: '', placeholder: 'input your word...', controller: this.controller })
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
.caretColor(Color.Blue)
.width('95%')
.height(40)
.margin(20)
.fontSize(14)
.fontColor(Color.Black)
.inputFilter('[a-z]', (e) => {
console.info(JSON.stringify(e));
})
// 配置不同断点下columns和gutter的取值
GridRow({columns: {sm: 4, md: 8, lg: 12},
gutter: {x: {sm: 8, md: 16, lg: 24}, y: {sm: 8, md: 16, lg: 24}}}) {
ForEach([1,2], ()=>{
GridCol({span: {sm: 2, md: 4, lg: 6}}) {
Column() {
Image($r('app.media.startIcon'))
.width('100%')
.height(this.currentBreakpoint =='sm' ? '10%': this.currentBreakpoint == 'md' ? "15%": '20%')
.layoutWeight(1)
Text('金顶学府').margin({top: 16, bottom: 8}).padding({left: 8, right: 8})
Text('地点： 武汉/武昌').fontSize(12).margin({bottom: 8}).fontColor('#333').padding({left: 8})
Flex({justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
ForEach(this.elements, (item: ElementType) => {
Text(item.text).backgroundColor(item.color)
.padding(2)
.margin({right: 12})
.fontSize(12)
})
}.padding({left: 8})
Text('24599/元m²起').fontSize(24).margin({top: 12}).fontColor(Color.Red).padding({left: 8})
}
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Start)
.border({radius: this.currentBreakpoint == 'sm' ? '4%' : '8%'})
.height(this.currentBreakpoint == 'sm' ? '30%' : '50%')
.width('100%')
.backgroundColor(Color.White)
}
})
}
.height('100%')
.width('100%')
}.padding({left: 12, right: 12})
.backgroundColor('#eee')
.height('100%')
.width('100%')
}
}