qt qml如何创建包含图标和描述的列表视图供稿项?

时间:2017-05-04 05:45:57

标签: qt listview qml

我创建了一个例子。当我尝试水平调整窗口大小时,我不知道为什么会出现崩溃。只有当iconVisible为真时才会发生崩溃

这里是来自main的qml代码,将其粘贴在hello world qt quick controls 2项目中进行测试:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.XmlListModel 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Page {
        anchors.fill: parent
        XmlListModel{
            id : modelId
            namespaceDeclarations: "declare namespace media = 'http://search.yahoo.com/mrss/';"
            source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags="
            query: "//item[title and media:thumbnail and media:content]"
        }

        ListView {
            anchors.fill: parent
            model: modelId
            Layout.fillWidth: true
            delegate:  itemDelegateId
            ScrollBar.vertical: ScrollBar {}
        }

        Component {
            id: itemDelegateId


            Rectangle {
                property bool iconVisible: true
                property string contentText: "contentaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

                property double itemHeight: 100
                property int titleTextSize: 32
                property int columnLayoutLeftMargin: (iconVisible)? 20 : 0
                property string borderColor: "black"
                property int iconSize: (iconVisible)? 40 : 0

                height : itemHeight
                anchors {
                    left: parent.left
                    right: parent.right
                }
                border.color: borderColor
                border.width: 1

                RowLayout {
                    anchors {
                        fill: parent
                    }

                    Rectangle {
                        id: notificationIconId
                        visible: iconVisible
                        anchors {
                            top: parent.top
                        }
                        height: iconSize
                        width: iconSize
                        Image {
                            anchors.fill: parent
                            fillMode: Image.PreserveAspectFit
                        }
                    }

                    ColumnLayout {
                        id: columnLayoutId
                        anchors {
                            top: parent.top
                            bottom: parent.bottom
                            left: notificationIconId.right
                            right: parent.right
                        }

                        Text {
                            id: contentId
                            anchors {
                                top: parent.top
                                bottom: parent.bottom
                            }
                            Layout.fillWidth: true
                            font.pixelSize: 20
                            elide: Text.ElideRight
                            maximumLineCount: 3
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            color: "black"
                            text: contentText
                        }
                    }
                }
            }
        }
    }
}

1 个答案:

答案 0 :(得分:2)

