
Harmony OS Next应用“丁斗口算”开发记录 (9) 原创
第九节 主页的菜单
主页菜单显示了多个不同题目类型的选项,点击后可进入不同的题目类型。考虑到可以随时增加题目类型,并减少页面跳转时传递的信息量。设计了一个公用的类,用于封装题目类型的相关信息:
export default class EquationType{
public TypeName : string = ‘’;
public TypeTitle : string = ‘’;
public Memo : string = ‘’;
constructor(name:string,type:string,Memo:string) {
this.TypeName = name;
this.TypeTitle = type;
this.Memo = Memo;
}
}
TypeName表示题目类型名称,TypeTitle为显示在页面上的题目类型标题,Memo为显示在菜单上的说明。
再编写一个题目类型数组:
export let EquationTypeList : EquationType[] = [
new EquationType(‘Add20’,‘20以内加减法’,‘2+3=?’),
new EquationType(‘Add100’,‘100以内加减法’,‘54-16=?’),
new EquationType(‘99Mul’,‘九九乘法’,‘37=?'),
new EquationType(‘2Mul’,‘两位数乘法’,"1234=?"),
new EquationType(‘Div4’,‘四位数除法’,‘1200➗30=?’),
new EquationType(‘OneEqu’,‘一元一次方程’,‘X+3=7’),
new EquationType(‘4Cal’,‘四则运算’,’(12+13)*3=?'),
new EquationType(‘TwoEqu’,‘二元一次方程’,‘X=?,Y=?’)
];
数组内容可以任意增减,相应在页面上的菜单也会变化。
8个菜单根据设备方向变化,竖屏时4行2列,横屏时2行4列,使用Grid组件实现,这样做,菜单的尺寸也会根据屏幕尺寸自动变化适配。
Grid() {
ForEach(EquationTypeList, (item: EquationType, index: number) => {
GridItem() {
this.Tag(item, index);
}.height(64)
}, (item: EquationType) => item.TypeTitle)
}
.columnsTemplate(this.Orient_V ? ‘1fr 1fr’ : ‘1fr 1fr 1fr 1fr’)
.rowsGap(15).columnsGap(15)
.width(‘100%’).flexGrow(2)
Grid组件中,先使用ForEach遍历数组EquationTypeList,每次增加一个GridItem,GridItem中写了一个自定义的组件Tag,它的高度不论屏幕尺寸和方向,都是固定的64,而宽度就需要自适应拉伸了。columnsTemplate属性根据屏幕方向,使用不同的模板,分别是2列或者4列,这样Grid会将GridItem的宽度调到合适的尺寸。行列的间距为15不变。Grid组件宽度占满屏幕,高度自适应拉伸。
自定义的Tag组件,它包括了一个图片和两行文本,图片在这里使用的是一样的,当然也可以换成不一样的。
@Builder Tag(item:EquationType,index:number){
Row(){
Image($r(‘app.media.ic_public_feedback’)).width(32).height(32)
Column() {
Text(item.TypeTitle)
Text(item.Memo)
}.justifyContent(FlexAlign.Center)
}
.onClick(() => {
// 跳转到题目页,并传递index
})
.linearGradient({
angle: 180,
colors: [[0xF48002, 0.0], [0xF48015, 0.5], [0xF48025, 1.0]]
})
.width(‘100%’).height(‘100%’)
.padding(5)
.borderRadius(6).opacity(0.8)
.justifyContent(FlexAlign.Start)
}
至此,实现了首页菜单的自适应。
