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

第八节 自适应拉伸3

本节讲述右侧数字按钮部分的一多适配设计。数字按钮是用来输入答案的。为什么要设计数字按钮，而不是用数字键盘呢？实际上最早的版本就是用的系统输入法，但是，在多个题目之间切换的时候，输入法一直在弹出、退出，非常影响使用。如果将输入法窗口固定不动，又会严重影响可使区域的面积。并且，系统输入法的数字键盘，不包括本应用的控制键（上一题、下一题等），更加影响了体验。因此，我设计了专用的数字键。数字键与控制键配合用户双手操作，类似于打游戏的方式。最经常按动的“下一题”按钮，放在左手拇指位置；不常用的四个按钮，“上一题、提示、重出、交卷”放在下部中间位置，右手拇指按动数字键，加快了操作速度，体验更好。剩余的大部分区域用来显示题目，输入的答案，以及其他信息。 数字键包括0-9十个数字键，以及“<-“删除键、”C”清除键，共计12个。竖屏时为12行1列，横屏时为6行2列。数字区宽度占全屏宽度的25%。高度上，要结合设备类型确定。手机屏幕相对平板要小，如果用同样比例的话，平板的数字键区域会非常大，不便于右手操作。因此，这里要读取一下设备的类型。如果是手机的话，高度可以占满屏幕高度（横屏/竖屏），如果是平板的话，高度只能占40%，并且要下部对齐，让用户够得着。那为什么没选择固定高度呢？因为要适应横屏和竖屏啊。横屏和竖屏时，行数不一样。 数字键区域上方在加上一个提示text即可。 代码如下 Column() { Text('点击按钮') .width('100%') .height(20) .fontSize(12) .textAlign(TextAlign.Center) Text('输入答案') .width('100%') .height(20) .fontSize(12) .textAlign(TextAlign.Center) Grid(){…} .width('100%') .height(this.deviceType=='phone'?'90%':'40%') .columnsTemplate(this.Orient_V?this.btnGridcoltemp_v:this.btnGridcoltemp_h) .rowsTemplate((this.Orient_V?this.btnGridrowtemp_v:this.btnGridrowtemp_h)) .layoutDirection(GridDirection.RowReverse) .borderWidth(1).borderRadius(3) } .width('25%') .height('100%') .padding(5) .justifyContent(FlexAlign.End)