当前位置:   article > 正文

鸿蒙Harmony arkTS Stage开发 设备横屏竖屏监听事件_arkts行高

arkts行高

鸿蒙开发,遇到设备需要根据横屏竖屏不同状态来显示不同界面。

具体需求是正常竖屏时候,显示正常的组件,然后有24行,正好显示完全,如果横屏则行数太多显示不全,这时候需要把组件加入到一个Scroll里面,然后设置小行高,满足每一行行高不至于太小。

上代码:

  1. @Component
  2. export struct Teletext {
  3. @State fontSizeAdj: number = 0;
  4. @State code:string="700";
  5. scroller:Scroller=new Scroller()
  6. @Prop lTrade:string;
  7. @State bLandscape:boolean=false;
  8. // 当设备横屏时条件成立
  9. listener = mediaquery.matchMediaSync('(orientation: landscape)');
  10. onPortrait(mediaQueryResult) {
  11. if (mediaQueryResult.matches) {
  12. this.bLandscape=true;
  13. } else {
  14. this.bLandscape=false;
  15. }
  16. }
  17. aboutToAppear() {
  18. // 绑定当前应用实例
  19. this.onPortrait = this.onPortrait.bind(this);
  20. // 绑定回调函数
  21. this.listener.on('change', this.onPortrait);
  22. }
  23. // 手动改变设备横竖屏状态函数
  24. private changeOrientation(isLandscape: boolean) {
  25. // 获取UIAbility实例的上下文信息
  26. let context = getContext(this) as common.UIAbilityContext;
  27. // 调用该接口手动改变设备横竖屏状态
  28. window.getLastWindow(context).then((lastWindow) => {
  29. lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
  30. });
  31. }
  32. build() {
  33. Column() {
  34. Row() {}
  35. .width('100%')
  36. .height('7%')
  37. Row() {
  38. if (this.bLandscape) { // 若设备为横屏状态,更改相应的页面布局
  39. Scroll(this.scroller) {
  40. MyCustComponent().backgroundColor(Color.Grey)
  41. .height('200%')
  42. }
  43. .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
  44. //.scrollBar(BarState.On) // 滚动条常驻显示
  45. .scrollBarColor(Color.Gray) // 滚动条颜色
  46. .scrollBarWidth(10) // 滚动条宽度
  47. .edgeEffect(EdgeEffect.None)
  48. }
  49. else {
  50. MyCustComponent()
  51. .backgroundColor(Color.Grey)
  52. .height('100%')
  53. }
  54. }
  55. .height('100%')
  56. .justifyContent(FlexAlign.Start) //行排列方式
  57. .backgroundColor(Color.White)
  58. }//column
  59. .backgroundColor(Color.Orange)
  60. //}//stack
  61. //.backgroundColor(Color.Green)
  62. }//build
  63. }

这里MyCustComponent是我自定义页面,有24行Text,横屏时候高度放大2倍,可以在Scroll里面滚动。

本文所参考资料媒体查询(mediaquery)-应用模型概述-应用模型-开发-HarmonyOS应用开发

各种屏幕分辨率相关,屏幕形状相关的查询都能这里找到。

另外一个知识点,Row,Text等组件的行高控制,除了固定height,‘100%’,像素之外,还可以用

.constraintSize({minHeight:25})这样来设置约束。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/286514
推荐阅读
相关标签
  

闽ICP备14008679号