因为项目需要，最近在学习QML，用到了TreeView组件，网上没找到符合需求的合适的样式，就自己调整了一下，在此做个记录。
import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.15
Rectangle{
id:root
width: 300
height: 500
color: "#d2d2d2"
TreeView{
id:tree
//visible: false
anchors.fill: parent
anchors.topMargin: 10
anchors.bottomMargin: 10
anchors.leftMargin: 10
anchors.rightMargin: 10
TableViewColumn{
title:"name"
role:"name"
width: tree.width
}
model:EquipTreeView
style: treeViewStyle
selection: sel
frameVisible: false//隐藏边框
backgroundVisible: false
sortIndicatorVisible: true//这句不太清楚什么含义
headerVisible: false
itemDelegate: Item{
id:treeItem
Rectangle{
id:itemRect
anchors.fill:parent
//通过设置项圆角矩形相对于项高的上下边距来实现项间间隔效果
//如果仅设置单边边距会导致圆角矩形向上或向下偏移，与文字不垂直居中，还需再进行定位，很麻烦
//上下边距设为希望的项间隔的1/2，项高设为原项高+上下边距的高度
anchors.topMargin: 1.5
anchors.bottomMargin: 1.5
width: tree.width
radius:5
color:styleData.selected?"#8abcdb":getColor(styleData.index)
}
Text{
id:itemText
anchors.fill: parent
anchors.leftMargin: 4
text:styleData.value
font.family:"微软雅黑"
color: "#ffffff"//styleData.selected?"#3742db":"#ffffff"//选中时文字颜色切换
font.pointSize: 11//styleData.selected?12:11//选中时文字大小切换
verticalAlignment: Text.AlignVCenter
MouseArea{
id:itemMouse
hoverEnabled: true
anchors.fill:parent
drag.target: itemText//这句不太清楚什么含义，不过注掉之后，如果鼠标按下和释放不在同一点上会触发选中
onPressed: {
}
onReleased: {
}
onClicked: {
sel.setCurrentIndex(styleData.index,0x0010)//点击文本，选中该节点
}
onDoubleClicked: {
if(styleData.isExpanded)//切换节点的展开状态
{
tree.collapse(styleData.index)
}
else
{
tree.expand(styleData.index)
}
}
}
}
}
ItemSelectionModel//添加自定义选中
{
id:sel
model:EquipTreeView
}
Component{
id:treeViewStyle
TreeViewStyle//树的自定义样式
{
indentation: 20//节点首缩进
backgroundColor: "transparent"//背景透明
branchDelegate: Image{
//节点展开标记图
id:image
source: styleData.isExpanded?"./down.png":"./right.png"//项前的三角图标
width:15
height: 15
}
rowDelegate:Rectangle{
id:rowRec
height:33//项高
color:"transparent"//背景透明
}
}
}
onClicked: {
}
}
Rectangle{
x: 0
y: 400
width: root.width
height: 100
color:"#6e6e6e"
Rectangle{
x: 33
y: 20
width: 10
height: 10
color:"#4a8fba"
}
Text{
x: 55
y: 14
font.family:"微软雅黑"
color:"#ffffff"
text:"国家"
}
Rectangle{
x: 117
y: 20
width: 10
height: 10
color:"#f0af72"
}
Text{
x: 140
y: 14
font.family:"微软雅黑"
color:"#ffffff"
text:"省份"
}
Rectangle{
x: 200
y: 20
width: 10
height: 10
color:"#d48484"
}
Text{
x: 224
y: 14
font.family:"微软雅黑"
color:"#ffffff"
text:"直辖市"
}
Rectangle{
x: 33
y: 45
width: 10
height: 10
color:"#92d791"
}
Text{
x: 55
y: 40
font.family:"微软雅黑"
color:"#ffffff"
text:"城市"
}
Rectangle{
x: 117
y: 45
width: 10
height: 10
color:"#de8ad5"
}
Text{
x: 148
y: 40
font.family:"微软雅黑"
color:"#ffffff"
text:"区"
}
Rectangle{
x: 200
y: 45
width: 10
height: 10
color:"#bbbbbb"
}
Text{
x: 232
y: 40
font.family:"微软雅黑"
color:"#ffffff"
text:"未知"
}
Rectangle{
x: 33
y: 73
width: 10
height: 10
color:"#8abcdb"
}
Text{
x: 55
y: 66
font.family:"微软雅黑"
color:"#ffffff"
text:"选中"
}
}
//根据每一项的类型返回不同的颜色
function getColor(index){
var type = EquipTreeView.getType(index)
if(type == "Country")
{
return "#4a8fba"
}
else if(type == "Province")
{
return "#f0af72"
}
else if(type == "Municipality")
{
return "#d48484"
}
else if(type == "City")
{
return "#92d791"
}
else if(type == "District")
{
return "#de8ad5"
}
else
{
return "#bbbbbb"
}
}
}
运行效果：
model的写法参考以下文章：
https://blog.csdn.net/Shado_walker/article/details/56495059
做了如下修改：
enum ItemRoles {
NAME = Qt::UserRole + 1,
TYPE
};
m_rootItem = new TreeItem;
QList<QVariant> list;
list.append("ZhongGuo");
list.append("Country");
auto item = new TreeItem(list, m_rootItem);
m_rootItem->appendChild(item);
QList<QVariant> BJ_List;
BJ_List.append("BeiJing");
BJ_List.append("Municipality");
auto BJ_Item = new TreeItem(BJ_List, item);
item->appendChild(BJ_Item);
QList<QVariant> SH_List;
SH_List.append("ShangHai");
SH_List.append("Municipality");
auto SH_Item = new TreeItem(SH_List, item);
item->appendChild(SH_Item);
QList<QVariant> HP_List;
HP_List.append("HuangPu");
HP_List.append("District");
auto HP_Item = new TreeItem(HP_List, SH_Item);
SH_Item->appendChild(HP_Item);
QList<QVariant> GD_List;
GD_List.append("GuangDong");
GD_List.append("Province");
auto GD_Item = new TreeItem(GD_List, item);
item->appendChild(GD_Item);
QList<QVariant> GZ_List;
GZ_List.append("GuangZhou");
GZ_List.append("City");
auto GZ_Item = new TreeItem(GZ_List, GD_Item);
GD_Item->appendChild(GZ_Item);
QList<QVariant> TH_List;
TH_List.append("TianHe");
TH_List.append("District");
auto TH_Item = new TreeItem(TH_List, GZ_Item);
GZ_Item->appendChild(TH_Item);
QList<QVariant> ZH_List;
ZH_List.append("ZhuHai");
ZH_List.append("City");
auto ZH_Item = new TreeItem(ZH_List, GD_Item);
GD_Item->appendChild(ZH_Item);
QList<QVariant> XZ_List;
XZ_List.append("XiangZhou");
XZ_List.append("District");
auto XZ_Item = new TreeItem(XZ_List, ZH_Item);
ZH_Item->appendChild(XZ_Item);
QList<QVariant> ZJ_List;
ZJ_List.append("ZheJiang");
ZJ_List.append("Province");
auto ZJ_Item = new TreeItem(ZJ_List, item);
item->appendChild(ZJ_Item);
QList<QVariant> HZ_List;
HZ_List.append("HangZhou");
HZ_List.append("City");
auto HZ_Item = new TreeItem(HZ_List, ZJ_Item);
ZJ_Item->appendChild(HZ_Item);
QList<QVariant> GS_List;
GS_List.append("GongShu");
GS_List.append("District");
auto GS_Item = new TreeItem(GS_List, HZ_Item);
HZ_Item->appendChild(GS_Item);
QHash<int, QByteArray> CusTreeModel::roleNames() const
{
QHash<int, QByteArray> names(QAbstractItemModel::roleNames());
names[NAME] = "name";
names[TYPE] = "type";
return names;
}
QVariant CusTreeModel::data(const QModelIndex& index, int role) const
{
if (!index.isValid())
{
return QVariant();
}
switch (role)
{
case NAME:
{
return static_cast<TreeItem*>(index.internalPointer())->data(0);
}
case TYPE:
{
return static_cast<TreeItem*>(index.internalPointer())->data(1);
}
}
}
新增函数：
//函数声明：Q_INVOKABLE QString getType(const QModelIndex& index);
//注意：需要Q_INVOKABLE宏进行修饰才能在QML中调用
QString CusTreeModel::getType(const QModelIndex& index)
{
if (!index.isValid())
{
return "";
}
TreeItem* item = static_cast<TreeItem*>(index.internalPointer());
return item->data(1).toString();
}
如果需要使用自定义滚动条：
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff//将TreeView的自带ScrollBar隐藏掉
ScrollBar{
id:vBar
hoverEnabled: true
active: hovered||pressed
orientation: Qt.Vertical
size:tree.height/tree.flickableItem.contentHeight
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
onPositionChanged: {
//拖动ScrollBar时，滚动TreeView
tree.flickableItem.contentY = position*(tree.flickableItem.contentHeight)
}
}
Connections{
target: tree.flickableItem
onContentYChanged:{
//鼠标滚动TreeView时，同步ScrollBar位置
vBar.position = tree.flickableItem.contentY/tree.flickableItem.contentHeight
}
}