How to use layoutWeight for child element size weighting in a container?

Read the original article：How to use layoutWeight for child element size weighting in a container?

Problem Description

How can I allocate the size of a child component in a parent container according to a certain proportion?

Background Knowledge

layoutWeight (value: number | string): Sets the layout weight of the component, so that the component size is allocated in the main axis direction of the parent container (Row/Column/Flex) based on the weight.

• When the size of the parent container is determined, the element that is not set with the layoutWeight attribute or whose effective value of the layoutWeight attribute is 0 is preferentially placed. The space left on the main axis after the element is placed is called the remaining space on the main axis. The child elements that are set with the layoutWeight attribute and whose effective value of the layoutWeight attribute is greater than 0 are allocated with the size from the remaining space on the main axis according to the weight ratio set for each element. During the allocation, the size setting of the element itself is ignored.
• This property is effective only in row, column, or flex layout.
• If the layoutWeight attribute is set to a value greater than 0 for a child element in the container, all child elements will not be arranged based on the flexShrink and flexGrow attributes.

Solution

The layoutWeight attribute is used to dynamically adjust the size ratio of child elements in a core container. This container is applicable to scenarios that require flexible layouts. The following uses Row and Column as examples to describe how to allocate layoutWeight in the horizontal and vertical directions.

• Row container: horizontal layout (from left to right). The layoutWeight attribute is used to set the proportion of the child element in the horizontal direction .

@Entry
@Component
struct BottomWithBar {
  build() {
    Column() {
      Row() {
        Row() {
          Text('Left side')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .height('100%')
        .backgroundColor('#F1F3F5')
        .layoutWeight(2); // Occupies 2/3 of the width
        Row() {
          Text('Right side.')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .height('100%')
        .backgroundColor('#E5E5EA')
        .layoutWeight(1); // Occupies 1/3 of the width
      };
    }
    .width('100%')
    .height('100%');
  }
}

• Column container: vertical layout (from top to bottom). The layoutWeight attribute is used to set the proportion of the child element in the vertical direction of .

@Entry
@Component
struct BottomWithBar2 {
  build() {
    Column() {
      Column() {
        Row() {
          Text('Top')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .width('100%') // Because it is a Column() component, the width is set so that it can be observed.
        .backgroundColor('#F1F3F5')
        .layoutWeight(1); // Occupying half of the height
        Row() {
          Text('Bottom part')
            .fontColor(Color.Black);
        }
        .justifyContent(FlexAlign.Center)
        .width('100%') // Because it is a Column() component, the width is set so that it can be observed.
        .backgroundColor('#E5E5EA')
        .layoutWeight(1); // Occupying half of the height
      };
    }
    .width('100%')
    .height('100%');
  }
}

Verification Result

Solution 1 effect:

Solution 2 effect:

FAQs

Q: How do I specify the distance between a component and the screen edge? For example, there are two child components in a Row container: a Text component on the left and a TextInput component on the right. The Text component on the left has a fixed width, while the TextInput component on the right has an adaptive width. The Text component should be 16 vp away from the left screen edge, and the TextInput component should be 16 vp away from the right screen edge.
A: Set the width of the Row component to the screen width, set the left and right internal padding to 16vp, set the Text component to a fixed width, and add the layoutWeight attribute to the TextInput component.
The sample code is as follows:

@Entry
@Component
struct Index3 {
  controller: TextInputController = new TextInputController();

  build() {
    Row({ space: 16 }) {
      Text('Example text.')
        .textAlign(TextAlign.Center)
        .backgroundColor('#F1F3F5')
        .borderRadius(20)
        .height(40)
        .width(80)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431');

      TextInput({ placeholder: 'input your word...', controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .layoutWeight(1);
    }
    .padding({ left: 16, right: 16 })
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center);
  };
}

Written by Bunyamin Akcay