HarmonyOS 鸿蒙Next应用“丁斗口算”开发记录(2)--页面设计

HarmonyOS 鸿蒙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%
}

Flex弹性布局构成了页面的整体，方向为column，宽度和高度占据100%，内边距padding设为10.

进一步的，头部和底部高度固定，宽度为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) // 底部高度和宽度固定
}

Stack组件是头部，高度固定；Grid组件为菜单主体，高度设为.flexGrow(2)自适应拉伸；Text组件为底部，高度固定；另有两个Divider分割，高度也是固定的。这样，在不同的屏幕尺寸下，仅有菜单主体部分高度拉伸，其他的均为固定高度。

主体部分共8个选项菜单，采用Grid组件实现，需要解决的是Grid共有几列的问题。这将通过监视设备方向实现，当设备为竖向时，有2列；设备为横向时有4列。声明了一个变量Orient_V来监视设备方向（代码在以后说明），并调整columnsTemplate属性用来改变Grid中的列数。

Grid(){//代码略}
.columnsTemplate(this.Orient_V ? '1fr 1fr' : '1fr 1fr 1fr 1fr') // 监视设备方向调整列数
.rowsGap(15).columnsGap(15) // 行列间距

通过columnsTemplate属性设置列数后，Grid内的子元素将自动排列并拉伸，实现在不同屏幕不同尺寸/方向时的自适应。

Grid组件中，使用ForEach来循环添加菜单，代码如下

Grid() {
  ForEach(EquationTypeList, (item: EquationType, index: number) => {
    GridItem() {
      this.Tag(item, index);
    }.height(64) // 菜单的高度是固定的
  }, (item: EquationType) => item.TypeTitle)
}```
其中，Tag(item,index)是自定义组件，将在下面说明。EquationTypeList是自定义的菜单数据数组。