
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’)
}
至此,完成了主要区域左侧的设计。
