0

我正在尝试在 QML 中制作可滚动列表。

虽然它运行成功，但每当改变主窗口的大小时，列表的模式就会扭曲或项目相互重叠。

任何建议我的代码中的错误在哪里。

试图改变锚点，但在这个问题上也没有运气。

下面是代码片段

import QtQuick 1.1

Item{
    ....

    Rectangle{
        ....

        Rectangle {
        ....
            color: "white"
            anchors.centerIn: main.Center

            Rectangle {
                ...

                ListView {
                    id: list_min
                    ....

                    snapMode: ListView.SnapToItem
                    model: 20
                    delegate: Rectangle{
                        width: list_min.width
                        height: list_min.height
                        color: "transparent"

                        Text {
                            anchors.verticalCenter: parent.verticalCenter
                            text: index+1
                            font.pixelSize: parent.width/1.5
                        }

                        Text {
                            text: index+2
                            font.pixelSize: parent.width/1.5
                            anchors.top: parent.top
                            anchors.topMargin: 150
                        }

                        Text {
                            text: index
                            font.pixelSize: parent.width/1.5
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 150
                        }
                    }

                    onMovementEnded: list_min.currentIndex = list_min.visibleArea.yPosition * list_min.count

                    Component.onCompleted: list_min.visibleArea
                }

                Rectangle {
                  ....
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "black" }
                        ....
                        GradientStop { position: 1.0; color: "black" }
                    }
                }
            }
        }
4

1 回答 1

1

我建议使用 Column 标记将文本元素放置在委托中。同样对于overlay_min，您需要设置高度和宽度或anchors.fill，而不是两者。

我修改了源代码如下：

import QtQuick 1.1

Item{
    width: 300
    height: 240

    Rectangle{
    id:main
    width: parent.width
    height: parent.height

    Rectangle {
        id :frame_min
        width: 120
        height: main.height
        color: "white"
        anchors.centerIn: main.Center

        Rectangle {
            id: mSpinner
            anchors.centerIn: parent
            width: frame_min.width - 10
            height: frame_min.height
            color: "white"
            border.color: "black"
            border.width: 5

            ListView {
                id: list_min
                width: mSpinner.width
                height: mSpinner.height
                anchors.topMargin: 0
                anchors.top: parent.top
                clip: true

                snapMode: ListView.SnapToItem
                model: 20
                delegate: Rectangle{
                    width: list_min.width
                    height: list_min.height
                    color: "transparent"

                    Column{
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            //anchors.verticalCenter: parent.verticalCenter
                            text: index+1
                            font.pixelSize: list_min.width/1.5
                        }

                        Text {
                            text: index+2
                            font.pixelSize: list_min.width/1.5
                            //anchors.top: parent.top
                            //anchors.topMargin: 150
                        }

                        Text {
                            text: index
                            font.pixelSize: list_min.width/1.5
                            //anchors.bottom: parent.bottom
                            //anchors.bottomMargin: 150
                        }
                    }
                }

                onMovementEnded: list_min.currentIndex = list_min.visibleArea.yPosition * list_min.count

                Component.onCompleted: list_min.visibleArea
            }

            Rectangle {
                id: overlay_min
                width: frame_min.width
                height: frame_min.height
                //anchors.fill: frame_min
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "black" }
                    GradientStop { position: 0.34; color: "transparent" }
                    GradientStop { position: 0.35; color: "white" }
                    GradientStop { position: 0.66; color: "transparent" }
                    GradientStop { position: 1.0; color: "black" }
                }
            }
        }
    }
    }
}
于 2012-11-19T14:34:13.990 回答