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

第六节 自适应拉伸1

上一节将题目页面做了分割设计，页面分为上下两部分，上部高度固定，下部自适应拉伸。使用Flex组件实现，Flex组件的接口direction属性设为direction:FlexDirection.Column，实现纵向排列，宽度和高度占满屏幕。上部组件的高度设为固定值，设置下部组件的.flexGrow属性即可实现

      Flex({direction:FlexDirection.Column}) {

        Row()// 头部自适应延申

                     .height(‘38vp’)

.width(‘100%’)

Row() // 主要区域

       .width(‘100%’)

    .flexGrow(2)

}     

.height(‘100%’)

.width(‘100%’)

上部标题部分的自适应拉伸。根据显示内容和屏幕情况，可以发现，只要高度恒定，宽度自适应伸缩，文字尺寸和图片尺寸保持不变即可。如下

手机竖屏

平板横屏

实现方法，整个头部用一个Row组件放置，高度恒定，宽度占满屏幕。根据屏幕方向，需要避让相机挖空，所以设置不同的padding。该组件内再放置三个组件，分别是左侧的‘返回’，中间的计数，以及右侧的计时。这三个组件占满宽度方向，中间的间距是自适应的。因此，设置Row组件的justifyContent主轴对齐属性为FlexAlign.SpaceBetween。

左侧的返回，包括一个图片和几个文字，使用Row组件包含一个Image组件和一个Text组件实现。Text的内容是根据题目类型确定的，再首页跳转到题目页时，同时传递参数过来，修改this.title变量实现标题的显示。

计数部分包括重做次数和显示答案次数，使用Column组件实现。Column组件内包括两个Text组件。

计时组件同样包括一个图片和文字，用一个Row组件放置。使用TextTimerController实现计时功能

代码如下：

aboutToAppear(): void {

    this.title = EquationTypeList[this.index].TypeTitle;

this.name = EquationTypeList[this.index].TypeName;

}

        Row()

        { // 头部–自适应拉伸

          Row() {

            Image($r(‘app.media.ic_public_arrow_left’))

              .width(20)

              .height(20)

              .onClick(() => {

                router.back();

              })

            Text(this.title)

              .fontSize(18)

              .fontWeight(FontWeight.Bold)

          } // 返回箭头及标题

            .height(‘100%’)

          Column() {

            Text(‘重做次数：’ + this.reCalCount.toString())

              .fontSize(12)

              .textAlign(TextAlign.End)

            Text(‘显示答案次数：’ + this.dispRltCount.toString())

              .fontSize(12)

              .textAlign(TextAlign.End)

          } // 计数

            .alignItems(HorizontalAlign.Center)

            .justifyContent(FlexAlign.SpaceAround)

            .height(‘100%’)

          Row() {

            Image($r(‘app.media.ic_public_stopwatch’))

              .width(18)

              .height(18)

              .margin({ right: 5 })

            TextTimer({ isCountDown: false, count: 300000, controller: this.textTimerController })

              .format(this.format)

              .fontColor(Color.Black)

              .fontSize(12)

              .onTimer((utc: number, elapsedTime: number) => {

                this.countTime = elapsedTime;

              })

          } // 计时

            .justifyContent(FlexAlign.Start)

            .alignItems(VerticalAlign.Center)

        } // 头部自适应延申

          .height(‘38vp’)

          .width(‘100%’)

          .padding(this.Orient_V?{ left: 10, right: 10 }:{left:35,right:35})

          .justifyContent(FlexAlign.SpaceBetween)

          .alignItems(VerticalAlign.Center)

          .margin({ top: 5, left: 5, right: 5 })