Question

根据文件

如果行中的某个项目不可见，或者它的宽度或高度 0，该项目将不会被布局，并且在其中将不可见排。此外，由于一行自动定位其子在水平方向上，行内的子项不应设置其x位置或使用左，右，水平锚定自己， anchors.horizontalCenter，fill或centerIn anchors。如果你需要执行这些操作，考虑在不使用的情况下定位项目一排。

我无法找到最佳解决方案。在这方面有人能帮助我吗？请参阅下面的代码：

Rectangle{
    width: parent.width
    height: parent.height
    Component{
        id:itemDelegate
        Item {
            id: itemId
            width: listView.width; height: listView.height * 0.20
            Row{
                spacing : listView.height * 0.20
                Repeater{
                    model:5
                    Column{
                        Button{
                            text: index
                            //opacity: (index % 2) === 0 ? 1.0:0.0
                            visible: (index % 2) === 0 ? true:false
                        }
                        Button{
                            text: index
                            //opacity: (index % 3) === 0 ? 1.0:0.0
                            visible: (index % 3) === 0 ? true:false
                        }
                    }
                }
            }
        }
    }

    ListView{
        id:listView
        anchors.fill: parent
        anchors {
            left: parent.left; top: parent.top;
            right: parent.right
            margins: parent.width * 0.08
        }
        delegate: itemDelegate
        model:aaModel
        clip:true
    }
}

在输出中，第一个索引列将不可见。因此它不会被布局，第二个索引列将占据该空间。但我想要那里的空白。但是，我可以在第三个索引列（第一个空格后跟一个按钮）中以空白空间为代价使用不透明度。但是如果按钮在侧面不可见，如果Column中的所有按钮都不可见，那么我希望这样的行为能够在列中提升按钮，空白区域应该出现在Column的位置。所以这里的行内的列不会帮助我。做这个的最好方式是什么？

Answer 1

在Item

中包含按钮

Column {
    Button {
        text: 'Blue'
    }
    Item {
        width: greenButton.implicitWidth
        height: greenButton.implicitHeight
        Button {
            id: greenButton
            visible: false
            text: 'Green'
        }
    }
    Button {
        text: 'red'
    }
}

为了更容易，为它创建一个自定义组件（例如MyButton.qml ）：

import QtQuick 2.0
import QtQuick.Controls 2.0

Item {
    id: root
    property alias button: myButton
    implicitHeight: button.height
    implicitWidth: button.width
    Button {
        id: myButton
    }
}

像这样使用：

Column {
    MyButton {
        button {
            text: 'green'
            onClicked: button.visible = false // Won't shrink the column
        }
    }
    MyButton {
        button {
            text: 'red'
            visible: false
        }
    }
    MyButton {
        button {
            text: 'orange'
            onClicked: visible = false // Will shrink the column
        }
    }
}

如果行中的某个项目不可见，如何将其展开？

1 个答案: