一，前言

最近簡單學(xué)習(xí)了下cdr制作png矢量圖，但是看到別人用svg矢量圖，原來這個更好，放大后像素依然清晰。無意間搜索到居然有人用char就可以顯示出矢量圖。查了下原來是iconfont。即矢量圖做到了字體文件中，我們在word中的特殊符號其實(shí)也是這些字體自帶的。TypeTool可以查看。網(wǎng)上也可以下載大量的矢量圖字體。所以我也下載了一個fontawesome字體。這些矢量圖我用TypeTool打開看的編碼，其實(shí)也可以在此網(wǎng)站找到。

二，需求

我要用下這些ttf格式的icon圖標(biāo)。然后把它加入到列表，列表中添加上checkbox。

三，遇到的問題

1. QListmodule如何添加QWidget？
答：我們常見的Qlist綁定到item在加入module通過view顯示出來都是如下常用寫法。

void Widget::InitList()
{
    QStandardItemModel *ItemModel = new QStandardItemModel(this);
    m_listview->setModel(ItemModel);
    QStringList strList;
    strList<<"圖1"<<"圖2"<<"圖3"<<"圖4"<<"圖5";
    int nCount = strList.size();
    for(int i = 0; i < nCount; i++)
    {
        QString string = static_cast<QString>(strList.at(i));
        QStandardItem *item = new QStandardItem(string);
        ItemModel->appendRow(item);
    }
    m_listview->setFixedSize(200,300);
}

要checkbox則使用。僅需要修改ItemModel->appendRow(item);

        //ItemModel->appendRow(item);
        item->setCheckable( true );
        item->setCheckState( Qt::Checked );
        ItemModel->setItem( i, item );

但是我還要使用Qlabel widget，所以要用setIndexWidget(index, new QLable);這是QListview的方法，使用方法是從制作好的module中先獲取QModelIndex，然后設(shè)置QModelIndex。

QModelIndex index = itemModel->indexFromItem(item);
QLabel *info= new QLabel(m_listview);
setIcon(info, QChar(codeInfo[i]));
m_listview->setIndexWidget(index, info);

2. 如何使用ttf文件？
答：初始化后綁定到控件進(jìn)行使用。

void Widget::InitIcon()
{
    int fontId = QFontDatabase::addApplicationFont(":./res/font/fontawesome-webfont.ttf");
    QString fontName = QFontDatabase::applicationFontFamilies(fontId).at(0);
    iconFont = QFont(fontName);
}

使用，先綁定到此font，然后設(shè)置此font的編碼

void Widget::setIcon(QLabel *lab, QChar chr)
{
    lab->setFont(iconFont);
    lab->setText(chr);
}

3. QListView顯示多列？
答：QListview無法添加多列。要用多列的話用QTableview。
4. QListview無法添加自定義的Widget？
答：暫時無法解決。我制作的Widget是一行有3個控件，一個checkbox+2個label。

四，效果

image.png

五，小結(jié)

主要是使用下IconFont，然后使用了ListView。當(dāng)然了解了如何自制Iconfont。