Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b3e9214d75 | |||
| 55ae41db38 | |||
| 2ae7a88818 | |||
| b289211123 | |||
| 912e9edfdb | |||
| a66c7d2d85 | |||
| a6a0d26737 |
@@ -1,43 +0,0 @@
|
||||
import { EmptyPagePathStack } from './view/EmptyPagePathStack';
|
||||
import { SecondPageSearch } from './view/SecondPageSearch';
|
||||
import { BMICalculator } from './pages/BMICalculator';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
private scroller: Scroller = new Scroller();
|
||||
@Provide('appPathStack') appPathStack: NavPathStack = new NavPathStack();
|
||||
@State title: string = 'page_title';
|
||||
|
||||
@Builder
|
||||
PageMap(name: string) {
|
||||
if (name === 'SearchPage') {
|
||||
SecondPageSearch()
|
||||
} else {
|
||||
EmptyPagePathStack()
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Navigation(this.appPathStack) {
|
||||
Column() {
|
||||
Scroll(this.scroller) {
|
||||
Column() {
|
||||
BMICalculator()
|
||||
}
|
||||
.width('100%')
|
||||
.justifyContent(FlexAlign.Start)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
.scrollable(ScrollDirection.Vertical)
|
||||
.scrollBar(BarState.Off)
|
||||
.width('100%')
|
||||
}
|
||||
.backgroundColor('#F1F3F5')
|
||||
.height('100%')
|
||||
}
|
||||
.navDestination(this.PageMap)
|
||||
.hideTitleBar(true)
|
||||
.mode(NavigationMode.Stack)
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { PageTitleModule } from '../view/PageTitleModule';
|
||||
import { HeightWeightInputModule } from '../view/HeightWeightInputModule';
|
||||
import { CalculateBmiButtonModule } from '../view/CalculateBmiButtonModule';
|
||||
import { HealthResultModule } from '../view/HealthResultModule';
|
||||
|
||||
@Component
|
||||
export struct BMICalculator {
|
||||
private scroller: Scroller = new Scroller();
|
||||
|
||||
build() {
|
||||
Scroll(this.scroller) {
|
||||
Column() {
|
||||
PageTitleModule()
|
||||
HeightWeightInputModule()
|
||||
CalculateBmiButtonModule()
|
||||
HealthResultModule()
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.scrollable(ScrollDirection.Vertical)
|
||||
.scrollBar(BarState.Off)
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.align(Alignment.Top)
|
||||
.backgroundColor($r('app.color.page_bg_color'))
|
||||
}
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
DataSource, DataSourceStyleAStyleA
|
||||
} from '../viewmodel/CalculateBmiButtonModuleData';
|
||||
|
||||
import { LoadingStatus } from '../common/CommonEnums';
|
||||
import { LoadingFailedView } from '../view/LoadingFailedView';
|
||||
import { BreakpointConstants } from '../common/BreakpointConstants';
|
||||
|
||||
import { BreakpointType } from '../util/BreakpointType';
|
||||
import LazyDataSource from '../util/LazyDataSource';
|
||||
import { CommonConstants } from '../common/CommonConstants';
|
||||
import { ModuleTitleComponent } from '../common/ModuleTitleComponent';
|
||||
|
||||
|
||||
@Component
|
||||
export struct CalculateBmiButtonModule {
|
||||
@State itemModel: DataSource =
|
||||
DataSource.getInstance();
|
||||
@State lazyDataSource: LazyDataSource<DataSourceStyleAStyleA> =
|
||||
this.itemModel.lazyDataSource;
|
||||
@State rowHeight: number = 150;
|
||||
@State rowGap: number = 6;
|
||||
@State moduleTitle: string = "健康计算";
|
||||
@State moduleRedirectContent: string = "查看更多";
|
||||
private columnGapArray: number[] = [6, 10, 12];
|
||||
private columnNumberArray: number[] = [2, 4, 4];
|
||||
private rowNumberArray: number[] = [1, 1, 1];
|
||||
@State loadingStatus: LoadingStatus = LoadingStatus.OFF;
|
||||
@Consume('appPathStack') appPathStack: NavPathStack;
|
||||
@StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
|
||||
|
||||
aboutToAppear() {
|
||||
this.loadResources();
|
||||
}
|
||||
|
||||
loadResources(): void {
|
||||
this.loadingStatus = LoadingStatus.LOADING;
|
||||
this.itemModel.getResources().then(() => {
|
||||
this.loadingStatus = LoadingStatus.SUCCESS;
|
||||
}).catch(() => {
|
||||
this.loadingStatus = LoadingStatus.FAILED;
|
||||
});
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Column() {
|
||||
ModuleTitleComponent({ title: this.moduleTitle, moduleRedirectContent: this.moduleRedirectContent })
|
||||
if (this.loadingStatus === LoadingStatus.FAILED) {
|
||||
LoadingFailedView(() => this.loadResources())
|
||||
}
|
||||
if (this.loadingStatus === LoadingStatus.SUCCESS) {
|
||||
Column() {
|
||||
Button('计算BMI')
|
||||
.fontSize($r('app.integer.subtitle_text_L'))
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor($r('app.color.font_on_primary'))
|
||||
.backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
|
||||
.width('60%')
|
||||
.height(60)
|
||||
.borderRadius($r('sys.float.corner_radius_level8'))
|
||||
}
|
||||
.width('100%')
|
||||
.height(this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ?
|
||||
(this.rowGap + this.rowHeight) * new BreakpointType(this.rowNumberArray[0], this.rowNumberArray[1],
|
||||
this.rowNumberArray[2]).getValue(this.currentWidthBreakpoint) :
|
||||
(this.rowGap + this.rowHeight + 30) * new BreakpointType(this.rowNumberArray[0], this.rowNumberArray[1],
|
||||
this.rowNumberArray[2]).getValue(this.currentWidthBreakpoint))
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
}
|
||||
}
|
||||
.width('92%')
|
||||
.align(Alignment.Center)
|
||||
.borderRadius($r('sys.float.corner_radius_level8'))
|
||||
.margin({ bottom: "10vp" })
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
}
|
||||
|
||||
@Component
|
||||
export struct DoubleStackGraphicTextItem {
|
||||
@State title: string = '模块名';
|
||||
@State content: string = '跳转';
|
||||
@State image: Resource = $r("app.media.noImage");
|
||||
|
||||
build() {
|
||||
Stack({ alignContent: Alignment.TopStart }) {
|
||||
/**
|
||||
* TODO:
|
||||
* please modify it according to the actual situation.
|
||||
* directly modify {@link DataSource#IMAGES}
|
||||
* or refactor method {@code getResources()} to implement your custom code logic.
|
||||
* @see DataSource#getResources()
|
||||
*/
|
||||
Image(this.image)
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
.height(CommonConstants.FULL_PERCENT)
|
||||
.borderRadius($r('sys.float.corner_radius_level8'))
|
||||
Column() {
|
||||
/**
|
||||
* TODO:
|
||||
* please modify it according to the actual situation.
|
||||
* directly modify {@link DataSource#TITLES}
|
||||
* or refactor method {@code getResources()} to implement your custom code logic.
|
||||
* @see DataSource#getResources()
|
||||
*/
|
||||
Text(this.title)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontSize($r('app.integer.subtitle_text_L'))
|
||||
.margin({ top: "4vp" })
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
.fontColor($r('app.color.font_on_primary'))
|
||||
/**
|
||||
* TODO:
|
||||
* please modify it according to the actual situation.
|
||||
* directly modify {@link DataSource#CONTENTS}
|
||||
* or refactor method {@code getResources()} to implement your custom code logic.
|
||||
* @see DataSource#getResources()
|
||||
*/
|
||||
Text(this.content)
|
||||
.fontSize($r('app.integer.body_text_M'))
|
||||
.opacity(0.8)
|
||||
.fontWeight(FontWeight.Regular)
|
||||
.maxLines(1)
|
||||
.margin({ top: "2vp" })
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.fontColor($r('app.color.font_on_secondary'))
|
||||
}
|
||||
.padding({ left: '16vp', top: '16vp' })
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.justifyContent(FlexAlign.Start)
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
}
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
.height(CommonConstants.FULL_PERCENT)
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { router } from '@kit.ArkUI';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct EmptyPage {
|
||||
@State content: string = (router.getParams() as Record<string, string>)['text'];
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Row() {
|
||||
Text('empty page for ')
|
||||
.fontSize('25vp')
|
||||
.fontColor(Color.Gray)
|
||||
Text(this.content)
|
||||
.fontSize('25vp')
|
||||
.fontColor(Color.Blue)
|
||||
}
|
||||
.onClick(() => {
|
||||
router.back();
|
||||
})
|
||||
}
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
@@ -1,215 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
DataSource, Data
|
||||
} from '../viewmodel/HealthResultModuleData';
|
||||
|
||||
import { LoadingStatus } from '../common/CommonEnums';
|
||||
import { LoadingFailedView } from '../view/LoadingFailedView';
|
||||
|
||||
import { BreakpointConstants } from '../common/BreakpointConstants';
|
||||
import { BreakpointType } from '../util/BreakpointType';
|
||||
import LazyDataSource from '../util/LazyDataSource';
|
||||
import { CommonConstants } from '../common/CommonConstants';
|
||||
import { ModuleTitleComponent } from '../common/ModuleTitleComponent';
|
||||
|
||||
|
||||
@Component
|
||||
export struct HealthResultModule {
|
||||
@State itemModel: Data =
|
||||
Data.getInstance();
|
||||
@Prop listDirection: Axis = Axis.Vertical
|
||||
@State moduleTitle: string = "健康计算结果";
|
||||
@State moduleRedirectContent: string = "查看更多";
|
||||
@State loadingStatus: LoadingStatus = LoadingStatus.OFF;
|
||||
@State lazyDataSource: LazyDataSource<DataSource> =
|
||||
this.itemModel.lazyDataSource;
|
||||
private spaceArray: string[] = ['8vp', '6vp', '10vp'];
|
||||
private lanesArray: number[] = [1, 2, 3];
|
||||
@Consume('appPathStack') appPathStack: NavPathStack;
|
||||
@StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
|
||||
|
||||
aboutToAppear() {
|
||||
this.loadResources();
|
||||
|
||||
}
|
||||
|
||||
loadResources(): void {
|
||||
this.loadingStatus = LoadingStatus.LOADING;
|
||||
this.itemModel.getResources().then(() => {
|
||||
this.loadingStatus = LoadingStatus.SUCCESS;
|
||||
}).catch(() => {
|
||||
this.loadingStatus = LoadingStatus.FAILED;
|
||||
});
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Column() {
|
||||
ModuleTitleComponent({ title: this.moduleTitle, moduleRedirectContent: this.moduleRedirectContent })
|
||||
|
||||
if (this.loadingStatus === LoadingStatus.FAILED) {
|
||||
LoadingFailedView(() => this.loadResources())
|
||||
}
|
||||
if (this.loadingStatus === LoadingStatus.SUCCESS) {
|
||||
List({
|
||||
space: new BreakpointType(this.spaceArray[0], this.spaceArray[1],
|
||||
this.spaceArray[2]).getValue(this.currentWidthBreakpoint)
|
||||
}) {
|
||||
LazyForEach(this.lazyDataSource, (item: DataSource) => {
|
||||
ListItem() {
|
||||
HealthResultCard({
|
||||
image: item.getImage(),
|
||||
mainText: item.getMainText(),
|
||||
subText: item.getSubText(),
|
||||
descriptionText: item.getDescriptionText(),
|
||||
tagTextList: item.getTagTextList(),
|
||||
tagTextColorList: item.getTagTextColorList()
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.height("180vp")
|
||||
.borderRadius($r('sys.float.corner_radius_level8'))
|
||||
.backgroundColor($r('app.color.module_item_bg_color'))
|
||||
.onClick(() => {
|
||||
this.appPathStack.pushPathByName('DetailedPagePathStack', null)
|
||||
})
|
||||
}, (item: DataSource, index: number) => index + JSON.stringify(item))
|
||||
}
|
||||
.width('auto')
|
||||
.height('auto')
|
||||
.listDirection(this.listDirection)
|
||||
// .divider({ "strokeWidth": 1 })
|
||||
.lanes(new BreakpointType(this.lanesArray[0], this.lanesArray[1],
|
||||
this.lanesArray[2]).getValue(this.currentWidthBreakpoint), "12vp")
|
||||
}
|
||||
}
|
||||
.borderRadius($r('sys.float.corner_radius_level8'))
|
||||
.margin({ bottom: "10vp" })
|
||||
.align(Alignment.Center)
|
||||
.width('92%')
|
||||
}
|
||||
.width("100%")
|
||||
}
|
||||
}
|
||||
|
||||
@Component
|
||||
export struct HealthResultCard {
|
||||
@State image: Resource = $r('app.media.noImage');
|
||||
@State mainText: string = '主标题文本';
|
||||
@State subText: string = '子标题文本';
|
||||
@State descriptionText: string = '这是一个描述文本,用于展示一些详细信息。';
|
||||
@State tagTextList: string[] = ['标签1', '标签2', '标签3', "标签4"];
|
||||
@State tagTextColorList: Color[] = [Color.Brown, Color.Green, Color.Gray, Color.Blue];
|
||||
@StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Row() {
|
||||
// 左侧健康指标区域
|
||||
Column() {
|
||||
// BMI数值显示
|
||||
Text(this.mainText)
|
||||
.fontSize($r('app.integer.title_text_L'))
|
||||
.fontColor($r('app.color.primary_color'))
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.textAlign(TextAlign.Center)
|
||||
.margin({ bottom: 4 })
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.width('100%')
|
||||
|
||||
// 健康状态标签
|
||||
Text(this.subText)
|
||||
.fontSize($r('app.integer.body_text_M'))
|
||||
.fontColor($r('app.color.content_font_color'))
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.textAlign(TextAlign.Center)
|
||||
.margin({ bottom: 8 })
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.width('100%')
|
||||
|
||||
// 健康建议文本
|
||||
Text(this.descriptionText)
|
||||
.fontSize($r('app.integer.caption_text_L'))
|
||||
.fontColor($r('app.color.content_sub_title_font_color'))
|
||||
.textAlign(TextAlign.Center)
|
||||
.maxLines(2)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.width('100%')
|
||||
}
|
||||
.width('40%')
|
||||
.height('100%')
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.padding({ left: 15, right: 10 })
|
||||
|
||||
// 分隔线
|
||||
Divider()
|
||||
.vertical(true)
|
||||
.height('60%')
|
||||
.strokeWidth(1)
|
||||
.color($r('app.color.divider_color'))
|
||||
|
||||
// 右侧健康知识科普区域
|
||||
Column() {
|
||||
Text('健康知识')
|
||||
.fontSize($r('app.integer.subtitle_text_M'))
|
||||
.fontColor($r('app.color.content_font_color'))
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.margin({ bottom: 6 })
|
||||
.width('100%')
|
||||
|
||||
Text('保持健康的生活方式,均衡饮食,适量运动,定期体检是维护健康的重要方法。')
|
||||
.fontSize($r('app.integer.body_text_S'))
|
||||
.fontColor($r('app.color.content_sub_title_font_color'))
|
||||
.maxLines(3)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.width('100%')
|
||||
.margin({ bottom: 8 })
|
||||
|
||||
// 标签区域
|
||||
Row() {
|
||||
ForEach(this.tagTextList, (item: string, index: number) => {
|
||||
Text(item)
|
||||
.width(52)
|
||||
.height(18)
|
||||
.textAlign(TextAlign.Center)
|
||||
.fontSize($r('app.integer.caption_text_M'))
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(this.tagTextColorList[index])
|
||||
.borderColor(this.tagTextColorList[index])
|
||||
.borderWidth(1)
|
||||
.borderRadius($r('sys.float.corner_radius_level2'))
|
||||
.margin({ right: 4 })
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.justifyContent(FlexAlign.Start)
|
||||
}
|
||||
.width('55%')
|
||||
.height('100%')
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
.padding({ left: 10, right: 15 })
|
||||
}
|
||||
.borderRadius($r('sys.float.corner_radius_level8'))
|
||||
.backgroundColor($r('app.color.comp_background_primary_trans'))
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
.height(CommonConstants.FULL_PERCENT)
|
||||
}
|
||||
.margin({ bottom: "8px" })
|
||||
}
|
||||
}
|
||||
@@ -1,260 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
DataSource, Data
|
||||
} from '../viewmodel/HeightWeightInputModuleData';
|
||||
import { LoadingStatus } from '../common/CommonEnums';
|
||||
import { LoadingFailedView } from '../view/LoadingFailedView';
|
||||
|
||||
import { BreakpointConstants } from '../common/BreakpointConstants';
|
||||
import { BreakpointType } from '../util/BreakpointType';
|
||||
import LazyDataSource from '../util/LazyDataSource';
|
||||
import { CommonConstants } from '../common/CommonConstants';
|
||||
import { ModuleTitleComponent } from '../common/ModuleTitleComponent'
|
||||
|
||||
|
||||
@Component
|
||||
export struct HeightWeightInputModule {
|
||||
@State itemModel: Data =
|
||||
Data.getInstance();
|
||||
@Prop listDirection: Axis = Axis.Horizontal
|
||||
@State moduleTitle: string = "身高体重计算";
|
||||
@State moduleRedirectContent: string = "查看更多";
|
||||
@State loadingStatus: LoadingStatus = LoadingStatus.OFF;
|
||||
@State lazyDataSource: LazyDataSource<DataSource> =
|
||||
this.itemModel.lazyDataSource;
|
||||
private spaceArray: string[] = ['8vp', '16vp', '20vp'];
|
||||
@Consume('appPathStack') appPathStack: NavPathStack;
|
||||
@StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
|
||||
|
||||
jump(): void {
|
||||
this.appPathStack.pushPathByName('EmptyPagePathStack', null);
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
this.loadResources();
|
||||
|
||||
}
|
||||
|
||||
loadResources(): void {
|
||||
this.loadingStatus = LoadingStatus.LOADING;
|
||||
this.itemModel.getResources().then(() => {
|
||||
this.loadingStatus = LoadingStatus.SUCCESS;
|
||||
}).catch(() => {
|
||||
this.loadingStatus = LoadingStatus.FAILED;
|
||||
});
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ModuleTitleComponent({ title: this.moduleTitle, moduleRedirectContent: this.moduleRedirectContent })
|
||||
|
||||
if (this.loadingStatus === LoadingStatus.FAILED) {
|
||||
LoadingFailedView(() => this.loadResources())
|
||||
}
|
||||
if (this.loadingStatus === LoadingStatus.SUCCESS) {
|
||||
List({
|
||||
space: new BreakpointType(this.spaceArray[0], this.spaceArray[1],
|
||||
this.spaceArray[2]).getValue(this.currentWidthBreakpoint)
|
||||
}) {
|
||||
LazyForEach(this.lazyDataSource, (item: DataSource) => {
|
||||
ListItem() {
|
||||
HorizontalGraphicTextFunctionItem2({
|
||||
icon: item.getIcon(),
|
||||
title: item.getTitle(),
|
||||
description: item.getDescription()
|
||||
})
|
||||
}
|
||||
.width('150vp')
|
||||
.height('60vp')
|
||||
.onClick(() => {
|
||||
this.jump()
|
||||
})
|
||||
.borderRadius($r('sys.float.corner_radius_level4'))
|
||||
.backgroundColor($r('app.color.comp_background_primary_trans'))
|
||||
}, (item: DataSource, index: number) => index + JSON.stringify(item))
|
||||
}
|
||||
.width('auto')
|
||||
.height('auto')
|
||||
.listDirection(this.listDirection)
|
||||
.scrollBar(BarState.Off)
|
||||
}
|
||||
}
|
||||
.width('92%')
|
||||
.margin({ bottom: "10vp" })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component
|
||||
export struct HorizontalGraphicTextFunctionItem2 {
|
||||
@State title: string = '模块名';
|
||||
@State description: string = '跳转';
|
||||
@State icon: Resource = $r("app.media.ic_public_app");
|
||||
@State heightValue: number = 170;
|
||||
@State weightValue: number = 65;
|
||||
@State heightUnit: string = 'cm';
|
||||
@State weightUnit: string = 'kg';
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
Column() {
|
||||
/**
|
||||
* TODO:
|
||||
* please modify it according to the actual situation.
|
||||
* directly modify {@link SwiperFlatten_HorizontalGraphicTextFunctionItem2Model#TITLES}
|
||||
* or refactor method {@code getResources()} to implement your custom code logic.
|
||||
* @see SwiperFlatten_HorizontalGraphicTextFunctionItem2Model#getResources()
|
||||
*/
|
||||
Text(this.title)
|
||||
.margin({ bottom: '3vp' })
|
||||
.fontColor($r('app.color.font_primary'))
|
||||
.maxFontSize($r('app.integer.subtitle_text_M'))
|
||||
.minFontSize($r('app.integer.caption_text_L'))
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
|
||||
// 身高输入区域
|
||||
Row() {
|
||||
Text('身高:')
|
||||
.fontColor($r('app.color.font_primary'))
|
||||
.fontSize($r('app.integer.body_text_S'))
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.width('20%')
|
||||
|
||||
Column() {
|
||||
// 文本框显示当前值
|
||||
Text(this.heightValue.toString())
|
||||
.fontColor($r('app.color.font_primary'))
|
||||
.fontSize($r('app.integer.body_text_M'))
|
||||
.textAlign(TextAlign.Center)
|
||||
.width('100%')
|
||||
.margin({ bottom: '4vp' })
|
||||
|
||||
// 滑动拉杆
|
||||
Slider({
|
||||
value: this.heightValue,
|
||||
min: 100,
|
||||
max: 250,
|
||||
step: 1,
|
||||
style: SliderStyle.OutSet
|
||||
})
|
||||
.width('100%')
|
||||
.height('20vp')
|
||||
.onChange((value: number) => {
|
||||
this.heightValue = Math.round(value);
|
||||
})
|
||||
}
|
||||
.width('60%')
|
||||
|
||||
// 单位选择器
|
||||
Picker({ range: ['cm', 'm'] })
|
||||
.width('20%')
|
||||
.selected(this.heightUnit === 'cm' ? 0 : 1)
|
||||
.onChange((index: number) => {
|
||||
this.heightUnit = index === 0 ? 'cm' : 'm';
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.margin({ bottom: '8vp' })
|
||||
|
||||
// 体重输入区域
|
||||
Row() {
|
||||
Text('体重:')
|
||||
.fontColor($r('app.color.font_primary'))
|
||||
.fontSize($r('app.integer.body_text_S'))
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.width('20%')
|
||||
|
||||
Column() {
|
||||
// 文本框显示当前值
|
||||
Text(this.weightValue.toString())
|
||||
.fontColor($r('app.color.font_primary'))
|
||||
.fontSize($r('app.integer.body_text_M'))
|
||||
.textAlign(TextAlign.Center)
|
||||
.width('100%')
|
||||
.margin({ bottom: '4vp' })
|
||||
|
||||
// 滑动拉杆
|
||||
Slider({
|
||||
value: this.weightValue,
|
||||
min: 30,
|
||||
max: 200,
|
||||
step: 0.5,
|
||||
style: SliderStyle.OutSet
|
||||
})
|
||||
.width('100%')
|
||||
.height('20vp')
|
||||
.onChange((value: number) => {
|
||||
this.weightValue = Math.round(value * 2) / 2;
|
||||
})
|
||||
}
|
||||
.width('60%')
|
||||
|
||||
// 单位选择器
|
||||
Picker({ range: ['kg', 'lb'] })
|
||||
.width('20%')
|
||||
.selected(this.weightUnit === 'kg' ? 0 : 1)
|
||||
.onChange((index: number) => {
|
||||
this.weightUnit = index === 0 ? 'kg' : 'lb';
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
|
||||
/**
|
||||
* TODO:
|
||||
* please modify it according to the actual situation.
|
||||
* directly modify {@link SwiperFlatten_HorizontalGraphicTextFunctionItem2Model#DESCRIPTIONS}
|
||||
* or refactor method {@code getResources()} to implement your custom code logic.
|
||||
* @see SwiperFlatten_HorizontalGraphicTextFunctionItem2Model#getResources()
|
||||
*/
|
||||
Text(this.description)
|
||||
.fontColor($r('app.color.font_secondary'))
|
||||
.maxFontSize($r('app.integer.body_text_S'))
|
||||
.minFontSize($r('app.integer.caption_text_M'))
|
||||
.fontWeight(FontWeight.Regular)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.width('50%')
|
||||
.layoutWeight(1)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.padding({ left: 6, right: 2 })
|
||||
|
||||
/**
|
||||
* TODO:
|
||||
* please modify it according to the actual situation.
|
||||
* directly modify {@link SwiperFlatten_HorizontalGraphicTextFunctionItem2Model#ICONS}
|
||||
* or refactor method {@code getResources()} to implement your custom code logic.
|
||||
* @see SwiperFlatten_HorizontalGraphicTextFunctionItem2Model#getResources()
|
||||
*/
|
||||
Column() {
|
||||
Image(this.icon)
|
||||
.height('60%')
|
||||
.constraintSize({ maxWidth: '100%' })
|
||||
.objectFit(ImageFit.Contain)
|
||||
}
|
||||
.width('30%')
|
||||
.margin({ right: 2 })
|
||||
.alignItems(HorizontalAlign.End)
|
||||
}
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
.borderRadius($r('sys.float.corner_radius_level8'))
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
.height(CommonConstants.FULL_PERCENT)
|
||||
}
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
import {
|
||||
DataSource, DataSourceStyleAStyleA
|
||||
} from '../viewmodel/PageTitleModuleData';
|
||||
import { LoadingStatus } from '../common/CommonEnums';
|
||||
import { BreakpointConstants } from '../common/BreakpointConstants';
|
||||
import { BreakpointType } from '../util/BreakpointType';
|
||||
import { CommonConstants } from '../common/CommonConstants';
|
||||
|
||||
@Component
|
||||
struct IconTextItem {
|
||||
@Consume('appPathStack') appPathStack: NavPathStack;
|
||||
@StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
|
||||
|
||||
jump(): void {
|
||||
this.appPathStack.pushPathByName('EmptyPagePathStack', null);
|
||||
}
|
||||
|
||||
private icon: Resource = $r('app.media.noImage');
|
||||
private title: string = "BMI计算器";
|
||||
private iconColor?: string = '#2D70F1';
|
||||
private iconSize: number = 32;
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Image(this.icon)
|
||||
.width(this.iconSize)
|
||||
.height(this.iconSize)
|
||||
.fillColor(this.iconColor)
|
||||
.onClick(() => {
|
||||
this.jump()
|
||||
})
|
||||
|
||||
Text(this.title)
|
||||
.fontColor('#333333')
|
||||
.fontSize($r('app.integer.body_text_S'))
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.margin({ top: '5px' })
|
||||
.onClick(() => {
|
||||
this.jump()
|
||||
})
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.width('100%')
|
||||
}
|
||||
}
|
||||
|
||||
@Component
|
||||
export struct PageTitleModule {
|
||||
@Consume('appPathStack') appPathStack: NavPathStack;
|
||||
@StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
|
||||
@State functionModel: DataSource = DataSource.getInstance();
|
||||
@State items: Array<DataSourceStyleAStyleA> = [];
|
||||
@State loadingStatus: LoadingStatus = LoadingStatus.LOADING;
|
||||
@State rowHeight: number = 80;
|
||||
@State rowGap: number = 6;
|
||||
private columnGapArray: number[] = [6, 10, 12];
|
||||
private columnNumberArray: number[] = [1, 8, 8];
|
||||
private rowNumberArray: number[] = [1, 1, 1];
|
||||
|
||||
aboutToAppear() {
|
||||
this.loadData();
|
||||
}
|
||||
|
||||
async loadData() {
|
||||
try {
|
||||
this.loadingStatus = LoadingStatus.LOADING;
|
||||
await this.functionModel.getResources();
|
||||
this.loadingStatus = LoadingStatus.SUCCESS;
|
||||
|
||||
this.items = this.functionModel.getAllItems();
|
||||
} catch (error) {
|
||||
this.loadingStatus = LoadingStatus.FAILED;
|
||||
console.error('Failed to load data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
jump(): void {
|
||||
this.appPathStack.pushPathByName('EmptyPagePathStack', null);
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Column() {
|
||||
Image(this.functionModel.getBannerImage())
|
||||
.objectFit(ImageFit.Fill)
|
||||
}
|
||||
.height(100)
|
||||
|
||||
if (this.loadingStatus === LoadingStatus.SUCCESS) {
|
||||
Grid() {
|
||||
ForEach(this.items, (item: DataSourceStyleAStyleA) => {
|
||||
GridItem() {
|
||||
IconTextItem({
|
||||
icon: item.getIcon(),
|
||||
title: item.getTitle(),
|
||||
iconColor: '#2196F3'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
.columnsTemplate(("1fr ").repeat(new BreakpointType(this.columnNumberArray[0], this.columnNumberArray[1],
|
||||
this.columnNumberArray[2]).getValue(this.currentWidthBreakpoint)).trim())
|
||||
.rowsTemplate(("1fr ").repeat(new BreakpointType(this.rowNumberArray[0], this.rowNumberArray[1],
|
||||
this.rowNumberArray[2]).getValue(this.currentWidthBreakpoint)).trim())
|
||||
.height(this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ?
|
||||
(this.rowGap + this.rowHeight) * new BreakpointType(this.rowNumberArray[0], this.rowNumberArray[1],
|
||||
this.rowNumberArray[2]).getValue(this.currentWidthBreakpoint) :
|
||||
(this.rowGap + this.rowHeight + 30) * new BreakpointType(this.rowNumberArray[0], this.rowNumberArray[1],
|
||||
this.rowNumberArray[2]).getValue(this.currentWidthBreakpoint))
|
||||
.columnsGap(new BreakpointType(this.columnGapArray[0], this.columnGapArray[1],
|
||||
this.columnGapArray[2]).getValue(this.currentWidthBreakpoint))
|
||||
.rowsGap(this.rowGap)
|
||||
} else if (this.loadingStatus === LoadingStatus.FAILED) {
|
||||
Text('加载中...')
|
||||
.fontSize(14)
|
||||
.fontColor('#999999')
|
||||
.margin(16)
|
||||
} else {
|
||||
Text('加载失败,点击重试')
|
||||
.fontSize(14)
|
||||
.fontColor('#999999')
|
||||
.margin(16)
|
||||
.onClick(() => {
|
||||
this.loadData();
|
||||
})
|
||||
}
|
||||
}
|
||||
.width(CommonConstants.FULL_PERCENT)
|
||||
.height(180)
|
||||
.backgroundColor($r('app.color.comp_background_primary_trans'))
|
||||
}
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import LazyDataSource from '../util/LazyDataSource';
|
||||
|
||||
export class DataSource {
|
||||
private static instance: DataSource;
|
||||
lazyDataSource: LazyDataSource<DataSourceStyleAStyleA> = new LazyDataSource();
|
||||
static readonly IMAGES: Resource[] =
|
||||
[$r('app.media.background'), $r('app.media.background')];
|
||||
static readonly TITLES: string[] =
|
||||
['权益中心', '捞币兑换'];
|
||||
static readonly CONTENTS: string[] =
|
||||
['会员福利月月领', '可在商城兑换福利'];
|
||||
static readonly PAGES: string[] =
|
||||
['EmptyPagePathStack', 'EmptyPagePathStack'];
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public static getInstance(): DataSource {
|
||||
if (!DataSource.instance) {
|
||||
DataSource.instance =
|
||||
new DataSource();
|
||||
}
|
||||
return DataSource.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data loaded on current view converts network data into rendering data
|
||||
*/
|
||||
getResources(): Promise<void> {
|
||||
|
||||
/**
|
||||
* use your web request here
|
||||
*/
|
||||
return new Promise((resolve: Function) => {
|
||||
const modelList: Array<DataSourceStyleAStyleA> = [];
|
||||
for (let index = 0; index < DataSource.IMAGES.length;
|
||||
index++) {
|
||||
modelList.push(new DataSourceStyleAStyleA(
|
||||
DataSource.IMAGES[index],
|
||||
DataSource.TITLES[index],
|
||||
DataSource.CONTENTS[index],
|
||||
DataSource.PAGES[index])
|
||||
);
|
||||
}
|
||||
this.lazyDataSource.pushArrayData(modelList);
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class DataSourceStyleAStyleA {
|
||||
private image: Resource;
|
||||
private title: string;
|
||||
private content: string;
|
||||
private page: string;
|
||||
|
||||
constructor(image: Resource, title: string, content: string, page: string) {
|
||||
this.image = image;
|
||||
this.title = title;
|
||||
this.content = content;
|
||||
this.page = page;
|
||||
}
|
||||
|
||||
getImage(): Resource {
|
||||
return this.image;
|
||||
}
|
||||
|
||||
getTitle(): string {
|
||||
return this.title;
|
||||
}
|
||||
|
||||
getContent(): string {
|
||||
return this.content;
|
||||
}
|
||||
|
||||
getPage(): string {
|
||||
return this.page;
|
||||
}
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import LazyDataSource from '../util/LazyDataSource';
|
||||
|
||||
export class Data {
|
||||
private static instance: Data;
|
||||
lazyDataSource: LazyDataSource<DataSource> = new LazyDataSource();
|
||||
static readonly IMAGES: Resource[] =
|
||||
[$r(('app.media.realImageGen_common_3')), $r(('app.media.realImageGen_common_0'))];
|
||||
static readonly MAIN_TEXT: string[] = ['BMI 数值', '健康建议'];
|
||||
static readonly SUB_TEXT: string[] = ['您的 BMI 值为', '根据您的 BMI 值,我们为您提供以下建议'];
|
||||
static readonly DESCRIPTION_TEXT: string[] = ['保持健康体重,享受美好生活', '均衡饮食,适量运动,定期体检'];
|
||||
static readonly TAG_TEXTS_LIST: string[][] = [['健康', '体重'], ['饮食', '运动']];
|
||||
static readonly TAG_TEXT_COLORS_LIST: Color[][] =
|
||||
[[Color.Brown, Color.Green, Color.Gray], [Color.Brown, Color.Green, Color.Gray],
|
||||
[Color.Brown, Color.Green, Color.Gray], [Color.Brown, Color.Green, Color.Gray],
|
||||
[Color.Brown, Color.Green, Color.Gray], [Color.Brown, Color.Green, Color.Gray]];
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public static getInstance(): Data {
|
||||
if (!Data.instance) {
|
||||
Data.instance =
|
||||
new Data();
|
||||
}
|
||||
return Data.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data loaded on current view converts network data into rendering data
|
||||
*/
|
||||
getResources(): Promise<void> {
|
||||
|
||||
/**
|
||||
* use your web request here
|
||||
*/
|
||||
return new Promise((resolve: Function) => {
|
||||
const modelList: Array<DataSource> = [];
|
||||
for (let index = 0; index < Data.IMAGES.length;
|
||||
index++) {
|
||||
modelList.push(new DataSource(
|
||||
Data.IMAGES[index],
|
||||
Data.MAIN_TEXT[index],
|
||||
Data.SUB_TEXT[index],
|
||||
Data.DESCRIPTION_TEXT[index],
|
||||
Data.TAG_TEXTS_LIST[index],
|
||||
Data.TAG_TEXT_COLORS_LIST[index]));
|
||||
}
|
||||
this.lazyDataSource.pushArrayData(modelList);
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class DataSource {
|
||||
private image: Resource;
|
||||
private mainText: string;
|
||||
private subText: string;
|
||||
private descriptionText: string;
|
||||
private tagTextList: string[];
|
||||
private tagTextColorList: Color[];
|
||||
|
||||
constructor(image: Resource, mainText: string, subText: string,
|
||||
descriptionText: string, tagTextList: string[], tagTextColorList: Color[]) {
|
||||
this.image = image;
|
||||
this.mainText = mainText;
|
||||
this.subText = subText;
|
||||
this.descriptionText = descriptionText;
|
||||
this.tagTextList = tagTextList;
|
||||
this.tagTextColorList = tagTextColorList;
|
||||
}
|
||||
|
||||
getImage(): Resource {
|
||||
return this.image;
|
||||
}
|
||||
|
||||
getMainText(): string {
|
||||
return this.mainText;
|
||||
}
|
||||
|
||||
getSubText(): string {
|
||||
return this.subText;
|
||||
}
|
||||
|
||||
getDescriptionText(): string {
|
||||
return this.descriptionText;
|
||||
}
|
||||
|
||||
getTagTextList(): string[] {
|
||||
return this.tagTextList;
|
||||
}
|
||||
|
||||
getTagTextColorList(): Color[] {
|
||||
return this.tagTextColorList;
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import LazyDataSource from '../util/LazyDataSource';
|
||||
|
||||
export class Data {
|
||||
private static instance: Data;
|
||||
lazyDataSource: LazyDataSource<DataSource> = new LazyDataSource();
|
||||
static readonly ICONS: Resource[] = [$r('app.media.lib_icon_19'), $r('app.media.lib_icon_19')];
|
||||
static readonly TITLES: string[] = ['身高', '体重'];
|
||||
static readonly DESCRIPTIONS: string[] = ['', ''];
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public static getInstance(): Data {
|
||||
if (!Data.instance) {
|
||||
Data.instance =
|
||||
new Data();
|
||||
}
|
||||
return Data.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data loaded on current view converts network data into rendering data
|
||||
*/
|
||||
getResources(): Promise<void> {
|
||||
|
||||
/**
|
||||
* use your web request here
|
||||
*/
|
||||
return new Promise((resolve: Function) => {
|
||||
const modelList: Array<DataSource> = [];
|
||||
for (let index = 0; index < Data.ICONS.length;
|
||||
index++) {
|
||||
modelList.push(new DataSource(
|
||||
Data.ICONS[index],
|
||||
Data.TITLES[index],
|
||||
Data.DESCRIPTIONS[index]));
|
||||
}
|
||||
this.lazyDataSource.pushArrayData(modelList);
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class DataSource {
|
||||
private icon: Resource;
|
||||
private title: string;
|
||||
private description: string;
|
||||
|
||||
constructor(icon: Resource, title: string, description: string) {
|
||||
this.icon = icon;
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
getIcon(): Resource {
|
||||
return this.icon;
|
||||
}
|
||||
|
||||
getTitle(): string {
|
||||
return this.title;
|
||||
}
|
||||
|
||||
getDescription(): string {
|
||||
return this.description;
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import LazyDataSource from '../util/LazyDataSource';
|
||||
|
||||
export class DataSourceStyleAStyleA {
|
||||
private icon: Resource;
|
||||
private title: string;
|
||||
|
||||
constructor(icon: Resource, title: string) {
|
||||
this.icon = icon;
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
getIcon(): Resource {
|
||||
return this.icon;
|
||||
}
|
||||
|
||||
getTitle(): string {
|
||||
return this.title;
|
||||
}
|
||||
}
|
||||
|
||||
export class DataSource {
|
||||
private static instance: DataSource;
|
||||
lazyDataSource: LazyDataSource<DataSourceStyleAStyleA> = new LazyDataSource();
|
||||
private allItems: Array<DataSourceStyleAStyleA> = [];
|
||||
static readonly ICONS: Resource[] = [$r('app.media.lib_icon_171')];
|
||||
static readonly TITLES: string[] = ['BMI计算器'];
|
||||
static readonly BANNER_IMAGE: Resource = $r(('app.media.realImageGen_common_0'));
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public static getInstance(): DataSource {
|
||||
if (!DataSource.instance) {
|
||||
DataSource.instance = new DataSource();
|
||||
}
|
||||
return DataSource.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data loaded on current view converts network data into rendering data
|
||||
*/
|
||||
getResources(): Promise<void> {
|
||||
/**
|
||||
* use your web request here
|
||||
*/
|
||||
return new Promise((resolve: Function) => {
|
||||
const modelList: Array<DataSourceStyleAStyleA> = [];
|
||||
for (let index = 0; index < DataSource.ICONS.length; index++) {
|
||||
modelList.push(new DataSourceStyleAStyleA(
|
||||
DataSource.ICONS[index],
|
||||
DataSource.TITLES[index]
|
||||
));
|
||||
}
|
||||
this.allItems = modelList;
|
||||
this.lazyDataSource.pushArrayData(modelList);
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
|
||||
getAllItems(): Array<DataSourceStyleAStyleA> {
|
||||
return this.allItems;
|
||||
}
|
||||
|
||||
getBannerImage(): Resource {
|
||||
return DataSource.BANNER_IMAGE;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@Component
|
||||
export struct Module0 {
|
||||
build() {
|
||||
Column() {
|
||||
Row() {
|
||||
Text('健康')
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.margin(30)
|
||||
Blank()
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Center)
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
|
||||
Grid() {
|
||||
GridItem() {
|
||||
}
|
||||
.padding({
|
||||
top: 5,
|
||||
left: 3,
|
||||
bottom: 5,
|
||||
right: 3
|
||||
})
|
||||
}
|
||||
.backgroundColor('#FFFFFF')
|
||||
.width('95%')
|
||||
.borderRadius(20)
|
||||
.margin({ bottom: 10 })
|
||||
.clip(true)
|
||||
.maxCount(1)
|
||||
.alignSelf(ItemAlign.Center)
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.backgroundColor('#FFFFFF')
|
||||
.margin({ bottom: 10 })
|
||||
.clip(true)
|
||||
.constraintSize({ minHeight: ' 15.07%' })
|
||||
.backgroundColor('#FFFFFF')
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,346 @@
|
||||
import http from '@ohos.net.http';
|
||||
//
|
||||
// async function fetchHeartRateData(): Promise<number> {
|
||||
// const httpRequest = http.createHttp();
|
||||
// const url = 'https://uapis.cn/api/v1/misc/randomnumber?min=60&max=120&count=1';
|
||||
//
|
||||
// const response = await httpRequest.request(url, {
|
||||
// method: http.RequestMethod.GET
|
||||
// });
|
||||
//
|
||||
// const result = JSON.parse(response.result.toString());
|
||||
// return Number(result.numbers);
|
||||
// }
|
||||
|
||||
function getRateData(): number {
|
||||
return Math.trunc(Math.random() * 60 + 60);
|
||||
}
|
||||
|
||||
// 健康数据结构体
|
||||
class HealthData {
|
||||
caloriesCurrent: number = 0;
|
||||
caloriesTarget: number = 0;
|
||||
stepsCurrent: number = 0;
|
||||
stepsTarget: number = 0;
|
||||
intensityCurrent: number = 0;
|
||||
intensityTarget: number = 0;
|
||||
activityCount: number = 0;
|
||||
sleepDuration: string = '';
|
||||
sleepQuality: string = '';
|
||||
heartRate: number = 0;
|
||||
bloodOxygen: number = 0;
|
||||
weight: number = 0;
|
||||
}
|
||||
|
||||
|
||||
interface DBConfig {
|
||||
url: string;
|
||||
user: string;
|
||||
password: string;
|
||||
database: string;
|
||||
}
|
||||
|
||||
const DB_CONFIG: DBConfig = {
|
||||
url: 'YOUR_DATABASE_URL',
|
||||
user: 'YOUR_USERNAME',
|
||||
password: 'YOUR_PASSWORD',
|
||||
database: 'YOUR_DB_NAME'
|
||||
};
|
||||
|
||||
@Component
|
||||
export struct Module1 {
|
||||
@State healthData: HealthData = new HealthData();
|
||||
|
||||
aboutToAppear() {
|
||||
this.loadHealthData();
|
||||
this.healthData.heartRate = getRateData();
|
||||
}
|
||||
|
||||
// 模拟数据加载方法(需替换为实际数据库连接)
|
||||
loadHealthData() {
|
||||
this.healthData = {
|
||||
caloriesCurrent: 117,
|
||||
caloriesTarget: 500,
|
||||
stepsCurrent: 1889,
|
||||
stepsTarget: 8000,
|
||||
intensityCurrent: 13,
|
||||
intensityTarget: 30,
|
||||
activityCount: 4,
|
||||
sleepDuration: '8时27分',
|
||||
sleepQuality: '良好',
|
||||
heartRate: 96,
|
||||
bloodOxygen: 97,
|
||||
weight: 58.50
|
||||
};
|
||||
|
||||
// 真实数据加载示例伪代码:
|
||||
// fetchDataFromDB().then(data => {
|
||||
// this.healthData = data;
|
||||
// });
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Row() {
|
||||
Column() {
|
||||
Text('卡路里')
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#2E86C1')
|
||||
Text(this.healthData.caloriesCurrent.toString())
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#3498DB')
|
||||
Text(`/${this.healthData.caloriesTarget}千卡`)
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
.layoutWeight(1)
|
||||
|
||||
Blank()
|
||||
Column() {
|
||||
Text('步数')
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#28B463')
|
||||
Text(this.healthData.stepsCurrent.toString())
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#2ECC71')
|
||||
Text(`/${this.healthData.stepsTarget}步`)
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
.layoutWeight(1)
|
||||
|
||||
Blank()
|
||||
Column() {
|
||||
Text('中高强度')
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#7D3C98')
|
||||
Text(this.healthData.intensityCurrent.toString())
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#9B59B6')
|
||||
Text(`/${this.healthData.intensityTarget}分钟`)
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
.layoutWeight(1)
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Center)
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
.padding({ top: '10.0px', bottom: '10.0px' })
|
||||
|
||||
Row() {
|
||||
Column() {
|
||||
Text(`活动次数 ${this.healthData.activityCount} 次`)
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
.layoutWeight(1)
|
||||
|
||||
Blank()
|
||||
Column() {
|
||||
Text('睡眠')
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#D35400')
|
||||
Text(this.healthData.sleepDuration)
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#E67E22')
|
||||
Text(`12月23日 睡眠质量${this.healthData.sleepQuality}`)
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
Text('有待提高')
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
.layoutWeight(1)
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Center)
|
||||
.justifyContent(FlexAlign.SpaceBetween)
|
||||
.padding({ top: '10.0px', bottom: '10.0px' })
|
||||
|
||||
Grid() {
|
||||
GridItem() {
|
||||
Column() {
|
||||
Text('心率')
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#C0392B')
|
||||
Text(`${this.healthData.heartRate}次/分`)
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#E74C3C')
|
||||
Text('12月23日 16:29')
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
}
|
||||
.padding({
|
||||
top: 5,
|
||||
left: 3,
|
||||
bottom: 5,
|
||||
right: 3
|
||||
})
|
||||
|
||||
GridItem() {
|
||||
Column() {
|
||||
Text('血氧饱和度')
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#16A085')
|
||||
Text(`${this.healthData.bloodOxygen}%`)
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#1ABC9C')
|
||||
Text('12月23日 16:29')
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
}
|
||||
.padding({
|
||||
top: 5,
|
||||
left: 3,
|
||||
bottom: 5,
|
||||
right: 3
|
||||
})
|
||||
|
||||
GridItem() {
|
||||
Column() {
|
||||
Text('体重')
|
||||
.maxFontSize(14)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#8E44AD')
|
||||
Text(`${this.healthData.weight.toFixed(2)}KG`)
|
||||
.maxFontSize(20)
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
.fontColor('#A569BD')
|
||||
Text('9月11日 16:12')
|
||||
.maxFontSize(12)
|
||||
.fontColor('#888888')
|
||||
.margin(2)
|
||||
.minFontSize(8)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ left: '10.0px', right: '10.0px' })
|
||||
}
|
||||
.padding({
|
||||
top: 5,
|
||||
left: 3,
|
||||
bottom: 5,
|
||||
right: 3
|
||||
})
|
||||
}
|
||||
.borderRadius(20)
|
||||
.backgroundColor('#ffffff')
|
||||
.width('95%')
|
||||
.margin({ bottom: 10 })
|
||||
.clip(true)
|
||||
.columnsTemplate(('1fr ').repeat(2))
|
||||
.maxCount(3)
|
||||
.alignSelf(ItemAlign.Center)
|
||||
}
|
||||
.width('95%')
|
||||
.borderRadius(20)
|
||||
.backgroundColor('#ffffff')
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.padding({ top: '10.0px', bottom: '10.0px' })
|
||||
.margin({ bottom: 10 })
|
||||
.clip(true)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
// BMI计算页面组件
|
||||
@Entry
|
||||
@Component
|
||||
struct BMIPage {
|
||||
@State humanWeight: string = ''
|
||||
@State humanHeight: string = ''
|
||||
@State bmiValue: number = 0
|
||||
@State healthAssessment: string = ''
|
||||
@State showError: boolean = false
|
||||
|
||||
// 计算BMI
|
||||
calculateBMI() {
|
||||
// 输入验证
|
||||
if (!this.humanWeight || !this.humanHeight ||
|
||||
isNaN(Number(this.humanWeight)) ||
|
||||
isNaN(Number(this.humanHeight))) {
|
||||
this.showError = true
|
||||
return
|
||||
}
|
||||
|
||||
this.showError = false
|
||||
const humanWeightNum = parseFloat(this.humanWeight)
|
||||
const humanHeightNum = parseFloat(this.humanHeight) / 100.0
|
||||
this.bmiValue = humanWeightNum / (humanHeightNum * humanHeightNum)
|
||||
|
||||
// 健康评估逻辑
|
||||
if (this.bmiValue < 18.5) {
|
||||
this.healthAssessment = "偏瘦 | 建议增加体重"
|
||||
} else if (this.bmiValue < 24.9) {
|
||||
this.healthAssessment = "正常 | 保持良好的生活习惯"
|
||||
} else if (this.bmiValue < 29.9) {
|
||||
this.healthAssessment = "偏胖 | 建议减少体重"
|
||||
} else {
|
||||
this.healthAssessment = "肥胖 | 建议就医咨询"
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
// 输入区域
|
||||
Column({ space: 20 }) {
|
||||
// 体重输入
|
||||
Row() {
|
||||
Text('体重(公斤)').width(100)
|
||||
TextInput({ text: this.humanWeight })
|
||||
.width('60%')
|
||||
.type(InputType.Number)
|
||||
.onChange((value: string) => {
|
||||
this.humanWeight = value
|
||||
})
|
||||
}
|
||||
|
||||
// 身高输入
|
||||
Row() {
|
||||
Text('身高(厘米)').width(100)
|
||||
TextInput({ text: this.humanHeight })
|
||||
.width('60%')
|
||||
.type(InputType.Number)
|
||||
.onChange((value: string) => {
|
||||
this.humanHeight = value
|
||||
})
|
||||
}
|
||||
}.padding(20)
|
||||
|
||||
// 错误提示
|
||||
if (this.showError) {
|
||||
Text('请输入有效的数字')
|
||||
.fontColor(Color.Red)
|
||||
.margin({ bottom: 10 })
|
||||
}
|
||||
|
||||
// 计算按钮
|
||||
Button('计算BMI')
|
||||
.width('80%')
|
||||
.height(50)
|
||||
.onClick(() => {
|
||||
this.calculateBMI()
|
||||
})
|
||||
|
||||
// 结果展示
|
||||
if (this.bmiValue > 0 && !this.showError) {
|
||||
Column() {
|
||||
Text(`BMI值: ${this.bmiValue.toFixed(1)}`)
|
||||
.fontSize(20)
|
||||
.margin({ bottom: 10 })
|
||||
Text(this.healthAssessment)
|
||||
.fontColor('#666')
|
||||
}
|
||||
.width('90%')
|
||||
.padding(20)
|
||||
.backgroundColor('#f5f5f5')
|
||||
.borderRadius(8)
|
||||
.margin({ top: 20 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.padding(20)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@Entry
|
||||
@Component
|
||||
struct Hello {
|
||||
@State message: string = '基于鸿蒙开发';
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
Column() {
|
||||
Text(this.message)
|
||||
.fontSize($r('app.float.page_text_font_size'))
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.onClick(() => {
|
||||
this.message = 'Welcome';
|
||||
})
|
||||
Button() {
|
||||
Text('Next')
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
}
|
||||
.type(ButtonType.Capsule)
|
||||
.margin({
|
||||
top: 20
|
||||
})
|
||||
.backgroundColor('#0D9FFB')
|
||||
.width('40%')
|
||||
.height('5%')
|
||||
.onClick(() => {
|
||||
console.log("用户操作:点击按钮")
|
||||
let uiContext: UIContext = this.getUIContext();
|
||||
let router = uiContext.getRouter();
|
||||
router.pushUrl({
|
||||
url: 'pages/Text'
|
||||
}).then(() => {
|
||||
console.log('系统提示:跳转成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
@@ -1,42 +1,80 @@
|
||||
import { Module0 } from '../home/view/Module0';
|
||||
import { Module1 } from '../home/view/Module1';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State message: string = 'Hello World';
|
||||
private scroller: Scroller = new Scroller();
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
Column() {
|
||||
Text(this.message)
|
||||
.fontSize($r('app.float.page_text_font_size'))
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.onClick(() => {
|
||||
this.message = 'Welcome';
|
||||
})
|
||||
Button() {
|
||||
Text('Next')
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
Stack() {
|
||||
Scroll(this.scroller) {
|
||||
Column() {
|
||||
Module0()
|
||||
Module1()
|
||||
}
|
||||
.type(ButtonType.Capsule)
|
||||
.margin({
|
||||
top: 20
|
||||
})
|
||||
.backgroundColor('#0D9FFB')
|
||||
.width('40%')
|
||||
.height('5%')
|
||||
.onClick(() => {
|
||||
console.log("用户操作:点击按钮")
|
||||
let uiContext: UIContext = this.getUIContext();
|
||||
let router = uiContext.getRouter();
|
||||
router.pushUrl({
|
||||
url: 'pages/Second'
|
||||
}).then(() => {
|
||||
console.log('系统提示:跳转成功')
|
||||
})
|
||||
})
|
||||
.width('100%')
|
||||
}
|
||||
.scrollable(ScrollDirection.Vertical)
|
||||
.scrollBar(BarState.Off)
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.align(Alignment.Top)
|
||||
.backgroundColor($r('app.color.page_bg_color'))
|
||||
|
||||
// 底部按钮
|
||||
Column() {
|
||||
Button('[前往] 计算我的 BMI')
|
||||
.width('80%')
|
||||
.height(50)
|
||||
.type(ButtonType.Capsule)
|
||||
.fontSize(18)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.backgroundColor('#4C61E4')
|
||||
.margin({ bottom: 20 })
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.justifyContent(FlexAlign.End)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.onClick(() => {
|
||||
console.log("用户操作:点击按钮")
|
||||
let uiContext: UIContext = this.getUIContext();
|
||||
let router1 = uiContext.getRouter();
|
||||
router1.pushUrl({
|
||||
url: 'pages/BMI'
|
||||
}).then(() => {
|
||||
console.log('系统提示:跳转成功')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
Column() {
|
||||
Button('[关于] 关于此应用')
|
||||
.width('80%')
|
||||
.height(50)
|
||||
.type(ButtonType.Capsule)
|
||||
.fontSize(18)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.backgroundColor('#4C61E4')
|
||||
.margin({ bottom: 80 })
|
||||
}
|
||||
.width('100%')
|
||||
.height('80%')
|
||||
.justifyContent(FlexAlign.End)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.onClick(() => {
|
||||
console.log("用户操作:点击按钮")
|
||||
let uiContext: UIContext = this.getUIContext();
|
||||
let router2 = uiContext.getRouter();
|
||||
router2.pushUrl({
|
||||
url: 'pages/Hello'
|
||||
}).then(() => {
|
||||
console.log('系统提示:跳转成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,11 @@
|
||||
"deliveryWithInstall": true,
|
||||
"installationFree": false,
|
||||
"pages": "$profile:main_pages",
|
||||
"requestPermissions": [
|
||||
{
|
||||
"name": "ohos.permission.INTERNET"
|
||||
}
|
||||
],
|
||||
"abilities": [
|
||||
{
|
||||
"name": "EntryAbility",
|
||||
|
||||
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 9.3 KiB |
@@ -1,12 +0,0 @@
|
||||
<svg height="40" version="1.1" viewBox="8 8 24 24" width="40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path d="M3.99305556,13.2454977 L6.06358796,11.1749653 C6.3755787,10.8629745 6.88109954,10.8629745 7.19309028,11.1749653 C7.50481481,11.486956 7.50481481,11.9924769 7.19309028,12.3042014 L5.12255787,14.375 L7.19309028,16.4455324 C7.50481481,16.7572569 7.50481481,17.263044 7.19309028,17.5750347 C6.88109954,17.8867593 6.3755787,17.8867593 6.06358796,17.5750347 L3.99305556,15.5042361 L1.92252315,17.5750347 C1.61053241,17.8867593 1.10501157,17.8867593 0.793020833,17.5750347 C0.481296296,17.263044 0.481296296,16.7572569 0.793020833,16.4455324 L2.86355324,14.375 L0.793020833,12.3042014 C0.481296296,11.9924769 0.481296296,11.486956 0.793020833,11.1749653 C1.10501157,10.8629745 1.61053241,10.8629745 1.92252315,11.1749653 L3.99305556,13.2454977 Z M3.19444444,3.19444444 L3.19444444,0.798611111 C3.19444444,0.357511574 3.55195602,0 3.99305556,0 C4.43415509,0 4.79166667,0.357511574 4.79166667,0.798611111 L4.79166667,3.19444444 L7.1875,3.19444444 C7.62859954,3.19444444 7.98611111,3.55195602 7.98611111,3.99305556 C7.98611111,4.43388889 7.62859954,4.79166667 7.1875,4.79166667 L4.79166667,4.79166667 L4.79166667,7.1875 C4.79166667,7.62833333 4.43415509,7.98611111 3.99305556,7.98611111 C3.55195602,7.98611111 3.19444444,7.62833333 3.19444444,7.1875 L3.19444444,4.79166667 L0.798611111,4.79166667 C0.357511574,4.79166667 0,4.43388889 0,3.99305556 C0,3.55195602 0.357511574,3.19444444 0.798611111,3.19444444 L3.19444444,3.19444444 Z M11.4467593,4.79166667 C11.0056597,4.79166667 10.6481481,4.43388889 10.6481481,3.99305556 C10.6481481,3.55195602 11.0056597,3.19444444 11.4467593,3.19444444 L17.8356481,3.19444444 C18.2767477,3.19444444 18.6342593,3.55195602 18.6342593,3.99305556 C18.6342593,4.43388889 18.2767477,4.79166667 17.8356481,4.79166667 L11.4467593,4.79166667 Z" id="uxs-a"></path>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" stroke="none" stroke-width="40">
|
||||
|
||||
<g transform="translate(9.896 10.135)">
|
||||
<use fill="#000" xlink:href="#uxs-a"></use>
|
||||
<path d="M17.8356481,9.31712963 C19.0117361,9.31712963 19.9652778,10.2704051 19.9652778,11.4467593 L19.9652778,17.8356481 C19.9652778,19.0117361 19.0117361,19.9652778 17.8356481,19.9652778 L11.4467593,19.9652778 C10.2706713,19.9652778 9.31712963,19.0117361 9.31712963,17.8356481 L9.31712963,11.4467593 C9.31712963,10.2704051 10.2706713,9.31712963 11.4467593,9.31712963 L17.8356481,9.31712963 Z M16.7708333,15.7060185 L12.5115741,15.7060185 C12.2176852,15.7060185 11.9791667,15.9442708 11.9791667,16.2384259 C11.9791667,16.5323148 12.2176852,16.7708333 12.5115741,16.7708333 L16.7708333,16.7708333 C17.0647222,16.7708333 17.3032407,16.5323148 17.3032407,16.2384259 C17.3032407,15.9442708 17.0647222,15.7060185 16.7708333,15.7060185 Z M16.7708333,12.5115741 L12.5115741,12.5115741 C12.2176852,12.5115741 11.9791667,12.7498264 11.9791667,13.0439815 C11.9791667,13.3378704 12.2176852,13.5763889 12.5115741,13.5763889 L16.7708333,13.5763889 C17.0647222,13.5763889 17.3032407,13.3378704 17.3032407,13.0439815 C17.3032407,12.7498264 17.0647222,12.5115741 16.7708333,12.5115741 Z" fill="#000" fill-opacity=".6"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="24px" version="1.1" viewbox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>ic_watermark_menu_sport</title>
|
||||
<defs>
|
||||
<path d="M12.9693925,5.52413677 C13.765194,5.1891759 14.1301029,5.05003528 15.5067595,5.76581241 C15.9390517,5.99036609 16.370944,6.31961963 16.4731185,6.50815813 C16.8826164,7.26487055 16.8174326,7.87220853 16.0370273,9.11404349 C15.0726678,10.6501008 13.8659688,12.612633 13.8659688,12.612633 C13.8659688,12.612633 14.5832552,13.2710421 15.37091,13.9915001 L15.7909228,14.3754386 C16.1171823,14.673468 16.4360166,14.9641744 16.7022613,15.2059229 C17.4498749,15.8854881 17.3405021,17.0531278 17.3405021,17.0531278 L17.3405021,17.0531278 L17.7288053,21.07994 C17.7412022,21.1350452 17.75,21.1911344 17.75,21.2497821 C17.75,21.6640551 17.4088851,22 16.98819,22 C16.6642708,22 16.3893394,21.7996533 16.2789669,21.5190104 C16.1931883,21.336376 16.182591,21.1289443 16.182591,21.1289443 L16.182591,21.1289443 L15.6229306,16.9092639 C15.6229306,16.9092639 12.6266779,14.9855021 11.1720408,14.0347407 C10.4854121,13.5830749 10.1518952,13.152664 10.7009583,11.9643598 C10.7779391,11.7978633 10.8609184,11.6217235 10.9396987,11.4587696 L10.9396987,11.4587696 L12.0708166,12.8236072 C12.1262028,12.8907175 12.2081823,12.9259454 12.2901619,12.9259454 C12.3527463,12.9259454 12.4161305,12.9056746 12.4687173,12.8631649 C12.590287,12.7661404 12.6080826,12.590591 12.5091073,12.4715244 L12.5091073,12.4715244 L9.13834806,8.40476089 C9.13194965,8.39669192 9.122552,8.39295264 9.11495389,8.38606449 C8.92480132,7.967265 8.82562606,7.2396796 10.0301256,6.73015334 C10.8843126,6.36842709 12.133201,5.87681002 12.9693925,5.52413677 Z M9.84819624,14.1230559 L11.6118039,15.3035096 C11.6118039,15.3035096 10.1897653,16.8917237 9.75765519,17.3737854 C9.26745114,17.971781 9.06713391,18.1687889 8.21204553,17.845688 C7.81647659,17.696118 7.0932237,17.4331905 6.34296301,17.1561329 L5.84208766,16.9704235 C5.59294901,16.8776111 5.34823359,16.7856787 5.11907756,16.6983014 C5.02717645,16.6660312 4.94440716,16.6335617 4.86630092,16.6002955 C4.51676582,16.5395398 4.25,16.2293868 4.25,15.8536974 C4.25,15.4345825 4.58127146,15.0945497 4.99006627,15.0945497 C5.09187639,15.0945497 5.18882915,15.1160632 5.27703868,15.1539111 L5.27703868,15.1539111 L8.36689794,16.2222156 L9.84819624,14.1230559 Z M15.9299905,9.9669666 L17.5340827,11.80159 C17.5658551,11.8401198 17.75,12.1237183 17.4950609,12.3857776 C17.2169736,12.6716317 16.925165,12.4461982 16.925165,12.4461982 L16.925165,12.4461982 L15.2418008,11.123118 L15.9299905,9.9669666 Z M12.5600946,7.7047281 L10.8775142,8.21996168 L11.8034833,9.66293061 C12.169392,8.73913135 12.2681674,8.40141522 12.5600946,7.7047281 L12.5600946,7.7047281 Z M16.371621,2 C17.2708142,2 18,2.74739489 18,3.67008496 C18,4.59237663 17.2708142,5.33997072 16.371621,5.33997072 C15.4716507,5.33997072 14.7422706,4.59237663 14.7422706,3.67008496 C14.7422706,2.74739489 15.4716507,2 16.371621,2 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd" id="ic_watermark_menu_sport" stroke="none" stroke-width="1">
|
||||
<mask fill="white" id="mask-2">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use fill="#000" id="menu_sport" xlink:href="#path-1"></use>
|
||||
<g fill="#000" fill-rule="nonzero" id="编组" mask="url(#mask-2)">
|
||||
<g id="Rectangle-13-Copy">
|
||||
<rect height="24" width="24" x="0" y="0"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" version="1.1" viewBox="8 8 24 24">
|
||||
<g fill="none" fill-rule="evenodd" stroke="none" stroke-width="40">
|
||||
|
||||
<g transform="translate(7 7)">
|
||||
<rect width="40" height="40" x="0" y="0" transform="matrix(1 0 0 -1 0 26)"/>
|
||||
<g transform="translate(2.167 4.333)">
|
||||
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.708" d="M1.92438658e-15,5.71670974 L0.360273856,5.29469064 C5.21816466,-0.395765879 13.7692897,-1.07069374 19.4597462,3.78719707 C20.0158058,4.2619 20.5325247,4.78083806 21.0048402,5.3389268 L21.3245614,5.71670974 L21.3245614,5.71670974"/>
|
||||
<path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.708" d="M4.33528125,9.97974325 L4.35835174,9.95268396 C7.32672371,6.47109254 12.5554522,6.05504597 16.0370436,9.02341795 C16.3799363,9.31576501 16.6984049,9.63560113 16.9892802,9.97974325 L16.9892802,9.97974325 L16.9892802,9.97974325"/>
|
||||
<rect width="4.015" height="5.174" x="8.581" y="12.848" fill="#000" fill-opacity=".6" rx="2.008"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Public/ic_public_home_filled</title>
|
||||
<defs>
|
||||
<path d="M12.5548977,4.55117487 L12.6529233,4.62758192 L12.6883166,4.65995815 L21,12.5839983 L21,19.25 C21,20.8476809 19.75108,22.1536609 18.1762728,22.2449073 L18,22.25 L6,22.25 C4.40231912,22.25 3.09633912,21.00108 3.00509269,19.4262728 L3,19.25 L3,12.5839983 L11.3117958,4.65995815 C11.6576006,4.33188693 12.1809818,4.29723756 12.5548977,4.55117487 Z M12,13.5 C10.4023191,13.5 9.09633912,14.74892 9.00509269,16.3237272 L9,16.5 L9,20.25 L15,20.25 L15,16.5 C15,14.8431458 13.6568542,13.5 12,13.5 Z M9.39893803,2.34618127 C10.9454248,1.02063659 13.259436,1.06634502 14.75299,2.48330658 L14.75299,2.48330658 L22.4382087,9.7744115 L22.5181827,9.85955793 C22.8392264,10.243763 22.8283766,10.8160918 22.475412,11.1881356 C22.0952963,11.5887982 21.4623504,11.6054546 21.0616879,11.2253389 L21.0616879,11.2253389 L13.3764692,3.93423398 L13.2633454,3.83462897 C12.4905831,3.20379726 11.3583509,3.23699892 10.6234274,3.93423398 L10.6234274,3.93423398 L2.93820874,11.2253389 L2.84897391,11.3007239 C2.44841532,11.6011159 1.87744922,11.5601794 1.52448461,11.1881356 C1.14436887,10.7874731 1.16102534,10.1545272 1.56168788,9.7744115 L1.56168788,9.7744115 L9.24690658,2.48330658 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="Public/ic_public_home_filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="形状结合" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 48 KiB |
@@ -1,3 +1,7 @@
|
||||
{
|
||||
"src" : [ "generated/Index", "pages/Index", "pages/Second" ]
|
||||
"src" : [ "pages/Index",
|
||||
"pages/Hello",
|
||||
"pages/Text",
|
||||
"pages/BMI"
|
||||
]
|
||||
}
|
||||