DEV Community

Cover image for HarmonyOS Development: Understanding the Split Line
程序员一鸣
程序员一鸣

Posted on

HarmonyOS Development: Understanding the Split Line

Foreword

this article is based on Api13

there are many scenes of dividing lines, especially in the list. If you open an application casually, you can find the footprint of the dividing line. Although the dividing line is very useful, how to use the dividing line correctly in actual development is the problem we want to talk about.

For example, a simple list, how should the dividing line be drawn?

Image description

I'm sure many people will think that using the divider attribute divider included in the list can quickly implement a dividing line. The code is as follows:

Column() {
      List() {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height(50)
              .textAlign(TextAlign.Center)
          }
        })
      }
      .divider({
        color: Color.Gray,
        strokeWidth: 1,
      })
    }
    .height('100%')
    .width('100%')
Enter fullscreen mode Exit fullscreen mode

effect after running:

Image description

what if my dividing line is not a regular line? For example, it is a picture, for example, it is a dotted line, for example, at the end of the entry, I also want to divide the line? Obviously, using the divider attribute that comes with the list cannot be satisfied.

border style border

each component has a common property border, it can be very convenient to use it to achieve a border style, you can set the border thickness, color, rounded corners and other properties.

For example, set a border with a border of 1 and a gray color:

 Column() {

      }.width("100%")
      .height(50)
      .border({ width: 1, color: Color.Gray })
Enter fullscreen mode Exit fullscreen mode

the effect is as follows:

Image description

for example, add a fillet degree:

 Column() {

      }.width("100%")
      .height(50)
      .border({ width: 1, color: Color.Gray, radius: 10 })
Enter fullscreen mode Exit fullscreen mode

the effect is as follows:

Image description

of course, you can also set other types, such as dotted lines:

 Column() {

      }.width("100%")
      .height(50)
      .border({ width: 1, color: Color.Gray, radius: 10,style:BorderStyle.Dashed})
Enter fullscreen mode Exit fullscreen mode

let's look at the effect:

Image description

generally, the dividing line is set. At the bottom, we can directly set the dividing line at the bottom for the components of the item:

List() {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height(50)
              .textAlign(TextAlign.Center)
              .border({ width: { bottom: 1 }, color: Color.Gray })
          }
        })
      }
Enter fullscreen mode Exit fullscreen mode

As you can see, the effect is the same as the split line attribute that comes with the component, and the last entry is perfectly filled.

Image description

Split Line Assembly Divider

if you don't say, it's still Hongmeng. It also provides a component for a dividing line. This is for fear that developers won't draw it. This component is basically the same as other components, but only one function is to show the dividing line.

Divider()
        .strokeWidth(10)
        .color(Color.Gray)
Enter fullscreen mode Exit fullscreen mode
Property type overview
strokeWidth number /string set the width of the split line
color ResourceColor set the color of the split line
vertical boolean sets the direction of the split line, whether to use horizontal or vertical split lines.false: horizontal dividing line; true: vertical dividing line.
lineCap LineCapStyle to set the endpoint style of a split line

in the above case, we set the dividing line with the Divider component:

List() {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Column() {
              Text(item)
                .width("100%")
                .height(50)
                .textAlign(TextAlign.Center)
              Divider()
                .strokeWidth(10)
                .color(Color.Gray)
            }
          }
        })
      }
Enter fullscreen mode Exit fullscreen mode

let's look at the final effect:

Image description

related Summary

In actual development, if the self-contained dividing line can meet our needs, it is mainly based on its own dividing line attributes. If not, we can use components to draw.

Generally speaking, the Divider component is rarely used in the list. Generally, a dividing line is required in the fixed UI, which can be used at this time.

Top comments (0)