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) } 至此，实现了首页菜单的自适应。