【每日学点HarmonyOS Next知识】亮度修改、边距设置、滑动计算单位、对话框安全区域问题、flex不溢出-CSDN博客

本文链接：https://blog.csdn.net/sjw890821sjw/article/details/148219551

1、HarmonyOS 系统亮度如何修改？

可以查看窗口相关的文档，使用setWindowBrightness，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowbrightness9-1

setWindowBrightness(brightness: number): Promise<void>
允许应用主窗口设置屏幕亮度值，使用Promise异步回调。
当前屏幕亮度规格：窗口设置屏幕亮度生效时，控制中心不可以调整系统屏幕亮度，窗口恢复默认系统亮度之后，控制中心可以调整系统屏幕亮度。

参数名	类型	必填	说明
brightness	number	是	屏幕亮度值。该参数为浮点数，取值范围为[0.0, 1.0]或-1.0。1.0表示最亮，-1.0表示默认亮度。

2、HarmonyOS 关于 margin 设置百分比的问题？

设置了 margin top 40%，但是看距离不对（横竖屏都不对）

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  onPageShow(): void {
    // window.getLastWindow(getContext(this)).then((lastWindow) => {
    //   // 横屏
    //   lastWindow.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED);
    //   // 全屏
    //   lastWindow.setWindowLayoutFullScreen(true);
    //   // 设置状态栏和导航条隐藏
    //   lastWindow.setSpecificSystemBarEnabled('status', false);
    // })
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
        .margin({ top: '40%' })
        .backgroundColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
  }
}

RelativeContainer的margin起始点是锚点位置来计算的，margin设置百分比参考的是父容器的宽度而不是父容器的长宽。

RelativeContainer参考：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-relativecontainer.md
margin参考：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin

margin(value: Margin | Length | LocalizedMargin)

设置外边距属性。

参数名	类型	必填	说明
value	Margin \| Length \| LocalizedMargin12+	是	设置组件的外边距。参数为Length类型时，四个方向外边距同时生效。默认值：0 单位：vp margin设置百分比时，上下左右外边距均以父容器的width作为基础值。在Row、Column、Flex交叉轴上布局时，子组件交叉轴的大小与margin的和为整体。例如Column容器宽100，其中子组件宽50，margin left为10，right为20，子组件水平方向偏移10。

3、HarmonyOS 滑动计算中的单位问题？

onScroll((xOffset: number, yOffset: number) => 里面的yOffset单位是什么，需要和avoidArea.topRect.height顶部状态栏高度做对比，需要统一单位

单位为vp，参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5

4、HarmonyOS BaseDialogOptions是否可以支持设置dialog布局扩展到非安全区域？

BaseDialogOptions是否可以支持设置dialog布局扩展到非安全区域。现象：如果dialog显示在底部，会避开非安全区域，dialog展示底部会因为非安全区域不能全覆盖背景色希望：如果dialog显示在底部，支持配置非安全区域可以扩展到弹窗的背景。

使用offset偏移量，覆盖到导航栏：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5

5、HarmonyOS 如何让某个flex的内容不溢出？

如下demo中搜索历史的内容会溢出，请问如何做出限制：

import { Queue } from '@kit.ArkTS';
import { StartupConfigEntry } from '@kit.AbilityKit';
PersistentStorage.persistProp('inputArrayProp', [])
@Entry
@Component
struct TestPersistPage {
  @State message: string = 'Hello World';
  @StorageLink('inputArrayProp') inputArr: Array<string> =
    [JSON.stringify(new StockSearchModel('StockSearchModel', '300033', '33'))]
  @State searchHistory: Array<StockSearchModel> = []
  @State gridItems: Array<StockSearchModel> =
    [new StockSearchModel('StockSearchModel', '300033', '33'), new StockSearchModel('StockSearchModel', '300033', '33'),
      new StockSearchModel('StockSearchModel', '300033', '33')
      , new StockSearchModel('StockSearchModel', '300033', '33'), new StockSearchModel('StockSearchModel', '300033', '33'),
      new StockSearchModel('StockSearchModel', '300033', '33')]
  @State i: number = 0;
  aboutToAppear(): void {
    this.inputArr.forEach(element => {
      this.searchHistory.push(JSON.parse(element))
    });
  }
  aboutToDisappear(): void {
    let tempArr: Array<string> = []
    this.searchHistory.forEach((item, index) => {
      tempArr.push(JSON.stringify(item))
    })
    this.inputArr = tempArr
  }
  build() {
    Scroll() {
      Flex({
        direction: FlexDirection.Column,
        justifyContent: FlexAlign.Start,
        alignItems: ItemAlign.Start,
        wrap: FlexWrap.NoWrap
      }) {
        Row() {
          Text('点击添加一只股票的搜索历史')
            .onClick(() => {
              this.searchHistory.unshift(new StockSearchModel(`StockSearchModel${this.i++}`, '300033', '33'))
            })
            .fontColor('#D6000000')
            .fontWeight(500)
            .fontSize(18)
            .lineHeight(22)
            .textAlign(TextAlign.Start)
          Image($r('app.media.app_icon'))
            .height(20)
            .width(20)
            .onClick(() => {
              this.searchHistory = [];
            })
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height(22)
        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(this.searchHistory, (item: StockSearchModel, index: number) => {
            Text(item.stockName)
              .maxLines(1)
              .fontColor('#D600000')
              .fontSize(14)
              .padding({
                left: 10,
                right: 10,
                bottom: 4,
                top: 4
              })
              .margin({ right: 12, top: 12 })
              .backgroundColor('#0a000000')
              .borderRadius(4)
              .height(28)
              .fontWeight(400)
          })
        }
        .constraintSize({ maxHeight: 200, minHeight: 100 })
        Text('热门搜索')
          .fontColor('#D600000')
          .fontWeight(500)
          .fontSize(18)
          .lineHeight(22)
          .textAlign(TextAlign.Start)
          .margin({ top: 20 })
        Grid() {
          ForEach(this.gridItems, (item: StockSearchModel, index: number) => {
            GridItem() {
              Text(item.stockName)
            }
          })
        }
        .margin({ top: 20 })
        .rowsTemplate('1fr 1fr 1fr')
        .columnsTemplate('1fr 1fr')
        .columnsGap(0)
        .rowsGap(0)
        .height('30%')
        .constraintSize({
          minHeight: 200
        })
      }
      .constraintSize({
        minHeight: 500
      })
      .width('100%')
      .layoutWeight(1)
      .backgroundColor('#FFFFFFFF')
      .padding({
        top: 16,
        bottom: 16,
        left: 16,
        right: 16
      })
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
  }
}
@Observed
export class StockSearchModel {
  stockCode: string = ''
  stockMarket: string = ''
  stockName: string = ''
  constructor(stockName: string, stockCode?: string, stockMarket?: string) {
    this.stockName = stockName;
    this.stockCode = stockCode || ''
    this.stockMarket = this.stockMarket || ''
  }
}

可以在历史记录的Flex容器上，增加.clip(true)属性，将超出的显示内容截断，伪代码如下：

Flex({ wrap: FlexWrap.Wrap }) {
 // ...
}
.constraintSize({ maxHeight: 200, minHeight: 100 })
.clip(true)