分享几种简约大方的ListView外观设计（qml）

news2024/12/24 22:16:53

一、前言

最近才学到这里，感觉基础的 ListView 很丑，就现学现用弄个几个自认为还行的设计给大家献丑了。如果你觉得还不错，代码就在下面拿去直接用，顺便给我点个赞哈 ~ 感谢感谢 ~

二、正文

设计1

第一种就是正常的左侧边栏，特别之处就是高亮项用了4个小三角。这小三角并不是图片，而是高亮的圆角和矩形项重叠得到的，有点老古董游戏里的菜单项选择时的感觉。

代码是单独新建的一个qml文件里写的，如果写到主文件里会很长，建议分文件去写界面。

具体代码：

import QtQuick
import QtQuick.Controls

Rectangle{
    width: 100; height: parent.height
    color: 'grey'

    ListView{
        id: list
        width: 90; height: parent.height
        x: 10; y:10
        spacing: 10
        clip: true

        model: ['首页', '销售数据', '库存数据', '发货计划', '广告', '设置', '用户权限']
        delegate: Rectangle{
            width: 80; height: 30
            color: 'grey'
            radius: 10

            Text{
                id: itemText
                anchors.centerIn: parent
                color: 'white'
                text: modelData
            }

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

        highlight: Rectangle{
            color: "transparent"
            border.width: 2
            border.color: 'white'
        }

        highlightMoveDuration: 0
    }
}

设计2

第二种也是高亮和项的背景堆叠出来的小三角，这里换成了黄色。和上面不同地方是这个是一个横向的菜单栏。

做这个横向的菜单栏的原因是，我准备做一个小程序，但是功能不太多，我想着设计成横向的会更美观一些。

qml里的 ListView 是自带一点项之间切换的动画的，大家有兴趣的话复制下面的代码自己去试试就知道了，总之，还是挺不错的。

具体代码：

import QtQuick
import QtQuick.Controls

Rectangle{
    width: parent.width; height: 38
    color: 'black'

    ListView{
        id: list
        x: 10
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width; height: 30
        model: ['主页', '工具箱', '店铺', '业绩报表', '广告', '库存', '财务报表', '产品表现', '设置']
        clip: true

        delegate: Rectangle{
            width: 60; height: 30
            color: 'black'
            radius: 10

            Text{
                text: modelData
                color: "white"
                anchors.centerIn: parent
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    list.currentIndex = index //可以实现高亮切换
                }
            }
        }
        spacing: 10
        highlight: Rectangle{
            color: "transparent"
            border.width: 3
            border.color: "yellow"
        }
        highlightMoveDuration: 0
        orientation: ListView.Horizontal //让 ListView 横向显示
    }
}

设计3

这个也比较简单，高亮用白色，字被点击后从灰色切换成黑色，和白色形成鲜明对比，看起来还是挺醒目的，也比较简约美观，但是总感觉不太满意，所以就有了下面的第4种设计。

设计3主要是增加了当前项的字体颜色切换，其它和上面的并无太大差异。重点代码是下面这句，ListView.isCurrentItem + 三目运算符。

color: reccc.ListView.isCurrentItem ? "black" : "grey"

具体代码：

import QtQuick
import QtQuick.Controls

Rectangle{
    id: rec
    width: parent.width; height: 38
    color: 'lightgrey'

    ListView{
        id: list
        x: 10
        anchors.verticalCenter: parent.verticalCenter
        width: parent.width; height: 30
        model: ['常用单位换算', '英文大小写转换', '文本处理工具']
        clip: true

        delegate: Rectangle{
            id: reccc
            width: 100; height: 30
            color: 'transparent'

            Text{
                id: modelDataText
                text: modelData
                color: reccc.ListView.isCurrentItem ? "black" : "grey"
                anchors.centerIn: parent
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    list.currentIndex = index //可以实现高亮切换
                }
            }
        }
        spacing: 10
        highlight: Rectangle{
            color: "white"
            width: 100; height: 30
            radius: 15
        }
        highlightMoveDuration: 200
        orientation: ListView.Horizontal //让 ListView 横向显示
    }
}

设计4

第4种就是下面这样的啦，已经是我目前最高水平发挥了，哇咔咔 ~

我把 ListView 没有锚定在 Rectangle 上，而是 y坐标往下偏移了14，再把高亮背景色设置成白色，这样看起来就好像是一个 Tab标签页，和下面的内容形成一个整体，我个人感觉还不赖。

在我这个程序投入使用之前，如果还没想到更好的设计的话，就暂时先用这个吧！

具体代码：

import QtQuick
import QtQuick.Controls

Rectangle{
    id: rec
    width: parent.width; height: 38
    color: '#002f36'

    ListView{
        id: list
        x: 10; y: rec.y +14
        width: parent.width; height: 30
        model: ['常用单位换算', '英文大小写转换', '文本批量处理', '文件管理器']
        clip: true

        delegate: Rectangle{
            id: reccc
            width: 100; height: 30
            color: 'transparent'

            Text{
                id: modelDataText
                text: modelData
                color: reccc.ListView.isCurrentItem ? "#002f36" : "#ffffff"
                anchors.centerIn: parent
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    list.currentIndex = index //可以实现高亮切换
                }
            }
        }
        spacing: 10
        highlight: Rectangle{
            color: "white"
            radius: 5
        }
        highlightMoveDuration: 200
        orientation: ListView.Horizontal //让 ListView 横向显示
    }
}