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

第七节 自适应拉伸2

这个应用已经上架，且已经更新过了，跟本贴有一些不一样的地方。有兴趣的朋友可以下载体验。希望能在评论区看到您的建议。

题目页的主要区域，也就是下部区域，使用Row组件实现。Row组件内分为左右两部分，这里的设计思路是高度占满上级组件，宽度按比例分割。 Row() // 主要区域 { Flex({direction: FlexDirection.Column,wrap: FlexWrap.NoWrap }) // 题目区和下部按钮 {..}
.width('75%') .height('100%') Column() {…} .width('25%') .height('100%') } 左侧部分占宽度的75%，分为上部的题目区域和下部的操作按钮区域。屏幕尺寸和方向不同时，这一部分变化最大。设计思路是，题目区域有固定的题目数量，根据屏幕大小调整每个题目占据的空间。再根据屏幕的方向，调整题目行列数量。因此采用Grid组件实现。Grid组件在宽度方向占满上级组件，高度方向自适应拉伸。下部的控制按钮，考虑到竖屏时宽度太窄一行放不下5个按钮，需要将其中四个按钮设计自动换行。因此下部采用Flex，设置接口参数 direction: FlexDirection.Row,wrap: FlexWrap.NoWrap。 代码如下 Flex({direction: FlexDirection.Column,wrap: FlexWrap.NoWrap }) // 题目区和下部按钮 { Grid() {…} .flexGrow(2) // 占据剩余区域 .width('100%') .columnsTemplate(this.Orient_V?this.gridcoltemp_v:this.gridcoltemp_h) .rowsTemplate(this.Orient_V?this.gridrowtemp_v:this.gridrowtemp_h) Flex({ direction: FlexDirection.Row,wrap: FlexWrap.NoWrap }) // 下部按钮 {…} .height(this.Orient_V?102:48) // 下部按钮高度恒定 .width('100%') }

Grid组件放置题目，它的高度自适应拉伸（.flexGrow(2)），宽度占满上级组件。columnsTemplate和rowsTemplate属性设置了行列数量，根据屏幕方向自动变化。样子可参考之前的帖子。 下部按钮区域，因为“下一题”是经常按动的，所以设计成相对其他按钮更大。Flex内的按钮横向排列，“下一题”单独占据一格，剩下的四个按钮自动换行。 Flex({ direction: FlexDirection.Row,wrap: FlexWrap.NoWrap }) // 下部按钮 { Row() // 下一题按钮 {…} .width(80).height('100%') .justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center) Grid() // 其他四个按钮 {…} .flexGrow(2).align(Alignment.Center).height('100%') .rowsTemplate(this.Orient_V?'1fr 1fr':'1fr') .columnsTemplate(this.Orient_V?'1fr 1fr':'1fr 1fr 1fr 1fr') } 至此，完成了主要区域左侧的设计。