【HarmonyOS 專題】07 簡單瞭解 ScrollView 滑動組件

    小菜在前面學習 Image 時當前屏幕展示不全，需要用到 ScrollView 滑動組件，小菜今天進一步學習一下；

ScrollView

    ScrollView 是一種可滑動的組件，可以通過滑動在有限的空間內展示更多的空間組件；ScrollView 繼承自 StackLayout；與 Android 使用方法一樣，在 ScrollView 使用時，內部僅支持一個元素，即需要將滑動展示的元素放在一個 Layout 佈局內；

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="center"
        ohos:orientation="vertical">

        <Image
            ohos:height="300vp"
            ohos:width="300vp"
            ohos:background_element="$color:color_btn_start"
            ohos:image_src="$media:icon_hzw01"
            ohos:margin="10vp"
            ohos:scale_mode="inside"/>

        <Image
            ohos:height="300vp"
            ohos:width="300vp"
            ohos:background_element="$color:color_btn_start"
            ohos:image_src="$media:icon_hzw02"
            ohos:margin="10vp"
            ohos:scale_mode="inside"/>

        <Image
            ohos:height="300vp"
            ohos:width="300vp"
            ohos:background_element="$color:color_btn_start"
            ohos:image_src="$media:icon_hzw03"
            ohos:margin="10vp"
            ohos:scale_mode="inside"/>
    </DirectionalLayout>
</ScrollView>

1. orientation 滑動方向

    ScrollView 與 Android 中滑動組件不同，並沒有設置滑動方向的屬性，但是可以通過 ScrollView 內部的 Layout 設置水平滑動或豎直滑動；注意，當設置水平滑動時，內部的 Layout 寬度儘量不要使用 match_parent 影響滑動觸發；

<ScrollView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="#FFDEAD"
    ohos:padding="10vp">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="horizontal"
        >
        ...
    </DirectionalLayout>
</ScrollView>

2. rebound_effect 回彈效果

    ScrollView 可以通過 rebound_effect 屬性設置回彈效果，常用於自定義滑動列表；

<ScrollView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="#FFDEAD"
    ohos:rebound_effect="true">

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="vertical"
        >
        ...
    </DirectionalLayout>
</ScrollView>

3. fluentScrollByX/Y 設置滑動距離

    ScrollView 可以通過 fluentScrollBy 方式設置滑動距離，單位是 px；小菜測試每次點擊按鈕，ScrollView 向下滑動 300px；

ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_test_scroll);
Button button = (Button) findComponentById(ResourceTable.Id_test_scroll_btn);
button.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        scrollView.fluentScrollByY(300);
    }
});

4. fluentScrollYTo 設置固定滑動點

    fluentScrollYTo / fluentScrollXTo 爲設置固定的滑動點，單位是 px，fluentScrollByX/Y 是每次都會累加，而 fluentScrollYTo 只是一個固定的點位；

Button button2 = (Button) findComponentById(ResourceTable.Id_test_scroll_btn2);
button2.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        scrollView.fluentScrollYTo(500);
    }
});

5. doFling 設置滑動速度

    ScrollView 還提供了 doFling 等多種設置滑動速度的方式，單位爲 px；

Button button3 = (Button) findComponentById(ResourceTable.Id_test_scroll_btn2);
button3.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        scrollView.doFling(500);
    }
});

    小菜對 ScrollView 高級的自定義方式還不夠深入，後期會在自定義滑動列表組件時嘗試更多回彈效果和速率方面的屬性；如有錯誤，請多多指導！

來源： 阿策小和尚