QTreeView使用總結14,自定義model,控制對齊和顏色
1,簡介
前文介紹了使用自定義model的基本方法,重點強調了該方法帶來的效能上的優點。
其實自定義model還能更方便地對內容進行一些屬性控制,比如前景色、背景色、對齊、文字內容、字型等等。
主要就是在data函式內對各種role進行處理。具體哪些種類可以參考ItemDataRole型別。
下面示例對文字對齊和內容顏色的控制。
2,效果
控制對齊:指定首列左對齊,作為tree層級關係列,顯示效果好點。
中間分數列,即第2~6列右對齊,因為都是數字,右對齊容易觀看和比對大小。
後面評價列,居中對齊即可。
控制顏色:將所有的不合格標為紅色,醒目。
原圖效果:
進行對齊和顏色處理後的效果:
3,原理
在上文的基礎上,對data函式進行增加處理,
分別處理Qt::TextAlignmentRole、Qt::TextColorRole兩種型別屬性:
QVariant TreeModel::data(const QModelIndex &index, int role) const
{
if (!index.isValid())
return QVariant();
TreeItem *item = static_cast<TreeItem*>(index.internalPointer());
if (role == Qt::DisplayRole)
{
return item->data(index.column());
}
else if( role == Qt::TextAlignmentRole )
{
if( index.column() == 0 )
{
//第1列左對齊
return QVariant(Qt::AlignVCenter | Qt::AlignLeft);
}
else if( index.column() > 0 && index.column() < 6 )
{
//第2~6列右對齊
return QVariant(Qt::AlignVCenter | Qt::AlignRight);
}
else
{
//其他列居中對齊
return QVariant(Qt::AlignCenter);
}
}
else if(role == Qt::TextColorRole)
{
if(index.column() == 6)
{
QString str = item->data(6).toString();
if(str == QStringLiteral("不合格"))
{
//第7列(是否合格)如果不合格就設文字為紅色
return QVariant(QColor("#FF0000"));
}
}
return QVariant();
}
return QVariant();
}
4,原始碼
本文示例原始碼下載:
TreeDemo14 自定義model,控制對齊和顏色
相關文章
- 自定義控制元件總結和思考控制元件
- echart使用自定義單個柱狀顏色實現
- 微信小程式-自定義placeholder顏色和樣式微信小程式
- VC 對話方塊背景顏色、控制元件顏色控制元件
- 利用CAGradientLayer自定義顏色漸變viewView
- 國慶總結:echarts自定義顏色主題,保證你看的明明白白Echarts
- QTreeView使用總結2,常用API介紹QTViewAPI
- Vue 自定義元件directive使用總結Vue元件
- 使用 JavaScript 控制 CSS 中的顏色JavaScriptCSS
- 自定義Toast的背景顏色大小及字型大小AST
- 在Mac裡給Terminal終端自定義顏色Mac
- 小程式中 icon 顏色自定義解決方案
- Vue 自定義元件使用 v-modelVue元件
- 常見顏色空間總結
- 0x04_My-OS實現自定義顏色
- 純 CSS 解決自定義 CheckBox 背景顏色問題CSS
- python seaborn畫熱力圖,自定義顏色漸變Python
- Python自定義詞雲圖形狀和文字顏色Python
- Swift 專案總結 04 - 自定義控制器轉場Swift
- Swift 專案總結 04 自定義控制器轉場Swift
- Flutter Widget自定義總結Flutter
- 小程式自定義swiper的指示點樣式及顏色
- windows10系統怎麼自定義主題顏色Windows
- VARCHART XGantt系列教程:使用顏色來定義語義
- Vue自定義元件之v-model的使用Vue元件
- 記一次VS2010和VS2015自定義顏色的過程
- Echarts 中國地圖各個省市自治區自定義顏色Echarts地圖
- Matplotlib顏色對照表
- vue框架之自定義元件中使用v-modelVue框架元件
- vue.js自定義元件上使用v-modelVue.js元件
- 視訊直播系統原始碼,使用自定義UI 完成文字顏色載入效果原始碼UI
- Vue JSX、自定義 v-modelVueJS
- 自定義元件重寫框架 artisan 快速建立 Controller 和 Model元件框架Controller
- 設定toast的字型顏色和背景顏色AST
- switch控制元件(變更顏色)控制元件
- Shader從入門到跑路:顏色自定義輸出、紋理取樣
- 自定義ItemDecoration分割線的高度、顏色、偏移,看完這個你就懂了
- 【自定義使用者控制元件】CNMButton控制元件