这里有一些问题。第一个是Page无效,因为 ListView { anchors.fill: parent model: modelId Layout.fillWidth: true // remove delegate: itemDelegateId ScrollBar.vertical: ScrollBar {} } 不是布局:

width

第二,您不应为布局中的项目指定height Rectangle { id: notificationIconId visible: iconVisible anchors { top: parent.top } height: iconSize // Should be Layout.preferredHeight: iconSize width: iconSize // Should be Layout.preferredWidth: iconSize Image { anchors.fill: parent fillMode: Image.PreserveAspectFit } }

                ColumnLayout {
                    id: columnLayoutId
                    anchors {
                        top: parent.top
                        bottom: parent.bottom
                        // This ColumnLayout is managed by a RowLayout, so these two lines have to go
                        left: notificationIconId.right
                        right: parent.right
                    }
                }

您不能在由水平布局管理的项目上使用水平锚点:

Text

Text { id: contentId // Can't use vertical anchors on an item that is managed by a ColumnLayout anchors { top: parent.top bottom: parent.bottom } Layout.fillWidth: true font.pixelSize: 20 elide: Text.ElideRight maximumLineCount: 3 wrapMode: Text.WrapAtWordBoundaryOrAnywhere color: "black" text: contentText } 项目的相同内容:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.XmlListModel 2.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Page {
        anchors.fill: parent
        XmlListModel{
            id : modelId
            namespaceDeclarations: "declare namespace media = 'http://search.yahoo.com/mrss/';"
            source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags="
            query: "//item[title and media:thumbnail and media:content]"
        }

        ListView {
            anchors.fill: parent
            model: modelId
            delegate:  itemDelegateId
            ScrollBar.vertical: ScrollBar {}
        }

        Component {
            id: itemDelegateId


            Rectangle {
                property bool iconVisible: true
                property string contentText: "contentaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

                property double itemHeight: 100
                property int titleTextSize: 32
                property int columnLayoutLeftMargin: (iconVisible)? 20 : 0
                property string borderColor: "black"
                property int iconSize: (iconVisible)? 40 : 0

                height : itemHeight
                anchors {
                    left: parent.left
                    right: parent.right
                }
                border.color: borderColor
                border.width: 1

                RowLayout {
                    anchors {
                        fill: parent
                    }

                    Rectangle {
                        id: notificationIconId
                        visible: iconVisible
                        anchors {
                            top: parent.top
                        }
                        Layout.preferredHeight: iconSize
                        Layout.preferredWidth: iconSize
                        Image {
                            anchors.fill: parent
                            fillMode: Image.PreserveAspectFit
                        }
                    }

                    ColumnLayout {
                        id: columnLayoutId
                        anchors {
                            top: parent.top
                            bottom: parent.bottom
                        }

                        Text {
                            id: contentId
                            Layout.fillWidth: true
                            font.pixelSize: 20
                            elide: Text.ElideRight
                            maximumLineCount: 3
                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            color: "black"
                            text: contentText
                        }
                    }
                }
            }
        }
    }
}

修复所有这些问题后,它似乎按预期工作:

input {
  beats {
    port => 5044

codec => multiline {
      # Grok pattern names are valid! :)
      pattern => "^%{TIMESTAMP_ISO8601} "
      negate => true
      what => previous
    }
    }
}

filter {

if [type] == "nginx-access" {
        grok {
        match => [ "message" , "%{COMBINEDAPACHELOG}+%{GREEDYDATA:extra_fields}"]
        overwrite => [ "message" ]
        }

        mutate {
                convert => ["response", "integer"]
                convert => ["bytes", "integer"]
                convert => ["responsetime", "float"]
        }

        geoip {
                source => "clientip"
                target => "geoip"
                add_tag => [ "nginx-geoip" ]
        }

        date {
                match => [ "timestamp" , "dd/MMM/YYYY:HH:mm:ss Z" ]
                remove_field => [ "timestamp" ]
        }

        useragent { 
                source => "agent"
        }

}  else if [type] == "nginx-error" { 
        grok {
        match => [ "message" , "(?<timestamp>%{YEAR}[./-]%{MONTHNUM}[./-]%{MONTHDAY}[- ]%{TIME}) \[%{LOGLEVEL:severity}\] %{POSINT:pid}#%{NUMBER}: %{GREEDYDATA:errormessage}(?:, client: (?<client>%{IP}|%{HOSTNAME}))(?:, server: %{IPORHOST:server})(?:, request: %{QS:request})?(?:, upstream: \"%{URI:upstream}\")?(?:, host: %{QS:host})?(?:, referrer: \"%{URI:referrer}\")"] 
        overwrite => [ "message" ]
        }

geoip {
                source => "client"
                target => "geoip"
                add_tag => [ "nginx-geoip" ]
        }

        date {
                match => [ "timestamp" , "YYYY/MM/dd HH:mm:ss" ]
                remove_field => [ "timestamp" ]
        }

} else {

  mutate {
    gsub => ["message", "\n", " "]
  }
  grok {
    match => [ "message", "%{TIMESTAMP_ISO8601:timestamp} \[%{NOTSPACE:uid}\] \[%{NOTSPACE:thread}\] %{LOGLEVEL:loglevel} %{DATA:class}\-%{GREEDYDATA:message}" ]
    overwrite => [ "message" ]
  }
  date {
    match => [ "timestamp" , "yyyy-MM-dd HH:mm:ss" ]
    target => "@timestamp"
  }
  if "_grokparsefailure" in [tags] {
            drop { }
  }
}
}

output {

stdout { codec => rubydebug }
if [type] == "nginx-access" {
  elasticsearch { hosts => localhost }
  index => "nginx-access-%{+YYYY.MM.dd}"
} else if [type] == "nginx-error" {
  elasticsearch { hosts => localhost }
  index => "nginx-error-%{+YYYY.MM.dd}"
} else {
  elasticsearch { hosts => localhost }
}

}