Day One

Initialize a new NPM project (follow the prompts):

npm init

Install TypeScript, TSLint, and Node.js type definitions:

npm install -s typescript tslint @types/node

Create a file named tsconfig.json in the root directory and add the following configuraton:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist"
  },
  "include": [
    "src"
  ]
}

Compile TypeScript files using tsc, which generates JavaScript files in the dist folder. Run the compiled file using node ./dist/xx.js to see its output.

Use Alt + Insert for quick generation.

Day Two

Alt + Left Click

Navigate into selected code to view detailed information.

Column and Row

These components define whether child elements are arranged vertically or horizontally.

Width and Height

@Entry
@Component
struct Index {
  @State message: string = 'Hello'
  @State count: number = 0

  build() {
    Column() {
      Text(this.message + `${this.count}`)
        .width("400%")
        .height(100)
      Text(`${this.message} ${this.count}`)
        .width(100)
        .height(100)

      Text("padding")
        .border({ width: 2 })
        .padding({ top: 50, left: 40, bottom: 100, right: 30 })
      Text("margin")
        .margin({ top: 100 })
        .margin({ top: 10, right: 50, bottom: 50, left: 10 })

      Text("backgroundcolor")
        .backgroundColor(Color.Blue)
        .backgroundColor('#ff38925c')

      Text("border")
        .borderWidth(5)
        .borderStyle(BorderStyle.Dotted)
        .borderRadius(200)
        .borderColor({ top: Color.Red })
        .borderWidth({ bottom: 1 })

      Button("click me")
        .onClick(() => {
          this.message = "hello"
          this.count++
        })
    }
  }
}

Width values behave as follows:

• width(0) — No visible element
• width(10) — Very narrow vertical line
• width(50) — Displays 'hello' in one line, centered
• width(100) — Starts slightly left of center
• width(400) — Partially off-screan
• width("100%") — Full-width container

Height effects:

• height(0) — Invisible
• height(10) — Only top portion visible
• height(20) — Fully visible
• height(x) — Spacing from top/bottom edges
• height("100%") — Occupies entire screen height

Percentage-based width affects layout of surrounding elements.

Example with minimal setup:

@Entry
@Component
struct Draft {
  @State message: string = 'Hello'
  @State count: number = 0
  build() {
    Column() {
      Text(`${this.message} ${this.count}`)
        .width(100)
    }
  }
}

When simplified, width(60) suffices for full visibility. Adding more parameters yields no change, unlike previous behavior. Also, alignment shifts from centered to aligned to the top.

Adding multiple elements changes layout behavior:

Column() {
  Text(`${this.message} ${this.count}`)
    .width(50)
  Text(this.message + `${this.count}`)
    .width("100%")
    .height(100)
}

The first text aligns centrally, while the second stretches across the full width. Removing the second text causes the first to align to the top.

Conclusion: A single element aligns to the top; multiple element are centered.

Padding and Margin

Image Component Properties

Required

• src: Image source, supports local and network images

Avoid cross-package or module usage; prefer $r for global image resources.

Attributes

alt             Placeholder displayed during loading, supports local images
objectFit       Scaling mode of the image
    ImageFit.Cover    Scale to fill container, may crop
    ImageFit.Contain  Scale to fit container, may leave blank space
    ImageFit.Fill     Stretch to fill, may distort
    ScaleDown         Shrink proportionally, never enlarge
    Auto              Adaptive display
    None              No scaling applied
objectRepeat    Repeat pattern of the image
    ImageRepeat.NoRepeat   No repetition
    ImageRepeat.X          Horizontal repeat
    ImageRepeat.Y          Vertical repeat
    ImageRepeat.XY         Both directions
interpolation   Smoothing effect for enlarged images
    Low, Medium, High
renderMode      Rendering mode of the image
    imageRenderMode.Original   Original rendering
    imageRenderMode.Template   Grayscale only
sourceSize      Cropping dimensions for decoding pixelMap
matchTextDirection  Follow system language direction
fitOriginalSize     Display at original size if not set
fillColor           Fill color for SVG images
autoResize          Resize image automatically
syncLoad            Synchronous loading
copyOption          Allow copying, not supported for SVG
colorFilter         Apply color filter to image

Events

onceComplete(({ width, height, componentWidth, componentHeight }) => {})
  Triggered when image loads successfully
onError({ componentWidth, componentHeight } => {})
  Triggered on image load failure
onFinish(() => {})
  Triggered when animated SVG finishes playback

Network Image Permissions

Justify Content

Setting width may be required to achieve proper spacing between elements.