一，前言

本周业余时间主要是设计一个数据库和Qtableview的应用小工具，用来督促自己学习做菜。享受DIY的乐趣~

二，需求

记录菜谱，包括QTableview，以及dock窗口用来显示具体菜谱信息

三，遇到的问题

1. 图片如何保存到数据库，应该如何设计？
   答：保存路径到数据库。实际的图片可以用如下方法显示到QLabel，因为支持富文本。

       QString picName = "a.png"; //可以从数据库获取
       QString savepath = "<img src = '"+QApplication::applicationDirPath() + "/pic/" + picName+"'/>";
       menupic->setText(savepath);
   

   但是无法重置大小，所以还是采用标准方法

       labels[3]->resize(100,100);
       QImage *img=new QImage; //新建一个image对象
       img->load(QApplication::applicationDirPath() + "/pic/" + picName); //将图像资源载入对象img，注意路径，可点进图片右键复制路径
       labels[3]->setPixmap(QPixmap::fromImage(*img).scaled(labels[3]->size()));
   

2. QTableView中第一列默认列隐藏？
   答：tableView->verticalHeader()->hide();
3. 鼠标按住列名可自由拖动列的位置应该如何实现？
   答：table->horizontalHeader()->setSectionsMovable(true)；
4. 排序方法
   答：用代理类，加壳后可以操作排序了。

       QSortFilterProxyModel *sqlproxy = new QSortFilterProxyModel(this);
       sqlproxy->setSourceModel(model);
       //sqlproxy->setFilterKeyColumn(0);//设置第一列过滤
       table->setModel(sqlproxy);
       table->setSortingEnabled(true);//排序使能
   

   另外，网上看到sqlproxy->setFilterRegExp(regExp)就可以使用正则表达式排序。
5. 某列显示图片
   答：受欢迎度输入1-5的数字，但是显示的时候要用图片。通过重绘QSqlQueryModel显示的模型data。

   QVariant MySqlQueryModel::data(const QModelIndex & index, int role) const
   {
       if (!index.isValid())
           return QVariant();
   
       if(role== Qt::CheckStateRole)
       {
           if(index.column() == 0)
           {
               if (check_state_map.contains(index.row()))
                   return check_state_map[index.row()] == Qt::Checked ? Qt::Checked : Qt::Unchecked;
               return Qt::Unchecked;
           }
       }
       if(role==Qt::DecorationRole)
       {
           if(index.column() == 3)
           {
               QPixmap pix;
               int cmp;
               cmp = index.data().toInt();
               //cmp = map[index.row()];
               switch(cmp)
               {
               case 1:
                   pix.load(":/res/img/star.png");
                   break;
               case 2:
                   pix.load(":/res/img/star2.png");
                   break;
               case 3:
                   pix.load(":/res/img/star3.png");
                   break;
               default:
                   break;
               }
               pix = pix.scaled(24,24,Qt::KeepAspectRatioByExpanding);
               return pix;//piclist[index.row()];
           }
       }
          // 否则返回默认的
       return QSqlQueryModel::data(index,role);
   }
   

image.png

6. 通过重新QSqlQueryModel无法解决仅显示图片问题？
   答：使用itemDelegate,通过paint重绘。

   void picItemDelegate::paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const
   {
       if (index.column() == 3)//UE
       {
           int repeat = index.data().toInt();
           int row = index.row();
           int x = option.rect.x();
           int y = option.rect.y();
           int width = option.rect.width();
           int height = option.rect.height();
           //qDebug()<<"x="<<x<<"y="<<y;
           QPen pen_black;
           pen_black.setWidth(2);
           pen_black.setColor(QColor(Qt::darkGreen));
           QStyleOptionViewItem myOption = option;
           int r1 = (width<height)?width/2:height/2;
           int offset = 2;
           r1 = r1-offset;
           //qDebug()<<"r1"<<r1;
           painter->setPen(pen_black);
           painter->setBrush(Qt::green);
           for(int i=0;i<repeat;i++)
           {
               QPoint point(x+r1+offset+i*2*(r1+offset),y+r1+offset);   //圆心
               painter->drawEllipse(point,r1,r1); //画圆
           }
       }
   }
   

   使用起来很简单，放弃重写QSqlQueryModel模型，直接在原来的QSqlQueryModel上，为第三列受欢迎度重绘Item。

       picItem_delegate = new picItemDelegate();
       //table->setItemDelegate(picItem_delegate);
       table->setItemDelegateForColumn(3, picItem_delegate);
   

image.png

四，效果

主界面

image.png

其它界面

image.png

五，小结

好了，这个周末业余时间把小工具完成了，接着可以用此工具督促我学习做菜了。之后按使用过程中的需求可能再优化下，加些工具栏，主界面的搜索栏，因为当前只能按列来排序。自给自足的感觉真好，不但自己做菜，连工具都是自己做，哈哈~