【每日学点HarmonyOS Next知识】顶部状态栏、文本最大行数后缀、弹窗背景、状态栏颜色、导航

1、HarmonyOS 应用把顶部系统状态栏信息完全覆盖了？

//设置窗口全屏模式时导航栏、状态栏的可见模式（需全部显示，该参数设置为['status', 'navigation']，不设置，则默认不显示）
let names: Array<'status' | 'navigation'> = [];
windowClass.setWindowSystemBarEnable(names, (err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in setting the system bar to be visible.');
});
console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));

参考文档：https://developer.huawei.com/consumer/cn/doc/app/50106

设置全屏沉浸式后可以使用getWindowAvoidArea()接口获取布局遮挡区域，在组件中根据避让区域返回值自行设置：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5

如果需要显示状态栏和导航栏的话，是要每个页面都去做规避的，如果可以不想显示状态和导航栏可以通过setSpecificSystemBarEnabled来隐藏：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

关于窗口内容需要规避区域的类型枚举：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

2、HarmonyOS 怎么处理文本显示最大行数后追加...全文的问题？

用计算的方式算出每个字的宽度，累加，但是有时计算不准确，我们文字内部含有表情，然后有时系统一些文字也会折行，用了wordBreak(WordBreak.BREAK_ALL)这个api 不折行显示了，但是还是计算不准确，延后显示。

首先使用measure.measureText()方法测量实际文本宽度，接着使用display.getAllDisplays()获取手机屏幕宽度，然后用"屏幕宽度 * 最大行数 * 组件宽度比例"的结果和"实际文本宽度"进行比较大小，判断是否需要"...展开全文"；
当需要"...展开全文"时，只展示maxLines属性设置的固定高度的文本内容，当点击"...展开全文"时将该文本改成"...收起"并添加curves.springMotion曲线动画，同时在animateTo的显示动效的闭包函数中将maxLines属性值修改为-1使得该属性无效；
当需要"...收起"时，将collapseText的值改为"...展开全文"，并设置收起动画。

// MyText.ets
import measure from '@ohos.measure'
import curves from '@ohos.curves';
import { BusinessError } from '@ohos.base';
import display from '@ohos.display';

@Component
@Preview
export struct MyText {
// 长文本
@State longMessage: string = "ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、简洁开发的优质体验。"
// 最大显示行数
@State lines: number = 3;
// 长文本状态（展开 or 收起）
@State collapseText: string = '...展开全文'
// 屏幕宽度（单位px）
screenWidth: number = 0;
// 是否需要显示"展开"字样（注：当文本长度较短时就不需要"展开"）
@State isExpanded: boolean = false
// 测量文本宽度（单位px）
@State textWidth: number = measure.measureText({
textContent: this.longMessage,
fontSize: 15
})
// 获取当前所有的display对象
promise: Promise<Array<display.Display>> = display.getAllDisplays()

aboutToAppear() {
console.log(文本宽度为：${this.textWidth})
this.promise.then((data: Array<display.Display>) => {
console.log(所有的屏幕信息：${JSON.stringify(data)})
//单位为像素
this.screenWidth = data[0]["width"]
// 屏幕宽度 * 最大行数 * 组件宽度比例和文字测量宽度
this.isExpanded = this.screenWidth * this.lines * 0.8 <= this.textWidth
}).catch((err: BusinessError) => {
console.error(Failed to obtain all the display objects. Code: ${JSON.stringify(err)})
})
}

build() {
Row() {
Column() {
if (this.isExpanded) {
Stack({ alignContent: Alignment.BottomEnd }) {
Text(this.longMessage)
.fontSize(15)
.fontColor(Color.Black)
.maxLines(this.lines)
.width('80%')
Row() {
Text(this.collapseText)
.fontSize(15)
.backgroundColor(Color.White)
}
.justifyContent(FlexAlign.End)
.onClick(() => {
if (this.collapseText == '...展开全文') {
this.collapseText = '...收起';
// 展开动画
animateTo({
duration: 150,
curve: curves.springMotion(0.5, 0.8),
}, () => {
this.lines = -1; // 使得设置的最大行属性无效
})
} else {
this.collapseText = '...展开全文';
// 收起动画
animateTo({
duration: 100,
curve: Curve.Friction,
}, () => {
this.lines = 3; // 只显示3行
})
}
})
}
}
else {
Text(this.longMessage)
.fontSize(15)
.fontColor(Color.Black)
}
}
.width('100%')
}
.height('100%')
}
}

// Index.ets
import { MyText } from './MyText'
@Entry
@Component
struct Index {
build(){
Column(){
MyText()
}
}
}

3、HarmonyOS 组件绑定popup弹窗，如何将弹窗背景设置成透明状态？

popupColor设置成透明但弹窗还是默认白色背景

Image($r("app.media.gray_tips_icon"))
  .width($r("app.string.dp15"))
  .height($r("app.string.dp15"))
  .onClick(() => {
    this.tipPopup = !this.tipPopup
  })
  .bindPopup(this.tipPopup, {
    builder: this.popupBuilder(),
    placement: Placement.Top,
    mask: false,
    popupColor: Color.Transparent,
    enableArrow: true,
    showInSubWindow: false,
    onStateChange: (e) => {
      if (!e.isVisible) {
        this.tipPopup = false
      }
    },
    arrowOffset: $r("app.string.dp50"),
    offset: { x: $r("app.string.dp20") },
    radius: $r("app.string.dp8")
  })

参考代码：

@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @Builder popupBuilder(){
    Text('气泡的内容')
  }

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          builder: this.popupBuilder(),//内容
          placement:Placement.Bottom, // 气泡的弹出位置
          maskColor: Color.Transparent,
          popupColor:Color.Transparent, // 气泡的背景色
          backgroundBlurStyle: BlurStyle.NONE,
          shadow: {
            radius:0
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .padding({ top: 5 })
    .backgroundColor(Color.Pink)
  }
}

Navigation组件设置.hideNavBar(true)，调用pushPathByName打开首页和二级页面首页的navBar隐藏，符合预期二级页面的navBar未隐藏且有返回按钮，有办法隐藏吗

设置NavDestination().hideTitleBar(true)

5、HarmonyOS 每个页面状态栏背景颜色和字体颜色不一样，怎么动态设置每个页面的沉浸式状态栏？

目前尝试在每个页面生命周期onPageShow和aboutToApear中调用以上两个方法，但是有些页面颜色还是没变过来，出现了问题，生命周期中无法正确改变系统状态栏颜色