QML 分享一个日志的布局和思路_qml实现日志-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoyu21520/article/details/130484714

该文描述了一个使用QML编写的日志显示组件，包括文本输出列表、可滚动条以及高亮选中的颜色处理。组件包含一个ListView用于显示日志项，具有焦点和状态切换功能，同时有一个自定义的滚动条进行内容浏览。代码示例展示了如何插入和更新日志项，以及根据不同的日志类型改变颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个日志包括文本输出，滚动条和选中颜色：

 GroupBox {
        title:qsTr("显示")
        Rectangle{
            anchors.rightMargin: 4
            anchors.bottomMargin: 4
            anchors.leftMargin: 4
            anchors.topMargin: 4
            anchors.fill: parent
            ColumnLayout{
                spacing: 2
                anchors.fill: parent
                Rectangle{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    RowLayout {
                        anchors.fill: parent
                        Rectangle{
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            ListView {
                                id:idLogListView
                                focus:true
                                anchors.fill: parent
                                highlight: Rectangle { color: "#A0CED1" }
                                model: idListModle
                                delegate: Component{
                            RowLayout {
                                id:idlistElemnet
                                height: 20
                                width: parent.width
                                spacing: 20
                                Layout.fillWidth: true
                                Text { text:descripe; color:"blue" ; font.pointSize:16 }
                                states: State {
                                    name: "Current"
                                    when: idlistElemnet.ListView.isCurrentItem
                                    PropertyChanges { target: idlistElemnet; x: 20 }
                                }
                                transitions: Transition {
                                    NumberAnimation { properties: "x"; duration: 200 }
                                }
                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: idlistElemnet.ListView.view.currentIndex = index
                                }
                            }
                        }

                        Component.onCompleted:
                        {
                             idListModle.insert(0, { descripe: "系统初始化.."/*,time: Qt.formatDateTime(new Date(),"yyyy-MM-dd HH:mm:ss.zzz")*/});

                        }
                    }
                    ListModel {
                        id:idListModle
                    }
                }
                Rectangle
                {
                    Layout.fillHeight: true
                    id: scrollbar
                    width: 10;
                    height: 380
                    color: "#D9D9D9"
                    radius: 10
                    Rectangle {
                        id: button
                        x: 0
                        y: idLogListView.visibleArea.yPosition * scrollbar.height
                        width: 10
                        height: idLogListView.visibleArea.heightRatio * scrollbar.height;
                        color: "#979797"
                        radius: 10
                        MouseArea {
                            id: mouseArea
                            anchors.fill: button
                            drag.target: button
                            drag.axis: Drag.YAxis
                            drag.minimumY: 0
                            drag.maximumY: scrollbar.height - button.height
                            onMouseYChanged: {
                                idLogListView.contentY = button.y / scrollbar.height * idLogListView.contentHeight
                            }
                        }
                    }
                }
            }
        }
        Rectangle
        {
            Layout.preferredHeight: 40
            Layout.fillWidth: true
            Layout.minimumHeight:40
        }
    }
        function getListEleHeadColor(ntype)
        {
            switch(ntype)
            {
            case 0:
                return "lightblue"
            case 1:
                return "red";
            case 2:
                return "yellow";
            case 3:
                return "green";
            default:
                return "black";
            }
        }
    }
       
       
        
}

个人感觉还不错。如果多加改进会更好。希望对大家有用，当然也可以提出问题