一，前言

最近简单学习了下cdr制作png矢量图，但是看到别人用svg矢量图，原来这个更好，放大后像素依然清晰。无意间搜索到居然有人用char就可以显示出矢量图。查了下原来是iconfont。即矢量图做到了字体文件中，我们在word中的特殊符号其实也是这些字体自带的。TypeTool可以查看。网上也可以下载大量的矢量图字体。所以我也下载了一个fontawesome字体。这些矢量图我用TypeTool打开看的编码，其实也可以在此网站找到。

二，需求

我要用下这些ttf格式的icon图标。然后把它加入到列表，列表中添加上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，然后设置QModelIndex。

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

2. 如何使用ttf文件？
答：初始化后绑定到控件进行使用。

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

使用，先绑定到此font，然后设置此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

五，小结

主要是使用下IconFont，然后使用了ListView。当然了解了如何自制Iconfont。