qml + 主细节

Posted

技术标签:

【中文标题】qml + 主细节【英文标题】:qml + master-detail 【发布时间】:2012-11-30 08:52:54 【问题描述】:

我想使用带有主从界面的 qml,但我不知道如何正确地将当前项目传递给详细视图。主视图中的 ListView 使用 C++ 模型(QSQLTableModel 的附加组件,它工作正常),我看到了两种传递项目的方法:

    使用静态名称的字段创建 C++ 类,例如 QSqlRecord 字段名称,并使用 w->rootContext()->setContextProperty()(w 是 QDeclarativeView *)将其传递给 qml,但现在我不使用任何这样的类并且可以更改我的数据库和 qml 视图而不更改 c++ 代码,我想保存它

    在任何详细的 qml 中创建很多属性,例如

    Rectangle 
      id: mainRect
      property alias myFieldName: txt_nominal.text
      Column 
    
        width: parent.width
        Text 
            id: txt_nominal
            font.bold: true
        
      
    
    

并通过设置w->rootContext()->setContextProperty(record.fieldName(i),record.field(i).value());(记录 - 当前行的 QSqlRecort)从 c++ 代码设置此属性

有没有更简单的方法来解决我的问题?

PS 我上面写的代码没有检查准确性,是为了让我的意思更清楚

UPD

也许它对某人有用,我发现了第三种方式,而不是第二种方式的修改 - 你可以将字段包装到 QVariantMap 中并且只将一个对象传递给 qml。这正是我想要的

在 cpp 中:

QVariantMap testObject;
testObject["testField"]="first string from cpp";
testObject["testField2"]="second string from cpp";
rootContext()->setContextProperty("testObject",testObject);

在 qml 中:

Text 
        id: simpleTextt
        text: testObject.testField
        anchors.centerIn: parent
    

【问题讨论】:

您的 c++ 模型是否已经具有将在详细信息视图中显示的所有字段,或者您是否需要为详细信息视图执行一些额外的数据获取? 模型已经拥有所有字段并且我知道哪些字段具有当前模型(程序有一些表层次结构,任何表都有他自己的 qml 视图,此视图之间的转换描述为 c++ 代码)。 【参考方案1】:

您可以使用委托的 isCurrentItem 属性将数据从 ListView 委托传递到您的详细信息 qml。这样,您无需添加额外的 c++ 代码就可以逃脱。这基本上是您的第二种方法,但没有 c++。您也不需要添加许多属性,只要您要更改的每个 QML 元素都有一个 id

如果您有许多不同的 QML 用于不同的详细信息视图,您还必须使用加载器来加载适当的详细信息 QML。

只是一个玩具示例,假设列表中的所有元素只有一个详细信息模板(如上所述,如果不是这种情况,您可以使用 loader 代替 detailsRect):

Rectangle 
  width: 300; height: 400

  Rectangle 
    id: detailsRect
    anchors.right: parent.right
    width: 100
    height: 500
    color: "blue"
    Text 
      id: detailsText
      text: ""
    
  

ListView 
  id: list
  anchors.fill: parent
  model: 20

  delegate: Rectangle 
    color: ListView.isCurrentItem ? "red" : "green"
    width: 40
    height: 40

    Text 
        text: index
    

    ListView.onIsCurrentItemChanged: 
        if(ListView.isCurrentItem)
        
            detailsRect.color = "yellow"
            detailsText.text = index
        
    

    MouseArea 
        anchors.fill: parent
        onClicked: 
            list.currentIndex = index
        
    
  


【讨论】:

感谢您的帮助,但我决定使用我的第二种方法,但有一个例外 - 事实证明,如果声明了属性,setContentProperty 不能使用相同的名称,并且它可以在没有任何别名的情况下工作你写类似 text:MyFieldName

以上是关于qml + 主细节的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Ionic 中使用后端实现主细节模式?

主细节应用程序初始视图控制器更改

用于实现ReactUI.XamForms主细节页面的模式

[android] 手机卫士欢迎细节和主界面

uisplitviewcontroller:将选定的行从主传递到细节

React Native 动态 ListView 主细节