HarmonyOS 鸿蒙Next应用“丁斗口算”开发记录(3)

HarmonyOS 鸿蒙Next应用“丁斗口算”开发记录(3) 第三节 适配设备旋转

用户旋转设备后，屏幕显示也应同时变化以适应宽度/高度的不同。设计思路是监视组件尺寸，在尺寸变化时，刷新显示。上一节说到了主要是Grid组件内Item的排列变化。代码如下：

@State Orient_V : boolean = true;

Build(){ Flex({ direction:FlexDirection.Column}) { // 代码略 Grid() { // 代码略 } .columnsTemplate(this.Orient_V ? ‘1fr 1fr’ : ‘1fr 1fr 1fr 1fr’) // 监视设备方向调整列数 .rowsGap(15).columnsGap(15) // 行列间距 .width(‘100%’) .flexGrow(2) .padding(this.Orient_V?{top:45,bottom:45,left:10,right:10}:{left:45,right:45,top:10,bottom:10}) // 沉浸式避让 } .width(‘100%’).height(‘100%’) .onAreaChange((oldValue: Area, newValue: Area) => { // 显示面积发生变化时调用，以显示区域的宽度和高度确定屏幕方向 if(newValue.width > newValue.height ){ this.Orient_V = false; }else{ this.Orient_V = true; } }) .linearGradient({ angle:180, colors:[[0xF4F4F1,0.0],[0xF4F4EE,0.5],[0xF4F4DF,1.0]] }) .padding(10) }

组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。由绘制变化所导致的渲染属性变化不会响应回调，如translate、offset。

oldValue：返回目标元素变化之前的宽高以及目标元素相对父元素和页面左上角的坐标位置。

newValue：返回目标元素变化之后的宽高以及目标元素相对父元素和页面左上角的坐标位置。

在onAreaChange事件中，比较屏幕宽度和高度，确定屏幕的方向，并改变Orient_V的值。

页面的主体部分Grid组件，通过修改columnsTemplate属性，进而改变显示GridItem的列数，实现适配横屏/竖屏的目的。

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。只要将columnsTemplate的值为'1fr 1fr 1fr 1fr'，或者'1fr 1fr'，即可实现上述布局。

rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列宽度。

沉浸式避让时，也应注意左右边距，横屏和竖屏时左右边距是不一样的。

其他说明：
a. linearGradient属性设置了页面的背景渐变色，
b. padding属性设置了组件的内边距

EquationTypeList中记录了所有菜单的信息，代码如下

---------------------------------------------------------------------------------------------------------------
export let EquationTypeList : EquationType[] = [
 new EquationType('Add20','20以内加减法','2+3=?'),
 new EquationType('Add100','100以内加减法','54-16=?'),
 new EquationType('99Mul','九九乘法','3*7=?'),
 new EquationType('2Mul','两位数乘法',"12*34=?"),
 new EquationType('Div4','四位数除法','1200➗30=?'),
 new EquationType('OneEqu','一元一次方程','X+3=7'),
 new EquationType('4Cal','四则运算','(12+13)*3=?'),
 new EquationType('TwoEqu','二元一次方程','X=?,Y=?')
];
---------------------------------------------------------------------------------------------------------------

Grid组件内的代码见上一节，GridItem的代码如下：


GridItem() {
 this.Tag(item,index);
}.height(64)

其中Tag是自定义组件，组成了菜单子项，主要代码如下

@Builder Tag(item:EquationType,index:number){ Row(){ Image($r(‘app.media.ic_public_feedback’)).width(32).height(32) Column() { Text(item.TypeTitle) .fontSize(16) .padding(5) .width(‘100%’) .fontWeight(FontWeight.Bold) .fontColor(Color.Black) Text(item.Memo) .fontSize(12) .padding(5) .width(‘100%’) .fontWeight(FontWeight.Normal) .fontColor(‘0x323232’) }.justifyContent(FlexAlign.Center) } .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) }