QML滑块调整矩形

Posted 2023-02-16

【中文标题】QML滑块调整矩形

【英文标题】：QML Slider adjusting rectangle

【发布时间】：2019-05-29 12:35:57

【问题描述】：

我在这里有几个问题，因为我是 qml 的新手。我有一个简单的界面，我希望滑块调整矩形的大小（最终将是一个 svg 图标）。图片下方的问题：

调整滑块时，它会正确更改蓝色矩形的大小，但是我怎样才能使其正确地自动调整绿色边界矩形的大小以包含它？它应该类似于下图。目前缩略图超出了绿色矩形的范围。如果有帮助，组合框的静态宽度可以为 150。

如何使蓝色矩形始终垂直居中对齐？它似乎总是固定在左上角。

QML

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ColumnLayout 
    anchors.fill: parent

    Flow 
        Layout.fillWidth: true
        spacing: 10

        Repeater 
            model: 5

            Rectangle 
                id: delegateBackground
                width: 200;
                height: contentContainer.height + 10
                border.width: 1
                color: "lightgreen"

                Item 
                    id: contentContainer
                    width: parent.width - 10
                    height: rowContainer.height
                    anchors.centerIn: delegateBackground

                    RowLayout 
                        id: rowContainer
                        width: parent.width

                        Rectangle 
                            id: icon
                            width: thumbnailsize.value
                            height: thumbnailsize.value
                            color: "steelblue"
                            Layout.alignment: Qt.AlignCenter
                        

                        ComboBox 
                            id: selector
                            Layout.fillWidth: true
                            model: [ "Banana", "Apple", "Coconut" ]
                            Layout.alignment: Qt.AlignCenter
                        
                    
                
            
        
    

    Slider 
        id: thumbnailsize
        from: 16
        value: 48
        to: 64
    

【参考方案1】：

首先你不能在布局中使用属性“width”和“height”，所以你需要使用“Layout.preferredWidth”和“Layout.preferredHeight”。 因此您需要在代码中进行以下更改：-

// ...
// ...

    Rectangle 
                id: icon

                Layout.preferredWidth: thumbnailsize.value
                Layout.preferredHeight: thumbnailsize.value
                // #### You can use width and height inside Layouts
    //          width: thumbnailsize.value
    //          height: thumbnailsize.value
                color: "steelblue"
                Layout.alignment: Qt.AlignCenter
              

// ...
// ..

我猜你甚至会在将滑块移动到最大值时遇到问题，蓝色矩形移出其父级，即浅绿色矩形。

（下图）

滑块最大值错误

因此，如果您按照上述说明进行更改，此问题也将得到解决。

进行更改后，以下是示例输出：-

最小值：-

最小值

最大值：-

最大值

【参考方案2】：

这是你想要的吗：

QML 代码：

ColumnLayout 
    anchors.fill: parent

    Flow 
        Layout.fillWidth: true
        spacing: 10

        Repeater 
            model: 5

            Rectangle 
                id: delegateBackground
                width: 200;
                height: contentContainer.height + 10
                border.width: 1
                color: "lightgreen"

                Item 
                    id: contentContainer
                    width: parent.width - 10
                    height: rowContainer.height
                    anchors.centerIn: delegateBackground

                    RowLayout 
                        id: rowContainer
                        anchors.centerIn: contentContainer
                        height: Math.max(iconContainer.height, selector.height)

                        Item
                            id: iconContainer
                            width: contentContainer.width - selector.width
                            height: parent.height

                            Rectangle 
                                id: icon
                                width: thumbnailsize.value + selector.width > contentContainer.width ? contentContainer.width - selector.width : thumbnailsize.value
                                height: width
                                color: "steelblue"
                                anchors.centerIn: parent
                            
                        

                        ComboBox 
                            id: selector
                            Layout.fillWidth: true
                            model: [ "Banana", "Apple", "Coconut" ]
                            Layout.alignment: Qt.AlignCenter
                        
                    
                
            
        
    

    Slider 
        id: thumbnailsize
        from: 16
        value: 48
        to: 64