openharmony/codelabs
1
0
Fork 0
mirror of https://gitee.com/openharmony/codelabs synced 2025-02-21 06:40:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ArkUI常用布局容器对齐方式（ArkTS）Codelinter整改

Browse Source 
Signed-off-by: 13871184879 <452399386@qq.com>
This commit is contained in:
13871184879 2023-11-06 11:23:54 +08:00
parent 463d3f1650
commit 771b3250c3
22 changed files with 311 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
ETSUI/OHLayoutAlign/README.md
View File

@ -4,6 +4,8 @@
基于ArkTS扩展的声明式开发范式，实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
效果图如下：
![](figures/zh-cn_image_0000001409408710.gif)
### 相关概念
@ -19,13 +21,13 @@
### 软件要求
- [DevEco Studio](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/start-overview.md#%E5%B7%A5%E5%85%B7%E5%87%86%E5%A4%87)版本：DevEco Studio 3.1 Release及以上版本。
- OpenHarmony SDK版本：API version 9及以上版本。
- [DevEco Studio](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/start-overview.md#%E5%B7%A5%E5%85%B7%E5%87%86%E5%A4%87)版本：DevEco Studio 3.1 Release。
- OpenHarmony SDK版本：API version 9。
### 硬件要求
- 开发板类型：[润和RK3568开发板](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start/quickstart-appendix-rk3568.md)。
- OpenHarmony系统：3.2 Release及以上版本。
- OpenHarmony系统：3.2 Release。
### 环境搭建
@ -48,18 +50,15 @@
## 代码结构解读
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。
本篇Codelab只对核心代码进行讲解，完整代码可以直接从gitee获取。
```
├──entry/src/main/ets // 代码区
│ ├──common
│ │ ├──bean
│ │ │ ├──ContainerModuleItem.ets // 属性模块对象
│ │ │ └──IndexListItem.ets // 首页列表数据对象
│ │ └──constants
│ │ └──CommonConstants.ets // 样式常量类
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口类
│ │ └──EntryAbility.ts // 程序入口类
│ ├──pages
│ │ ├──LayoutAlignIndex.ets // 主界面
│ │ └──Second.ets // 视频播放界面
@ -79,7 +78,9 @@
│ │ └──StackComponent.ets // 自定义Stack容器子元素文件
│ └──viewmodel
│ ├──AttributeModuleData.ets // 属性模块数据
│ └──IndexData.ets // 首页数据
│ ├──ContainerModuleItem.ets // 属性模块对象
│ ├──IndexData.ets // 首页数据
│ └──IndexListItem.ets // 首页数据对象
└──entry/src/main/resource // 应用静态资源目录
```
@ -96,34 +97,36 @@
2. 在LayoutAlignIndex.ets主界面中包含显示四种容器对齐方式的入口。
```typescript
// LayoutAlignIndex.ets
@Entry
@Component
struct LayoutAlignIndex {
private indexList: IndexListItem[] = getIndexList();
build() {
Column() {
// 标题
Text($r('app.string.index_title'))
...
List() {
ForEach(this.indexList, (item) => {
ForEach(this.indexList, (item: IndexListItem) => {
ListItem() {
ListItemComp({ item: item })
.margin({ top: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
}
}, item => JSON.stringify(item))
}, (item: IndexListItem) => JSON.stringify(item))
}
.height(ALL_PERCENT)
.width(ALL_PERCENT)
.listDirection(Axis.Vertical)
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
...
...
}
}
@Component
struct ListItemComp {
...
...
}
```
@ -142,6 +145,7 @@
具体代码如下：
```typescript
// ColumnShowList.ets
@Component
export struct ColumnShowList {
@Consume currentColumnJustifyContent: FlexAlign;
@ -149,27 +153,24 @@
build() {
Column() {
// Column中元素对齐方式布局
Column() {
ForEach(LIST, (item) => {
ForEach(LIST, (item: number) => {
CommonItem({ item: item })
}, item => JSON.stringify(item))
}, (item: number) => JSON.stringify(item))
}
...
// 设置主轴对齐方式
ColumnMainAlignRadioList()
.margin({ top:MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
// 设置交叉轴对齐方式
ColumnAxisAlignRadioList()
.margin({ top:MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
.layoutWeight(1)
.height(ALL_PERCENT)
.width(ALL_PERCENT)
...
}
}
```
其中ColumnMainAlignRadioList子组件和ColumnAxisAlignRadioList子组件分别是设置主轴对齐方式单选框列表和设置交叉轴对齐方式单选框列表，并且在FlexShowList，RowShowList和StackComponent中都存在代码结构类似的子组件，只是设置的属性和参数单选框列表不同，后面不在重复其详细代码，这里选择其中一个单选框列表子组件来显示。
![](figures/zh-cn_image_0000001408157208.png)
@ -177,13 +178,14 @@
具体代码如下：
```typescript
// ColumnMainAlignRadioList.ets
@Component
export struct ColumnMainAlignRadioList {
...
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
　　　　// 单选框列表模块名称
// 单选框列表模块名称
Row() {
Text(this.moduleName)
.fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)
@ -192,16 +194,15 @@
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween ,
wrap: FlexWrap.NoWrap
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
MainAlignRadioItem({ textName: item, groupName: this.groupName,
isChecked: index === 0 ? true : false })
ForEach(this.radioList, (item: string, index?: number) => {
MainAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: string) => JSON.stringify(item))
}
...
...
}
...
}
@ -214,7 +215,9 @@
build() {
Row() {
Radio({ value: this.textName, group: this.groupName })
...
.checked(this.isChecked)
.height((MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN))
.width((MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN))
.onClick(() => {
switch (this.textName) {
case ATTRIBUTE.START:
@ -243,6 +246,7 @@
具体代码如下：
```typescript
// FlexShowList.ets
@Component
export struct FlexShowList {
@Consume list: number[];
@ -254,26 +258,26 @@
build() {
Column() {
// Flex中元素对齐方式布局
Flex({
// 参数设置
...
// 参数设置
...
}) {
ForEach(this.list, (item) => {
ForEach(this.list, (item: number) => {
CommonItem({ item: item })
}, item => JSON.stringify(item))
}, (item: number) => JSON.stringify(item))
}
...
// 设置主轴方向
FlexMainDirectionRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
// 设置主轴对齐方式
FlexMainAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
FlexMainDirectionRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
// 设置主轴方向
FlexMainAlignRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
// 设置交叉轴对齐方式
FlexAxisAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
FlexAxisAlignRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
.layoutWeight(1)
.height(ALL_PERCENT)
.width(ALL_PERCENT)
...
}
}
```
@ -285,6 +289,7 @@
代码如下：
```typescript
// RowShowList.ets
@Component
export struct RowShowList {
@Consume currentRowJustifyContent: FlexAlign;
@ -292,11 +297,10 @@
build() {
Column() {
// Row中元素对齐方式布局
Row() {
ForEach(LIST, (item) => {
ForEach(LIST, (item: number) => {
CommonItem({ item: item })
}, item => JSON.stringify(item))
}, (item: number) => JSON.stringify(item))
}
...
// 设置主轴对齐方式
@ -306,13 +310,11 @@
RowAxisAlignRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
.layoutWeight(1)
.height(ALL_PERCENT)
.width(ALL_PERCENT)
...
}
}
```
5. 在StackComponent.ets中，自定组件StackComponent主要效果是在Stack布局容器中，设置不同对齐方式属性时，容器内堆叠元素的对齐方式。
![](figures/zh-cn_image_0000001407837816.png)
@ -320,15 +322,13 @@
代码如下：
```typescript
// StackComponent.ets
@Component
export struct StackComponent {
@Consume currentStackAlignContent: Alignment;
@Consume message: string ;
@State textAl: TextAlign = TextAlign.Center;
...
build() {
Column() {
// Stack中元素对齐方式布局
Stack({ alignContent: this.currentStackAlignContent }) {
Text('')
.width(ALL_PERCENT)
@ -345,47 +345,52 @@
StackAlignRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
.layoutWeight(1)
.height(ALL_PERCENT)
.width(ALL_PERCENT)
...
}
}
```
6. 在CommonComponent.ets中，自定义组件CommonItem，代码如下：
6. 在CommonComponent.ets中，自定义组件CommonItem，代码如下：
```typescript
@Component
export struct CommonItem {
private item: number;
build() {
Text(this.item.toString())
.fontSize(MARGIN_FONT_SIZE_SPACE.FIFTH_MARGIN)
.width(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN)
.height(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN)
.fontColor($r("app.color.show_list_fontColor"))
.textAlign(TextAlign.Center)
.align(Alignment.Center)
.backgroundColor($r("app.color.white"))
.borderRadius(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
.margin(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
}
}
```
```typescript
// CommonComponent.ets
@Component
export struct CommonItem {
private item: number = 0;
build() {
Text(this.item.toString())
.fontSize(MARGIN_FONT_SIZE_SPACE.FIFTH_MARGIN)
.width(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN)
.height(MARGIN_FONT_SIZE_SPACE.NINTH_MARGIN)
.fontColor($r("app.color.show_list_fontColor"))
.textAlign(TextAlign.Center)
.align(Alignment.Center)
.backgroundColor($r("app.color.white"))
.borderRadius(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
.margin(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
}
}
```
7. 在Second.ets页面，根据首页跳转时的参数，渲染顶部不同的容器名称和条件渲染不同的子组件。
代码如下：
```typescript
// Second.ets
@Entry
@Component
struct Second {
private moduleList: any[] = router.getParams()[MODULE_LIST];
private componentName: string = router.getParams()[COMPONENT_NAME];
...
aboutToAppear() {
let params = router.getParams() as Record<string, Object>;
this.moduleList = params.moduleList as ContainerModuleItem[];
this.componentName = params.componentName as string;
this.containerType = params.containerType as number;
}
build() {
Row() {
Column({ space: MARGIN_FONT_SIZE_SPACE.SIXTH_MARGIN }) {
@ -410,10 +415,9 @@
}
}
// 顶部子组件
@Component
struct BackComp {
...
...
}
```

2
ETSUI/OHLayoutAlign/entry/src/main/ets/common/constants/CommonConstants.ets
View File

@ -51,7 +51,7 @@ export const ALL_PERCENT: string = '100%';
/**
* opacity of text
*/
export const ATTRIBUTE_OPACITY: number = parseFloat('0.6');
export const ATTRIBUTE_OPACITY: number = Number.parseFloat('0.6');
/**
* title font weight

30
ETSUI/OHLayoutAlign/entry/src/main/ets/pages/LayoutAlignIndex.ets
View File

@ -14,7 +14,7 @@
*/
import router from '@ohos.router';
import { IndexListItem } from '../common/bean/IndexListItem';
import { IndexListItem } from '../viewmodel/IndexListItem';
import {
TITLE_FONT_WEIGHT,
MARGIN_FONT_SIZE_SPACE,
@ -32,10 +32,11 @@ import { getIndexList } from '../viewmodel/IndexData';
@Entry
@Component
struct LayoutAlignIndex {
private indexList : IndexListItem[] = getIndexList();
private indexList: IndexListItem[] = getIndexList();
build() {
Column() {
Text($r("app.string.index_title"))
Text($r('app.string.index_title'))
.width(ALL_PERCENT)
.fontSize(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
.fontWeight(TITLE_FONT_WEIGHT)
@ -43,12 +44,15 @@ struct LayoutAlignIndex {
.fontColor(Color.Black)
.margin({ top: EIGHT_POINT_TWO_PERCENT })
List() {
ForEach(this.indexList, (item) => {
ForEach(this.indexList, (item: IndexListItem) => {
ListItem() {
ListItemComp({ item: item }).margin({ top: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
ListItemComp({ item: item })
.margin({ top: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
}
}, item => JSON.stringify(item))
}, (item: IndexListItem) => JSON.stringify(item))
}
.height(ALL_PERCENT)
.width(ALL_PERCENT)
.listDirection(Axis.Vertical)
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
@ -62,11 +66,11 @@ struct LayoutAlignIndex {
@Component
struct ListItemComp {
private item: IndexListItem;
private item: IndexListItem = new IndexListItem();
build() {
Row() {
Image(this.item['icon'])
Image(this.item.icon)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
.width(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
.margin({
@ -74,7 +78,7 @@ struct ListItemComp {
top: MARGIN_FONT_SIZE_SPACE.SIXTH_MARGIN,
bottom: MARGIN_FONT_SIZE_SPACE.SIXTH_MARGIN
})
Text(this.item['name'])
Text(this.item.name)
.fontSize(MARGIN_FONT_SIZE_SPACE.FIFTH_MARGIN)
.fontColor(Color.Black)
.fontWeight(COMMON_FONT_WEIGHT)
@ -90,11 +94,11 @@ struct ListItemComp {
router.pushUrl({
url: SECOND_PAGE,
params: {
containerType: this.item['containerType'],
componentName: this.item['name'],
moduleList: this.item['moduleList']
containerType: this.item.containerType,
componentName: this.item.name,
moduleList: this.item.moduleList
}
});
})
}
}
}

19
ETSUI/OHLayoutAlign/entry/src/main/ets/pages/Second.ets
View File

@ -21,14 +21,12 @@ import { StackComponent } from '../view/StackComponent';
import {
MARGIN_FONT_SIZE_SPACE,
COMMON_FONT_WEIGHT,
MODULE_LIST,
COMPONENT_NAME,
CONTAINER_TYPE_STR,
LIST,
ATTRIBUTE,
CONTAINER_TYPE,
ALL_PERCENT
} from '../common/Constants/CommonConstants';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*second page
@ -36,9 +34,9 @@ import {
@Entry
@Component
struct Second {
private moduleList: any[] = router.getParams()[MODULE_LIST];
private componentName: string = router.getParams()[COMPONENT_NAME];
@Provide containerType: number = router.getParams()[CONTAINER_TYPE_STR];
private moduleList: ContainerModuleItem[] = [];
private componentName: string = '';
@Provide containerType: number = 0;
@Provide currentFlexDirection: FlexDirection = FlexDirection.Column;
@Provide currentFlexJustifyContent: FlexAlign = FlexAlign.Start;
@Provide currentFlexAlignItems: ItemAlign = ItemAlign.Start;
@ -52,6 +50,13 @@ struct Second {
@Provide message: string = ATTRIBUTE.TOP_START;
@Provide list: number[] = LIST;
aboutToAppear() {
let params = router.getParams() as Record<string, Object>;
this.moduleList = params.moduleList as ContainerModuleItem[];
this.componentName = params.componentName as string;
this.containerType = params.containerType as number;
}
build() {
Row() {
Column({ space: MARGIN_FONT_SIZE_SPACE.SIXTH_MARGIN }) {
@ -79,7 +84,7 @@ struct Second {
@Component
struct BackComp {
private backIconResource: Resource = $r('app.media.icon_back');
private componentName: string;
private componentName: string = '';
build() {
Row() {

29
ETSUI/OHLayoutAlign/entry/src/main/ets/view/ColumnAxisAlignRadioList.ets
View File

@ -13,18 +13,19 @@
* limitations under the License.
*/
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {getColumnModuleList} from '../viewmodel/AttributeModuleData';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getColumnModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Axis Alignment in Column
*/
@Component
export struct ColumnAxisAlignRadioList {
private columnModuleList :ContainerModuleItem[] = getColumnModuleList();
private groupName: string = this.columnModuleList[1]['groupName'];
private moduleName: Resource = this.columnModuleList[1]['moduleName'];
private radioList: Array<string> =this.columnModuleList[1]['attributeList'];
private columnModuleList: ContainerModuleItem[] = getColumnModuleList();
private groupName: string = this.columnModuleList[1].groupName;
private moduleName: Resource = this.columnModuleList[1].moduleName;
private radioList: Array<string> = this.columnModuleList[1].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
@ -40,10 +41,10 @@ export struct ColumnAxisAlignRadioList {
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index?: number) => {
AxisAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: string) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
@ -56,9 +57,9 @@ export struct ColumnAxisAlignRadioList {
@Component
struct AxisAlignRadioItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentColumnAlignItems: HorizontalAlign;
build() {
@ -80,7 +81,9 @@ struct AxisAlignRadioItem {
break;
}
})
Text(this.textName).fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN).opacity(ATTRIBUTE_OPACITY)
Text(this.textName)
.fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN)
.opacity(ATTRIBUTE_OPACITY)
}
}
}

21
ETSUI/OHLayoutAlign/entry/src/main/ets/view/ColumnMainAlignRadioList.ets
View File

@ -15,7 +15,7 @@
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getColumnModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../common/bean/ContainerModuleItem';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Main Alignment in Column
@ -23,16 +23,15 @@ import { ContainerModuleItem } from '../common/bean/ContainerModuleItem';
@Component
export struct ColumnMainAlignRadioList {
private columnModuleList: ContainerModuleItem[] = getColumnModuleList();
private groupName: string = this.columnModuleList[0]['groupName'];
private moduleName: Resource = this.columnModuleList[0]['moduleName'];
private radioList: Array<string> = this.columnModuleList[0]['attributeList'];
private groupName: string = this.columnModuleList[0].groupName;
private moduleName: Resource = this.columnModuleList[0].moduleName;
private radioList: Array<string> = this.columnModuleList[0].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
Row() {
Text(this.moduleName)
.fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)
}
.margin({ left: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
@ -41,10 +40,10 @@ export struct ColumnMainAlignRadioList {
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index?: number) => {
MainAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: string) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
@ -57,9 +56,9 @@ export struct ColumnMainAlignRadioList {
@Component
struct MainAlignRadioItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentColumnJustifyContent: FlexAlign;
build() {
@ -86,4 +85,4 @@ struct MainAlignRadioItem {
.opacity(ATTRIBUTE_OPACITY)
}
}
}
}

23
ETSUI/OHLayoutAlign/entry/src/main/ets/view/ColumnShowList.ets
View File

@ -1,4 +1,3 @@
/*
* Copyright (c) 2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
@ -15,7 +14,12 @@
*/
import { CommonItem } from './CommonComponent';
import { MARGIN_FONT_SIZE_SPACE, LIST, SHOW_LIST_HEIGHT_PERCENT,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {
MARGIN_FONT_SIZE_SPACE,
LIST,
SHOW_LIST_HEIGHT_PERCENT,
ALL_PERCENT
} from '../common/Constants/CommonConstants';
import { ColumnAxisAlignRadioList } from './ColumnAxisAlignRadioList';
import { ColumnMainAlignRadioList } from './ColumnMainAlignRadioList';
@ -29,11 +33,10 @@ export struct ColumnShowList {
build() {
Column() {
// Column中元素对齐方式布局
Column() {
ForEach(LIST, (item) => {
ForEach(LIST, (item: number) => {
CommonItem({ item: item })
}, item => JSON.stringify(item))
}, (item: number) => JSON.stringify(item))
}
.alignItems(this.currentColumnAlignItems)
.justifyContent(this.currentColumnJustifyContent)
@ -42,18 +45,16 @@ export struct ColumnShowList {
.height(SHOW_LIST_HEIGHT_PERCENT.COLUMN_ROW_SHOW_LIST_HEIGHT)
.backgroundColor($r("app.color.show_list_backgroundColor"))
.margin({ top: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN })
// set main align
ColumnMainAlignRadioList()
.margin({top:MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN})
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
// set axis align
ColumnAxisAlignRadioList()
.margin({top:MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN})
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
.layoutWeight(1)
.height(ALL_PERCENT)
.width(ALL_PERCENT)
}
}
}

2
ETSUI/OHLayoutAlign/entry/src/main/ets/view/CommonComponent.ets
View File

@ -20,7 +20,7 @@ import { MARGIN_FONT_SIZE_SPACE } from '../common/Constants/CommonConstants';
*/
@Component
export struct CommonItem {
private item: number;
private item: number = 0;
build() {
Text(this.item.toString())

31
ETSUI/OHLayoutAlign/entry/src/main/ets/view/FlexAxisAlignRadioList.ets
View File

@ -13,26 +13,25 @@
* limitations under the License.
*/
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {getFlexModuleList} from '../viewmodel/AttributeModuleData';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getFlexModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Axis Alignment in Flex
*/
@Component
export struct FlexAxisAlignRadioList {
private flexModuleList :ContainerModuleItem[] = getFlexModuleList();
private groupName: string = this.flexModuleList[2]['groupName'];
private moduleName: Resource = this.flexModuleList[2]['moduleName'];
private radioList: Array<string> =this.flexModuleList[2]['attributeList'];
private flexModuleList: ContainerModuleItem[] = getFlexModuleList();
private groupName: string = this.flexModuleList[2].groupName;
private moduleName: Resource = this.flexModuleList[2].moduleName;
private radioList: Array<string> = this.flexModuleList[2].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
Row() {
Text(this.moduleName)
.fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)
}
.margin({ left: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
@ -41,10 +40,10 @@ export struct FlexAxisAlignRadioList {
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index?: number) => {
AxisAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: string) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
@ -57,9 +56,9 @@ export struct FlexAxisAlignRadioList {
@Component
struct AxisAlignRadioItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentFlexAlignItems: ItemAlign;
build() {
@ -81,7 +80,9 @@ struct AxisAlignRadioItem {
break;
}
})
Text(this.textName).fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN).opacity(ATTRIBUTE_OPACITY)
Text(this.textName)
.fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN)
.opacity(ATTRIBUTE_OPACITY)
}
}
}
}

32
ETSUI/OHLayoutAlign/entry/src/main/ets/view/FlexMainAlignRadioList.ets
View File

@ -13,20 +13,19 @@
* limitations under the License.
*/
import { MARGIN_FONT_SIZE_SPACE,ATTRIBUTE_OPACITY,ATTRIBUTE,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {getFlexModuleList} from '../viewmodel/AttributeModuleData';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getFlexModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Main Alignment in Flex
*/
@Component
export struct FlexMainAlignRadioList {
private flexModuleList :ContainerModuleItem[] = getFlexModuleList();
private groupName: string = this.flexModuleList[1]['groupName'];
private moduleName: Resource = this.flexModuleList[1]['moduleName'];
private radioList: Array<string> =this.flexModuleList[1]['attributeList'];
private flexModuleList: ContainerModuleItem[] = getFlexModuleList();
private groupName: string = this.flexModuleList[1].groupName;
private moduleName: Resource = this.flexModuleList[1].moduleName;
private radioList: Array<string> = this.flexModuleList[1].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
@ -39,13 +38,13 @@ export struct FlexMainAlignRadioList {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween ,
wrap: FlexWrap.NoWrap
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index: number | undefined) => {
MainAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN})
}, item => JSON.stringify(item))
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, (item: string) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
@ -58,12 +57,11 @@ export struct FlexMainAlignRadioList {
@Component
struct MainAlignRadioItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentFlexJustifyContent: FlexAlign;
build() {
Row() {
Radio({ value: this.textName, group: this.groupName })

25
ETSUI/OHLayoutAlign/entry/src/main/ets/view/FlexMainDirectionRadioList.ets
View File

@ -13,26 +13,25 @@
* limitations under the License.
*/
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {getFlexModuleList} from '../viewmodel/AttributeModuleData';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getFlexModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Main Direction Alignment in Flex
*/
@Component
export struct FlexMainDirectionRadioList {
private flexModuleList :ContainerModuleItem[] = getFlexModuleList();
private groupName: string = this.flexModuleList[0]['groupName'];
private moduleName: Resource = this.flexModuleList[0]['moduleName'];
private radioList: Array<string> =this.flexModuleList[0]['attributeList'];
private flexModuleList: ContainerModuleItem[] = getFlexModuleList();
private groupName: string = this.flexModuleList[0].groupName;
private moduleName: Resource = this.flexModuleList[0].moduleName;
private radioList: Array<string> = this.flexModuleList[0].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
Row() {
Text(this.moduleName)
.fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)
}
.margin({ left: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
@ -41,10 +40,10 @@ export struct FlexMainDirectionRadioList {
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index: number | undefined) => {
MainDirectionRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: number) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
@ -57,9 +56,9 @@ export struct FlexMainDirectionRadioList {
@Component
struct MainDirectionRadioItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentFlexDirection: FlexDirection;
build() {

29
ETSUI/OHLayoutAlign/entry/src/main/ets/view/FlexShowList.ets
View File

@ -14,7 +14,7 @@
*/
import { CommonItem } from './CommonComponent';
import { MARGIN_FONT_SIZE_SPACE, SHOW_LIST_HEIGHT_PERCENT,ALL_PERCENT } from '../common/Constants/CommonConstants';
import { MARGIN_FONT_SIZE_SPACE, SHOW_LIST_HEIGHT_PERCENT, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { FlexAxisAlignRadioList } from './FlexAxisAlignRadioList';
import { FlexMainAlignRadioList } from './FlexMainAlignRadioList';
import { FlexMainDirectionRadioList } from './FlexMainDirectionRadioList';
@ -33,7 +33,6 @@ export struct FlexShowList {
build() {
Column() {
// Flex中元素对齐方式布局
Flex({
alignItems: this.currentFlexAlignItems,
direction: this.currentFlexDirection,
@ -41,9 +40,9 @@ export struct FlexShowList {
wrap: this.currentFlexWrap,
alignContent: this.currentFlexAlignContent
}) {
ForEach(this.list, (item) => {
ForEach(this.list, (item: number) => {
CommonItem({ item: item })
}, item => JSON.stringify(item))
}, (item: number) => JSON.stringify(item))
}
.padding(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
.width(ALL_PERCENT)
@ -52,25 +51,17 @@ export struct FlexShowList {
.margin({ top: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN })
// set main direction
FlexMainDirectionRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
FlexMainDirectionRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
// set main align
FlexMainAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
FlexMainAlignRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
// set axis align
FlexAxisAlignRadioList().margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
FlexAxisAlignRadioList()
.margin({ top: MARGIN_FONT_SIZE_SPACE.EIGHTH_MARGIN })
}
.layoutWeight(1)
.height(ALL_PERCENT)
.width(ALL_PERCENT)
}
}
}

24
ETSUI/OHLayoutAlign/entry/src/main/ets/view/RowAxisAlignRadioList.ets
View File

@ -13,19 +13,19 @@
* limitations under the License.
*/
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {getRowModuleList} from '../viewmodel/AttributeModuleData';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getRowModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Axis Alignment in Row
*/
@Component
export struct RowAxisAlignRadioList {
private rowModuleList :ContainerModuleItem[] = getRowModuleList();
private groupName: string = this.rowModuleList[1]['groupName'];
private moduleName: Resource = this.rowModuleList[1]['moduleName'];
private radioList: Array<string> =this.rowModuleList[1]['attributeList'];
private rowModuleList: ContainerModuleItem[] = getRowModuleList();
private groupName: string = this.rowModuleList[1].groupName;
private moduleName: Resource = this.rowModuleList[1].moduleName;
private radioList: Array<string> = this.rowModuleList[1].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
@ -41,10 +41,10 @@ export struct RowAxisAlignRadioList {
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index?: number) => {
AxisAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: string) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
@ -57,9 +57,9 @@ export struct RowAxisAlignRadioList {
@Component
struct AxisAlignRadioItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentRowAlignItems: VerticalAlign;
build() {

29
ETSUI/OHLayoutAlign/entry/src/main/ets/view/RowMainAlignRadioList.ets
View File

@ -13,26 +13,25 @@
* limitations under the License.
*/
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {getRowModuleList} from '../viewmodel/AttributeModuleData';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getRowModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Main Alignment in Row
*/
@Component
export struct RowMainAlignRadioList {
private rowModuleList :ContainerModuleItem[] = getRowModuleList();
private groupName: string = this.rowModuleList[0]['groupName'];
private moduleName: Resource = this.rowModuleList[0]['moduleName'];
private radioList: Array<string> =this.rowModuleList[0]['attributeList'];
private rowModuleList: ContainerModuleItem[] = getRowModuleList();
private groupName: string = this.rowModuleList[0].groupName;
private moduleName: Resource = this.rowModuleList[0].moduleName;
private radioList: Array<string> = this.rowModuleList[0].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
Row() {
Text(this.moduleName)
.fontSize(MARGIN_FONT_SIZE_SPACE.FOURTH_MARGIN)
}
.margin({ left: MARGIN_FONT_SIZE_SPACE.SECOND_MARGIN })
@ -41,10 +40,10 @@ export struct RowMainAlignRadioList {
justifyContent: FlexAlign.SpaceBetween,
wrap: FlexWrap.NoWrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index?: number) => {
MainAlignRadioItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: string) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(MARGIN_FONT_SIZE_SPACE.SEVENTH_MARGIN)
@ -57,9 +56,9 @@ export struct RowMainAlignRadioList {
@Component
struct MainAlignRadioItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentRowJustifyContent: FlexAlign;
build() {
@ -81,7 +80,9 @@ struct MainAlignRadioItem {
break;
}
})
Text(this.textName).fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN).opacity(ATTRIBUTE_OPACITY)
Text(this.textName)
.fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN)
.opacity(ATTRIBUTE_OPACITY)
}
}
}

22
ETSUI/OHLayoutAlign/entry/src/main/ets/view/RowShowList.ets
View File

@ -14,7 +14,12 @@
*/
import { CommonItem } from './CommonComponent';
import { MARGIN_FONT_SIZE_SPACE, LIST, SHOW_LIST_HEIGHT_PERCENT,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {
MARGIN_FONT_SIZE_SPACE,
LIST,
SHOW_LIST_HEIGHT_PERCENT,
ALL_PERCENT
} from '../common/Constants/CommonConstants';
import { RowAxisAlignRadioList } from './RowAxisAlignRadioList';
import { RowMainAlignRadioList } from './RowMainAlignRadioList';
@ -28,18 +33,17 @@ export struct RowShowList {
build() {
Column() {
// Row中元素对齐方式布局
Row() {
ForEach(LIST, (item) => {
ForEach(LIST, (item: number) => {
CommonItem({ item: item })
}, item => JSON.stringify(item))
}, (item: number) => JSON.stringify(item))
}
.alignItems(this.currentRowAlignItems)
.justifyContent(this.currentRowJustifyContent)
.padding(MARGIN_FONT_SIZE_SPACE.COMMON_PADDING)
.width(ALL_PERCENT)
.height(SHOW_LIST_HEIGHT_PERCENT.COLUMN_ROW_SHOW_LIST_HEIGHT)
.backgroundColor($r("app.color.show_list_backgroundColor"))
.backgroundColor($r('app.color.show_list_backgroundColor'))
.margin({ top: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN })
// set main align
@ -52,11 +56,5 @@ export struct RowShowList {
.layoutWeight(1)
.height(ALL_PERCENT)
.width(ALL_PERCENT)
}
}
}

28
ETSUI/OHLayoutAlign/entry/src/main/ets/view/StackAlignRadioList.ets
View File

@ -13,19 +13,19 @@
* limitations under the License.
*/
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE,ALL_PERCENT } from '../common/Constants/CommonConstants';
import {getStackModuleList} from '../viewmodel/AttributeModuleData';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { MARGIN_FONT_SIZE_SPACE, ATTRIBUTE_OPACITY, ATTRIBUTE, ALL_PERCENT } from '../common/Constants/CommonConstants';
import { getStackModuleList } from '../viewmodel/AttributeModuleData';
import { ContainerModuleItem } from '../viewmodel/ContainerModuleItem';
/**
*Set Alignment in Stack
*/
@Component
export struct StackAlignRadioList {
private stackModuleList :ContainerModuleItem[] = getStackModuleList();
private groupName: string = this.stackModuleList[0]['groupName'];
private moduleName: Resource = this.stackModuleList[0]['moduleName'];
private radioList: Array<string> =this.stackModuleList[0]['attributeList'];
private stackModuleList: ContainerModuleItem[] = getStackModuleList();
private groupName: string = this.stackModuleList[0].groupName;
private moduleName: Resource = this.stackModuleList[0].moduleName;
private radioList: Array<string> = this.stackModuleList[0].attributeList;
build() {
Column({ space: MARGIN_FONT_SIZE_SPACE.FIRST_MARGIN }) {
@ -40,10 +40,10 @@ export struct StackAlignRadioList {
justifyContent: FlexAlign.Start,
wrap: FlexWrap.Wrap
}) {
ForEach(this.radioList, (item, index) => {
ForEach(this.radioList, (item: string, index?: number) => {
StackAlignRadioListItem({ textName: item, groupName: this.groupName, isChecked: index === 0 ? true : false })
.margin({ right: MARGIN_FONT_SIZE_SPACE.COMMON_MARGIN })
}, item => JSON.stringify(item))
}, (item: string) => JSON.stringify(item))
}
.width(ALL_PERCENT)
.height(ALL_PERCENT)
@ -56,9 +56,9 @@ export struct StackAlignRadioList {
@Component
export struct StackAlignRadioListItem {
private textName: string;
private groupName: string;
private isChecked: boolean;
private textName: string = '';
private groupName: string = '';
private isChecked: boolean = false;
@Consume currentStackAlignContent: Alignment;
@Consume message: string;
@ -92,7 +92,9 @@ export struct StackAlignRadioListItem {
break;
}
})
Text(this.textName).fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN).opacity(ATTRIBUTE_OPACITY)
Text(this.textName)
.fontSize(MARGIN_FONT_SIZE_SPACE.THIRD_MARGIN)
.opacity(ATTRIBUTE_OPACITY)
}
}
}

4
ETSUI/OHLayoutAlign/entry/src/main/ets/view/StackComponent.ets
View File

@ -22,7 +22,7 @@ import { StackAlignRadioList } from './StackAlignRadioList';
@Component
export struct StackComponent {
@Consume currentStackAlignContent: Alignment;
@Consume message: string ;
@Consume message: string;
@State textAl: TextAlign = TextAlign.Center;
build() {
@ -52,4 +52,4 @@ export struct StackComponent {
.height(ALL_PERCENT)
.width(ALL_PERCENT)
}
}
}

38
ETSUI/OHLayoutAlign/entry/src/main/ets/viewmodel/AttributeModuleData.ets
View File

@ -14,15 +14,15 @@
*/
import { ATTRIBUTE, GROUP } from '../common/Constants/CommonConstants';
import {ContainerModuleItem} from '../common/bean/ContainerModuleItem';
import { ContainerModuleItem } from './ContainerModuleItem';
/**
*Get Module List Data in Flex
*/
export function getFlexModuleList() :Array<ContainerModuleItem>{
export function getFlexModuleList(): Array<ContainerModuleItem> {
let flexModuleArray: Array<ContainerModuleItem> = []
FLEX_MODULE.forEach(item => {
flexModuleArray.push(new ContainerModuleItem(item['groupName'], item['moduleName'], item['attributeList']));
FLEX_MODULE.forEach((item: ContainerModuleItem) => {
flexModuleArray.push(item);
})
return flexModuleArray;
}
@ -30,10 +30,10 @@ export function getFlexModuleList() :Array<ContainerModuleItem>{
/**
*Get Module List Data in Column
*/
export function getColumnModuleList() :Array<ContainerModuleItem>{
export function getColumnModuleList(): Array<ContainerModuleItem> {
let columnModuleArray: Array<ContainerModuleItem> = []
COLUMN_MODULE.forEach(item => {
columnModuleArray.push(new ContainerModuleItem(item['groupName'], item['moduleName'], item['attributeList']));
COLUMN_MODULE.forEach((item: ContainerModuleItem) => {
columnModuleArray.push(item);
})
return columnModuleArray;
}
@ -41,10 +41,10 @@ export function getColumnModuleList() :Array<ContainerModuleItem>{
/**
*Get Module List Data in Row
*/
export function getRowModuleList() :Array<ContainerModuleItem>{
export function getRowModuleList(): Array<ContainerModuleItem> {
let rowModuleArray: Array<ContainerModuleItem> = []
ROW_MODULE.forEach(item => {
rowModuleArray.push(new ContainerModuleItem(item['groupName'], item['moduleName'], item['attributeList']));
ROW_MODULE.forEach((item: ContainerModuleItem) => {
rowModuleArray.push(item);
})
return rowModuleArray;
}
@ -52,18 +52,18 @@ export function getRowModuleList() :Array<ContainerModuleItem>{
/**
*Get Module List Data in Stack
*/
export function getStackModuleList() :Array<ContainerModuleItem>{
export function getStackModuleList(): Array<ContainerModuleItem> {
let stackModuleArray: Array<ContainerModuleItem> = []
STACK_MODULE.forEach(item => {
stackModuleArray.push(new ContainerModuleItem(item['groupName'], item['moduleName'], item['attributeList']));
STACK_MODULE.forEach((item:ContainerModuleItem) => {
stackModuleArray.push(item);
})
return stackModuleArray;
}
export const FLEX_MODULE: object[] = [
export const FLEX_MODULE: ContainerModuleItem[] = [
{
groupName: GROUP.MAIN_DIRECTION,
moduleName: $r("app.string.main_direction"),
moduleName: $r('app.string.main_direction'),
attributeList: [ATTRIBUTE.COLUMN, ATTRIBUTE.ROW, ATTRIBUTE.COLUMN_REVERSE]
},
{
@ -78,7 +78,7 @@ export const FLEX_MODULE: object[] = [
}
];
export const COLUMN_MODULE: object[] = [
export const COLUMN_MODULE: ContainerModuleItem[] = [
{
groupName: GROUP.MAIN_ALIGN,
moduleName: $r("app.string.main_align"),
@ -91,7 +91,7 @@ export const COLUMN_MODULE: object[] = [
}
];
export const ROW_MODULE: object[] = [
export const ROW_MODULE: ContainerModuleItem[] = [
{
groupName: GROUP.MAIN_ALIGN,
moduleName: $r("app.string.main_align"),
@ -104,10 +104,10 @@ export const ROW_MODULE: object[] = [
}
];
export const STACK_MODULE: object[] = [
export const STACK_MODULE: ContainerModuleItem[] = [
{
groupName: GROUP.ALIGN_TYPE,
moduleName: $r("app.string.align_type"),
moduleName: $r('app.string.align_type'),
attributeList: [ATTRIBUTE.TOP_START, ATTRIBUTE.BOTTOM_START, ATTRIBUTE.TOP_END, ATTRIBUTE.BOTTOM_END, ATTRIBUTE.CENTER]
}
];

13
ETSUI/OHLayoutAlign/entry/src/main/ets/common/bean/ContainerModuleItem.ets → ETSUI/OHLayoutAlign/entry/src/main/ets/viewmodel/ContainerModuleItem.ets
View File

@ -12,18 +12,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ATTRIBUTE, GROUP } from '../common/constants/CommonConstants';
/*
* class for ContainerModuleItem
*/
export class ContainerModuleItem {
private groupName: string;
private moduleName: Resource;
private attributeList: string[];
constructor(groupName: string, moduleName: Resource, attributeList: string[]) {
this.groupName = groupName;
this.moduleName = moduleName;
this.attributeList = attributeList;
}
groupName: string = GROUP.MAIN_ALIGN;
moduleName: Resource = $r("app.string.main_align");
attributeList: string[] = [ATTRIBUTE.START, ATTRIBUTE.CENTER, ATTRIBUTE.END];
}

27
ETSUI/OHLayoutAlign/entry/src/main/ets/viewmodel/IndexData.ets
View File

@ -15,41 +15,42 @@
import { CONTAINER, CONTAINER_TYPE } from '../common/Constants/CommonConstants';
import { FLEX_MODULE, COLUMN_MODULE, ROW_MODULE, STACK_MODULE } from '../viewmodel/AttributeModuleData';
import {IndexListItem} from '../common/bean/IndexListItem'
import { IndexListItem } from './IndexListItem'
/**
* get Index page dataList
*/
export function getIndexList() :Array<IndexListItem>{
export function getIndexList(): Array<IndexListItem> {
let indexModuleArray: Array<IndexListItem> = []
INDEX_LIST.forEach(item => {
indexModuleArray.push(new IndexListItem(item['name'], item['icon'], item['containerType'],item['moduleList']));
INDEX_LIST.forEach((item: IndexListItem) => {
indexModuleArray.push(item);
})
return indexModuleArray;
};
}
export const INDEX_LIST: Object[] = [
{ name: CONTAINER.FLEX,
icon: $r("app.media.ic_flex"),
export const INDEX_LIST: IndexListItem[] = [
{
name: CONTAINER.FLEX,
icon: $r('app.media.ic_flex'),
containerType: CONTAINER_TYPE.FLEX,
moduleList: FLEX_MODULE
},
{
name: CONTAINER.COLUMN,
icon: $r("app.media.ic_column"),
icon: $r('app.media.ic_column'),
containerType: CONTAINER_TYPE.COLUMN,
moduleList: COLUMN_MODULE
},
{ name: CONTAINER.ROW,
icon: $r("app.media.ic_row"),
{
name: CONTAINER.ROW,
icon: $r('app.media.ic_row'),
containerType: CONTAINER_TYPE.ROW,
moduleList: ROW_MODULE
},
{
name: CONTAINER.STACK,
icon: $r("app.media.ic_stack"),
icon: $r('app.media.ic_stack'),
containerType: CONTAINER_TYPE.STACK,
moduleList: STACK_MODULE
},
];

21
ETSUI/OHLayoutAlign/entry/src/main/ets/common/bean/IndexListItem.ets → ETSUI/OHLayoutAlign/entry/src/main/ets/viewmodel/IndexListItem.ets
View File

@ -12,21 +12,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {ContainerModuleItem} from './ContainerModuleItem'
import { FLEX_MODULE } from './AttributeModuleData';
import { CONTAINER, CONTAINER_TYPE } from '../common/constants/CommonConstants';
import { ContainerModuleItem } from './ContainerModuleItem'
/*
* class for IndexListItem
*/
export class IndexListItem{
private name : string;
private icon :Resource;
private containerType : number
private moduleList :ContainerModuleItem[];
constructor(name : string,icon:Resource,containerType :number,moduleList :ContainerModuleItem[]){
this.name = name;
this.icon = icon;
this.containerType = containerType;
this.moduleList = moduleList;
}
export class IndexListItem {
name: string = CONTAINER.FLEX;
icon: Resource = $r('app.media.ic_flex');
containerType: number = CONTAINER_TYPE.FLEX;
moduleList: ContainerModuleItem[] = FLEX_MODULE;
}

4
ETSUI/OHLayoutAlign/hvigor/hvigor-config.json5
View File

@ -1,6 +1,6 @@
{
"hvigorVersion": "2.0.0",
"hvigorVersion": "2.4.2",
"dependencies": {
"@ohos/hvigor-ohos-plugin": "2.0.0"
"@ohos/hvigor-ohos-plugin": "2.4.2"
}
}