How to Control Maximum Display Lines in TextArea and Show Scrollbar When Exceeded

#harmonyos #textareacomponent #arkts #lineheight

Read the original article：How to Control Maximum Display Lines in TextArea and Show Scrollbar When Exceeded

Context

This section explains how to configure a TextArea component to display a single line by default, limit the maximum display to four lines, and show a scrollbar when the content exceeds the specified dimensions.

Description

How to use TextArea to achieve a text input effect that displays one line by default, shows up to four lines maximum, and displays a scrollbar when the size is exceeded?

TextArea: A multi-line text input component that automatically wraps text when the input content exceeds the component width.
lineSpacing: Sets the line spacing of the text. When LineSpacingOptionsis not configured, there will be default line spacing above the first line and below the last line.
lineHeight: Sets the line height of the text. When the value is less than or equal to 0, there is no limit to the text line height, and it adapts to the font size.

Solution

The number of text lines that a TextArea can accommodate can be calculated based on its height and lineHeight. When the total height of the text exceeds the height of the TextArea, a scrollbar will be displayed. Calculate the relationship between text line height and text box height according to the formula. The code is as follows:

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

@Component
export default struct TextAreaDemo {
  @State text: string = '';
  @State num: number = 4;
  @State lineHeight: number = 40;
  @State areaHeight: number = 160;
  @State lineSpacing: number = 10;

  aboutToAppear(): void {
    this.areaHeight = this.lineHeight * this.num + (this.num - 1) * this.lineSpacing;
  }

  controller: TextAreaController = new TextAreaController();

  build() {
    Column({ space: 20 }) {
      TextArea({
        text: this.text,
        placeholder: 'placeholder',
        controller: this.controller
      })
        .placeholderFont({ size: 16, weight: 400 })
        .width('80%')
        .height(this.areaHeight)
        .lineHeight(this.lineHeight)
        .fontSize(30)
        .lineSpacing(LengthMetrics.px(this.lineSpacing))
        .fontColor($r('sys.color.font_primary'))
        .backgroundColor($r('sys.color.comp_background_list_card'))
        .onChange((value: string) => {
          this.text = value;
        })
    }
    .margin({ top: 20 })
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

The effect diagram is as follows:

Code Running Effect Diagram:

Due to the default spacing between texts that cannot be eliminated, the height of the TextAreaneeds to be slightly more than four times the fontSizeto display exactly four lines. lineHeightcontrols the height of each line of text, and this value must be greater than or equal to fontSize. Otherwise, text overlap will occur. The default value of lineSpacingis 0. If the lineSpacing value is set, this value must also be taken into account in the calculation.

Constraints and Limitations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1.1 Release SDK and above.

This example requires DevEco Studio 5.1.1 Release or above for compilation and execution.

Key Takeaways

TextArea height must account for default text spacing to accurately display a specific number of lines
lineHeight should be set to a value greater than or equal to fontSize to prevent text overlap
lineSpacing value needs to be included in calculations when set
Scrollbar appears automatically when text content exceeds TextArea dimensions