用Flickable和ScrollBar显示滚动条

import QtQuick 2.0
import QtQuick.Controls 2.15
Rectangle{
color: “red”
Flickable {
anchors.fill: parent
contentHeight: parent.height*2
contentWidth: parent.width
clip: true
boundsBehavior:Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {
anchors.top: parent.top
anchors.topMargin: -1
anchors.right: parent.right
width: 30
height:parent.height
background: Rectangle {
color: “red”
}
contentItem: Rectangle {
implicitWidth: 10;
implicitHeight: 10;
color: “blue”
}
}
}
}

在这里插入图片描述

iimport QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ScrollView
    {
        anchors.fill: parent
        style:ScrollViewStyle{
            handle: Rectangle {
                implicitWidth: 50
                implicitHeight: 30
                color: "red"
            }
            scrollBarBackground: Rectangle {
                implicitWidth: 50
                implicitHeight: 30
                color: "black"
            }
            decrementControl: Rectangle {
                implicitWidth: 50
                implicitHeight: 30
                color: "green"
            }
            incrementControl: Rectangle {
                implicitWidth: 50
                implicitHeight: 30
                color: "blue"
            }
        }

        ListView{
            anchors.fill: parent
            delegate: Rectangle
            {
                width: parent.width-14
                height: innerText.contentHeight+20
                color: (index%2 === 0) ? "#252525" :"#000000"
                Text
                {
                    id: innerText
                    anchors.fill: parent
                    verticalAlignment: Text.AlignVCenter
                    text: "name: " + modelData.name + "age: " + modelData.age
                    wrapMode: Text.WrapAnywhere
                    font.pixelSize: 14
                    color: "#ffffff"
                }
            }
            model:[
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"lilei","age":"20"},
                {"name":"hanmeimei","age":"15"},
                {"name":"wangbin","age":"22"}]
        }
    }
}

在这里插入图片描述
待解决:切换页面的时候滑条位置会回到顶部

猜你喜欢

转载自blog.csdn.net/caicai_xiaobai/article/details/117527821
今日推荐