Question

我想弄清楚这一段时间，我被卡住了。所以我有一些简单的ListView扩展委托和一个工具栏，上面有“后退”按钮。我想要的是能够将onClick动作从按钮重定向到当前展开的元素（主要是为了折叠它）。

在我清理它之后我会发布一些代码，但是现在必须是它（不是工作示例）：

Rectangle {
    id: main
    Toolbar {
        id: myTolbar
        Button{ id: backButton }
    }
    ListModel {
        id: myDelegate
        ListElement { option: "OptionA" }
        /// .... etc.
    }

    ListView {
        id: myList
        model: dataModel
        delegate: myDelegate
    }
    Component {
        id: myDelegate
        Text{ text: option }
        states: State{
            name: 'details'
            PropertyChanges { } //some property magic
        }

        MouseArea {
            onClick: state='details'
            //!!!! here I need some help - how to "tell" backButton 
            //to change state of currently shown item back to default state ('')
        }
    }
}

Answer 1

这是一个可行的解决方案

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.symbian 1.1  // For ToolBar and ToolButton; Replace with whatever you want

Rectangle {
    id: main
    property int curSelectedIndex: -1

    ToolBar {
        id: myTolbar
        anchors.top: parent.top
        ToolButton {
            id: backButton
            text: "Back"
            onClicked: {
                if (main.curSelectedIndex != -1) {
                    dataModel.setProperty(main.curSelectedIndex, "selected", false)
                    main.curSelectedIndex = -1
                }
            }
        }
    }
    ListModel {
        id: dataModel
        ListElement { option: "OptionA"; selected: false }
        ListElement { option: "OptionB"; selected: false }
        ListElement { option: "OptionC"; selected: false }
        /// .... etc.
    }

    ListView {
        id: myList
        anchors {top: myTolbar.bottom; bottom: parent.bottom; right: parent.right; left: parent.left }
        model: dataModel
        delegate: myDelegate
    }
    Component {
        id: myDelegate
        Item {
            height: txOption.height
            width: myList.width
            Text {
                id: txOption
                font.pointSize: 15
                text: option
            }
            states: [
                State {
                    name: 'details'; when: model.selected
                    PropertyChanges {target: txOption; color: "red" } //some property magic
                }
            ]

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.debug(index + " selected")
                    if (main.curSelectedIndex != -1)
                        dataModel.setProperty(main.curSelectedIndex, "selected", false)
                    main.curSelectedIndex = index
                    dataModel.setProperty(index, "selected", true)
                }
            }
        }
    }
}

QML：带有“后退”按钮的ListView和工具栏

1 个答案: