Brightness Adjustment, Margin Settings, Scroll Calculation Units, Dialog Safe Area Issues, and Flex Overflow Prevention

#harmonyosnext

【Daily HarmonyOS Next Knowledge】 Brightness Adjustment, Margin Settings, Scroll Calculation Units, Dialog Safe Area Issues, and Flex Overflow Prevention

1. How to modify the system brightness in HarmonyOS?

You can check the documentation related to windows and use setWindowBrightness. Refer to the document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowbrightness9-1

setWindowBrightness(brightness: number): Promise<void>

Allows the application's main window to set the screen brightness value using a Promise for asynchronous callbacks.

Current screen brightness specifications: When the window sets the screen brightness, the control center cannot adjust the system screen brightness. After the window restores the default system brightness, the control center can adjust the system screen brightness.

Parameter Name	Type	Required	Description
brightness	number	Yes	Screen brightness value. This parameter is a floating-point number, with a value range of [0.0, 1.0] or -1.0. 1.0 represents the brightest, and -1.0 represents the default brightness.

2. Issues with setting margins as percentages in HarmonyOS

Setting margin top 40% does not appear to have the correct spacing (incorrect in both portrait and landscape orientations).

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

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

  onPageShow(): void {
    // window.getLastWindow(getContext(this)).then((lastWindow) => {
    //   // Landscape
    //   lastWindow.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED);
    //   // Full screen
    //   lastWindow.setWindowLayoutFullScreen(true);
    //   // Hide status bar and navigation bar
    //   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%')
  }
}

Explanation: The margin of RelativeContainer is calculated from the anchor point. When setting margins as percentages, the reference is the parent container's width, not its length or height.

RelativeContainer reference: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-relativecontainer.md
margin reference: 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)

Sets the margin attribute.

Parameter Name	Type	Required	Description
value	Margin \	Length \	LocalizedMargin12+

3. Unit issues in HarmonyOS scroll calculations

What is the unit of yOffset in onScroll((xOffset: number, yOffset: number) =>? It needs to be compared with the avoidArea.topRect.height (status bar height), requiring unit consistency.

Unit: vp. Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5

4. Can BaseDialogOptions in HarmonyOS support extending the dialog layout to non-safe areas?

Requirement: When the dialog is displayed at the bottom, can it be configured to extend the background to non-safe areas (e.g., navigation bar)?

Current behavior: The dialog avoids non-safe areas at the bottom, causing the background to not fully cover the area.

Solution: Use offset to override the navigation bar. Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-promptaction-V5

5. How to prevent content overflow in a HarmonyOS Flex container?

In the following demo, search history content overflows. How to restrict this?

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 || ''
  }
}

Solution: Add the .clip(true) attribute to the Flex container for historical records to truncate overflowing content. Pseudocode example:

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

DEV Community