DEV Community

Cover image for Image Cropping, Disabling Back Gestures, App Icon Size Specifications, Database Errors
kouwei qing
kouwei qing

Posted on

Image Cropping, Disabling Back Gestures, App Icon Size Specifications, Database Errors

[Daily HarmonyOS Next Knowledge] Image Cropping, Disabling Back Gestures, App Icon Size Specifications, Database Errors, Text Component Omission Display for Excess Length

1. What are the units for the interface area settings (x, y, size) of HarmonyOS image cropping?

The size is specified in pixels (px), and the units for x and y are also pixels (px).

2. How to disable the swipe-back gesture in HarmonyOS?

An overlay layer is added using context.getOverlayManager().addComponentContent, but this layer cannot disable the swipe-back gesture.

Reference code (index page):

import { AppRouter } from './AppRouter' 
import { AppDialog } from './AppDialog' 
import { PrivacyDialogViewBuilder } from './PrivacyDialogView'; 
import { DefaultDialog } from './DefaultDialog';
Enter fullscreen mode Exit fullscreen mode
@Entry
@Component
struct Index {
  @Builder
  PageMap(name: string) {
    DefaultDialog()
  }

  build() {
    Navigation(AppRouter.getInstance().getPathStack()) {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
          Button('Custom Popup Based on Navigation', { stateEffect: true, type: ButtonType.Capsule })
            .onClick(() => {
              AppDialog.build(wrapBuilder(PrivacyDialogViewBuilder))
                .onBackPressed((): boolean => true)
                .open();
            })
        }
      }.height("100%").width("100%")
    }.hideTitleBar(true).navDestination(this.PageMap)
  }
}
Enter fullscreen mode Exit fullscreen mode

3. What are the specifications for HarmonyOS app icon sizes, and what sizes are required for different devices? How does an app adapt to multiple device requirements?

Reference document: https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-general-0000001760708152#section1353515481417

Visual Style

Color Contrast

Standard Number 2.1.4.1 Color Contrast
Standard Description The colors used in the app must meet the minimum contrast requirements:

- The contrast ratio between icons or title text and the background is greater than 3:1.

- The contrast ratio between body text and the background is greater than 4.5:1.
Test Method Obtain background color information and calculate the contrast between each control and the background.
Judgment Criteria - Contrast ratio between icons or title text and background > 3:1.

- Contrast ratio between body text and background > 4.5:1.
Standard Level Recommended
Applicable Device Types Mobile phones, foldables, tablets, PC/2in1
Special Considerations None
System Capabilities 1. For setting component background color, refer to Background Settings - backgroundColor

2. For setting font color, refer to Text Common - fontColor

Font Size

Standard Number 2.1.4.2 Font Size
Standard Description The text size in the app must meet the minimum font size requirement:

The text font size is not smaller than 12 fp (recommended), and the minimum must not be smaller than 8 fp (mandatory).
Test Method Observe and obtain the text size within the app.
Judgment Criteria Text font size ≥ 8 fp.
Standard Level Mandatory
Applicable Device Types Mobile phones, foldables, tablets, PC/2in1
Special Considerations None
System Capabilities Refer to Text Common - fontSize

4. Why does inserting data into a HarmonyOS relationalStore database table that hasn't been created throw an error 14800021?

Errors occur during SQL execution, such as:

  1. Inserting or updating a non-created table.
  2. Inserting or updating a non-existent column.
  3. Calling undefined functions, etc.

5. When a HarmonyOS Text component is set to omit the tail for excess length, it shows abnormal omission in specific cases (omitting early when space remains at the tail).

For omission in mixed text, set the wordBreak property to WordBreak.BREAK_ALL to resolve early omission.

Reference document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5#textalign

textAlign(value: TextAlign)

Sets the horizontal alignment of the text paragraph.

The text paragraph width fills the Text component width.

The vertical position of the text paragraph can be controlled via the align property. In this component, the align property cannot control the horizontal position (e.g., Alignment.TopStart, Alignment.Top, and Alignment.TopEnd all position content at the top; Alignment.Start, Alignment.Center, and Alignment.End center content vertically; Alignment.BottomStart, Alignment.Bottom, and Alignment.BottomEnd position content at the bottom). The horizontal position is controlled in conjunction with the textAlign property.

When textAlign is set to TextAlign.JUSTIFY, the wordBreak property must be set based on the text content, and the last line of text does not participate in full justification, displaying a horizontal start alignment effect.

Top comments (0)