ScrollBar

Note:

Currently in the beta phase.

The ScrollBar component is used in conjunction with scrollable components such as List, Grid, and Scroll.

Note:

When the main axis size of ScrollBar is not specified, it adopts the maxSize from the parent component's layout constraints. If the parent component of ScrollBar contains a scrollable component (e.g., List, Grid, Scroll), it is recommended to set the main axis size of ScrollBar; otherwise, the main axis size of ScrollBar may become infinite.

Import Module

import kit.ArkUI.*

Child Components

Can contain a single child component.

Creating the Component

init(?Scroller, ?ScrollBarDirection, ?BarState, () -> Unit)

public init(
    scroller!: ?Scroller,
    direction!: ?ScrollBarDirection = None,
    state!: ?BarState = None,
    child!: () -> Unit
)

Functionality: Creates a scrollbar component.

Note:

• The ScrollBar component is responsible for defining the behavior and style of the scrollable area, while the child nodes of the ScrollBar are responsible for defining the behavior and style of the scroll bar.
• The scrollbar component is bound to the scrollable component through the Scroller, and they can only be linked when their directions are the same. ScrollBar and scrollable components only support one-to-one binding.
• When the ScrollBar component has no child nodes, it supports displaying a scroll bar with the default style.
• The visibility of the ScrollBar component is controlled by BarState. The component internally adjusts opacity to control visibility based on the BarState setting. Therefore, setting the opacity attribute for the ScrollBar component does not take effect.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since Version: 22

Parameters:

Parameter	Type	Required	Default Value	Description
scroller	?Scroller	Yes	-	Named parameter. The controller of the scrollable component. Used to bind with the scrollable component.
direction	?ScrollBarDirection	No	None	Named parameter. The direction of the scrollbar, controlling the scrolling of the corresponding direction in the scrollable component. Initial value: ScrollBarDirection.Vertical.
state	?BarState	No	None	Named parameter. The state of the scrollbar. Initial value: BarState.Auto.
child	() -> Unit	Yes	-	Named parameter. The child component within the container.

Common Attributes/Common Events

Common Attributes: All supported
Common Events: All supported

Example Code

Example 1 (With Child Component)

This example demonstrates the scrollbar style when the ScrollBar component has a child component.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
import std.collection.ArrayList

@Entry
@Component
class EntryView {
    var arr: ArrayList<Int64> = ArrayList<Int64>([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])
    let scroller = Scroller()
    func build() {
        Column() {
            Stack(alignContent: Alignment.End) {
                Scroll(this.scroller) {
                    Flex(direction: FlexDirection.Column, alignItems: ItemAlign.Start) {
                        ForEach(this.arr, itemGeneratorFunc: { item: Int64, idx: Int64 =>
                            Row() {
                                Text(item.toString())
                                .width(80.percent)
                                .height(60)
                                .backgroundColor(0x3366CC)
                                .borderRadius(15)
                                .fontSize(16)
                                .textAlign(TextAlign.Center)
                                .margin(top: 5)
                            }
                        })
                    }
                    .margin(right: 15)
                }
                .width(90.percent)
                .scrollBar(BarState.Off)
                .scrollable(ScrollDirection.Vertical)
                ScrollBar(scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto) {
                    Text("")
                    .width(20)
                    .height(100)
                    .borderRadius(10)
                    .backgroundColor(0xC0C0C0)
                }
                .width(20)
                .backgroundColor(0xededed)
            }
        }
    }
}

Example 2 (Without Child Component)

This example demonstrates the scrollbar style when the ScrollBar component has no child component.

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*
import std.collection.ArrayList

@Entry
@Component
class EntryView {
    var arr: ArrayList<Int64> = ArrayList<Int64>([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])
    let scroller = Scroller()
    func build() {
        Column() {
            Stack(alignContent: Alignment.End) {
                Scroll(this.scroller) {
                    Flex(direction: FlexDirection.Column, alignItems: ItemAlign.Start) {
                        ForEach(
                            this.arr,
                            itemGeneratorFunc: {
                                item: Int64, idx: Int64 => Row() {
                                    Text(item.toString()).width(80.percent).height(60).backgroundColor(0x3366CC).
                                        borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin(top: 5)
                                }
                            }
                        )
                    }.margin(right: 15)
                }.width(90.percent).scrollBar(BarState.Off).scrollable(ScrollDirection.Vertical)
                ScrollBar(scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto) {}
            }
        }
    }
}