qml学习-------------Slider（滑块）

最新推荐文章于 2025-03-25 14:50:37 发布

我只是一只狗

最新推荐文章于 2025-03-25 14:50:37 发布

阅读量6k

点赞数

分类专栏： c++

本文链接：https://blog.csdn.net/u011619422/article/details/48653087

版权

c++ 专栏收录该内容

229 篇文章

订阅专栏

本文深入探讨了Qt QML中的Slider组件，讲解如何通过SliderStyle定制滑块的视觉样式，以实现独特且用户体验良好的界面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Slider跟其他的控件一样，可以通过SliderStyle来设置滑块的风格。

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle{

    width: 320;
    height: 240;
    color: "lightgray";

    Row{

        anchors.fill: parent;
        spacing: 20;
        Column{

            width: 200;
            spacing: 16;

            Text{
                id:sliderStat;
                color: "blue";
                text:"current - 0.1";


            }




            Slider{

                width: 200;
                height: 30;
                stepSize: 0.01;
                value: 1;
                onValueChanged: {
                    sliderStat.text = "current - " + value;
                }

            }


            Slider{

                width: 200;
                height: 30;
                minimumValue: 0;
                maximumValue: 100;
                stepSize: 1;
                value: 50;

                tickmarksEnabled: true;

            }


            Slider{

                id: customGrooveAndHandle;

                width: 200;
                height: 30;
                stepSize: 0.1;
                tickmarksEnabled: true;
                value:  0;

                style: SliderStyle{
                    groove: Rectangle{
                        implicitWidth:  200;
                        implicitHeight: 8;
                        color: "gray";
                        radius: 8;
                    }


                    handle: Rectangle{
                        anchors.centerIn: parent;
                        color:control.pressed ? "white":"lightgray";
                        border.color: "gray";
                        border.width: 2;
                        width: 34;
                        height: 34;
                        radius: 12;

                    }

                }


            }




            Slider{
                id: customPanel;
                width: 200;
                height: 36;
                stepSize: 0.1;
                value: 0;
                tickmarksEnabled: true;
                style: SliderStyle{


                    groove: Rectangle{
                        implicitWidth: 200;
                        implicitHeight: 8;
                        color: "gray";
                        radius: 8;

                    }


                    handle: Rectangle{
                        anchors.centerIn: parent;
                        color: control.pressed ? "white":"lightgray";
                        border.color: "gray";
                        border.width: 2;
                        width: 34;
                        height: 34;
                        radius: 12;

                        Text{

                            anchors.centerIn: parent;
                            text: control.value;
                            color: "red";
                        }

                    }


                    panel: Rectangle{

                        anchors.fill: parent;
                        radius: 4;
                        color: "lightsteelblue";

                        Loader{
                            id: grooveLoader;
                            anchors.centerIn: parent;
                            sourceComponent: groove;
                        }



                        Loader{

                            id: handleLoader;
                            anchors.verticalCenter: grooveLoader.verticalCenter;

                            x: Math.min(grooveLoader.x + (control.value * grooveLoader.width)/(control.maximumValue - control.minimumValue) , grooveLoader.width - item.width  );
                            sourceComponent: handle;

                        }


                    }


                }


            }




        }



        Slider{

            width: 30;
            height: 200;

            orientation: Qt.Vertical;
            stepSize: 0.1;
            value: 0.2;

            tickmarksEnabled: true;

        }


    }

}