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

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

题目页的主要区域，也就是下部区域，使用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’)

}