Harmony OS Next应用“丁斗口算”开发记录(2)

第二节 页面设计

“丁斗口算”APP同时适配手机、折叠屏（包括折叠态和展开态）、平板的不同尺寸屏幕，同时适配竖屏和横屏。采用HarmonyOS一次开发，多端部署技术，仅用一套代码实现。APP在不同设备不同方向的展示效果如下：

手机竖屏

手机横屏

折叠屏展开态横向

折叠屏展开态竖屏

平板横向

平板竖向 APP的首页相对简单，只有几个菜单选项。需要解决的问题有两个，第一个是适配屏幕尺寸，自适应拉伸菜单宽度。第二个是监测设备方向，竖向时采用4行2列布局，横向时采用2行4列布局；

第一个问题：将内容分为以下头部、主体和底部三部分

那么可以发现，在任何形态下，三个部分的宽度均为屏幕100%，三个部分作为整体的高度为100%，头部和底部的高度不变，仅有主体部分高度自适应拉伸。因此，首页的整体结构代码如下： build() { Flex({ direction: FlexDirection.Column}) { // flex组件是头部、主体和底部的总体，排列方向为纵向 // 代码略 } .padding(10) .width('100%').height('100%') // 整体的高度和宽度占据100%
}

进一步的，头部和底部高度固定，宽度为100%，主体部分高度自适应拉伸 Flex({ direction: FlexDirection.Column}) { Stack({alignContent:Alignment.End}){ //代码略 }..height(40).width('100%')// 头部高度和宽度固定

Divider().width('80%').height(4) Grid(){ //代码略 } .width('100%').flexGrow(2) // Grid组件为主体部分菜单，高度自适应拉伸 Divider().width('80%').height(4) Text('更多功能敬请关注更新') .fontSize(12).height(20).width('100%').textAlign(TextAlign.Center) // 底部高度和宽度固定 }

主体部分共8个选项菜单，采用Grid组件实现，需要解决的是Grid共有几列的问题。这将通过监视设备方向实现，当设备为竖向时，有2列；设备为横向时有4列。声明了一个变量Orient_V来监视设备方向（代码在以后说明），并调整columnsTemplate属性用来改变Grid中的列数。 Grid(){//代码略} .columnsTemplate(this.Orient_V ? '1fr 1fr' : '1fr 1fr 1fr 1fr') // 监视设备方向调整列数 .rowsGap(15).columnsGap(15) // 行列间距 Grid组件中，使用ForEach来循环添加菜单，代码如下 Grid() { ForEach(EquationTypeList, (item: EquationType, index: number) => { GridItem() { this.Tag(item, index); }.height(64) }, (item: EquationType) => item.TypeTitle) } 其中，Tag(item,index)是自定义组件，将在下面说明。EquationTypeList是自定义的菜单数据数组。