分类 框架 下的文章

Qt: Ubuntu 22.04 源码编译 Qt5.12.11


需求

想着在linux下编译安装不同版本的qt来配置不同的环境,这样就需要分别源码编译qt的不同版本

下载Qt

去[https://download.qt.io/archive/qt/]找到对应自己想要处理的版本。

Qt 5.12.11官网下载

解压对应的压缩包

tar –xvf qt-everywhere-src-5.12.11.tar.xz

基础环境安装

sudo apt-get install libgl1-mesa-dev libglu1-mesa-dev libxkbcommon-x11-dev libfontconfig1-dev python3 python-is-python3 libxcb-xfixes0-dev libxcb-util-dev

开始配置编译

1 .新建一个Qt的安装目录

mkdir /home/ciomp/public/Qt5.12.11

2 .进入Qt源码目录进行配置和编译

./configure -shared -release -recheck-all -nomake examples -nomake tests -qt-xcb -opensource -confirm-license -platform linux-g++-64 -prefix /home/ciomp/public/Qt5.12.11/

configure配置项说明

-shared 动态编译(.so文件) 还可以用-static配置项来配置静态编译(.a文件)
-release 编译release
-nomake examples 不编译examples
-nomake test 不便宜tests
-opensource 编译开源版本 -commercial商业版本
-confirm-license 自动确认许可证
-platform linux-g++-64 编译器
-prefix /home/ciomp/public/Qt5.12.11/ 安装路径

configure时会有一些报错

qendian.h、qbytearraymatcher.h、qqmlprofilerevent_p.h分别会报一下错误。

error: ‘numeric_limits’ is not a member of ‘std’

  • /home/ciomp/code/qt-everywhere-src-5.12.11/qtbase/src/corelib/global/qendian.h
  • /home/ciomp/code/qt-everywhere-src-5.12.11/qtbase/src/corelib/tools/qbytearraymatcher.h
  • /home/ciomp/code/qt-everywhere-src-5.12.11/qtdeclarative/src/qmldebug/qqmlprofilerevent_p.h

这些文件的代码需要添加一下两个头文件

#include <stdexcept>
#include <limits>

3 .make
make时会也会出现以下错误,也得需要修改一下头文件

convert.cpp:6:56: error: ‘int32_t’ was not declared in this scope

  • /home/ciomp/code/qt-everywhere-src-5.12.11/qtlocation/src/3rdparty/mapbox-gl-native/src/mbgl/util/convert.cpp

这个文件需要添加的头文件

#include<stdint.h>

4 .make install

使用

设置一下环境变量或者直接进入到安装目录下的bin查看一下是否安装成功

PATH=/home/ciomp/public/Qt5.12.11/bin:$PATH
LD_LIBRARY_PATH=/home/ciomp/public/Qt5.12.11/lib:$LD_LIBRARY_PATH
export PATH LD_LIBRARY_PATH
qmake --version

结果

屏幕截图 2023-04-15 112326.png


Qt: QToolButton颜色选择器


一、概述

项目中需要到了颜色选择器,还不能直接用QColorDialog,必须得有个中间过程,那就只能单独写,上网查了查,没有个正经的dome,自己动手丰衣足食。

二、演示

colorSelecter.gif

三、demo下载

qt_demo.zip (包含了上次的表格相关代码)

四、代码解析

解析先写在注释里,有时间再做解释。

// 封装颜色选择器
class ColorComboBoxAPI ColorComboBox : public QToolButton
{
    Q_OBJECT

public:
    ColorComboBox(QWidget *parent = 0);
    ~ColorComboBox();
    // 设置图标(待处理)
    void setButtonIcon(const QString &imageFile, QColor color);

private:
    // 创建下拉菜单
    QMenu* createColorMenu(const char *slot, const char *slotColorBoard);
    // 创建工具按钮图标(待处理)
    QIcon createColorToolButtonIcon(const QString &imageFile, QColor color);
    // 创建颜色的像素图
    QIcon createColorIcon(QColor color);
    // 根据颜色选择器大小来创建像素图
    QIcon setColorIcon(QColor color);

signals:
    // 颜色改变发的信号
    void sigColorChanged(QColor color);

private slots:
    // 颜色选择
    void OnColorChanged();
    // 显示调色板
    void OnShowColorBoard();
};

五、碰到的问题

显示调色板后的英文问题,不显示中文肯定是不行滴,网上简单搜罗搜罗就找到了办法,但是还是有一点小瑕疵。。中午需要引入qt_zh_CN.qm来做翻译,代码如下,直接加到main里就行。

QTranslator trans;
trans.load("qt_zh_CN.qm","D:\\ProgramFiles\\Qt\\Tools\\QtCreator\\share\\qtcreator\\translations");
app.installTranslator(&trans);

这里的trans.load("qt_zh_CN.qm",qm目录)大家会有疑问,这目录是哪来的,这个是qt自带的,qt的安装目录下就可以找到,拾取的部分还是没有翻译,如果需要的话还是再百度一下吧,别人都是ts文件改了之后转qm,然后再引入。

六、总结

颜色选择器还是挺简单的,不需要太多的代码,其实挺多也都是百度的,就是在这里记录一下。


Qt: 表格控件(多级行列表头、表头单元格合并、右键菜单、内容联动)


概述

所里项目需要写关于Qt表的的东西,主要的东西有合并表头(包括列表头),百度里全都是一些关于QTableWidget的介绍及表格内容的操作啥的(Google里能还能找到几个有用的),关于表头的修改却少之又少,但是还是有两种方法来处理,虽然说是处理不如果说是相关介绍,代码都不知道在哪copy过来的,请问同学们,你们的代码能跑一下么?就算能跑不能分享一下么、、截个代码片段是什么意思。。。不够意思!!!

一、效果展示

  1. 普通合并表头
    屏幕截图 2021-12-25 151245.png
  2. 多级合并表头
    屏幕截图 2021-12-27 095141.png
  3. 右键菜单添加与删除及表格下拉联动
    test.gif

二、demo 下载链接

qt_demo.zip

三、定制表头

重中之重就是HeaderView,麻烦也在它,重写封装好的RTableHeaderView类已放到demo内。

1. 重写HeaderView (概述)

RTableHeaderView继承的QHeaderView, 添加setRowHeight、setColumnWidth、setSpan、setCellBackgroundColor、setCellForegroundColor这几个函数

class MultistageTableHeaderAPI RTableHeaderView : public QHeaderView
{
    Q_OBJECT
public:
    RTableHeaderView(Qt::Orientation orientation,int rows,int columns,QWidget* parent = 0);
    virtual ~RTableHeaderView();

    void setRowHeight(int row, int rowHeight);
    void setColumnWidth(int col, int colWidth);
    void setSpan(int row, int column, int rowSpanCount, int columnSpanCount);
    void setCellBackgroundColor(const QModelIndex& index, const QColor&);
    void setCellForegroundColor(const QModelIndex& index, const QColor&);


protected:
    // override
    virtual void mousePressEvent(QMouseEvent* event) Q_DECL_OVERRIDE;
    virtual QModelIndex indexAt(const QPoint&);
    virtual void paintSection(QPainter* painter, const QRect& rect, int logicalIndex) const Q_DECL_OVERRIDE;
    virtual QSize sectionSizeFromContents(int logicalIndex) const Q_DECL_OVERRIDE;

    // inherent features
    QModelIndex columnSpanIndex(const QModelIndex& currentIndex) const;
    QModelIndex rowSpanIndex(const QModelIndex& currentIndex) const;
    int columnSpanSize(int row, int from, int spanCount) const;
    int rowSpanSize(int column, int from, int spanCount) const;
    int getSectionRange(QModelIndex& index, int* beginSection, int* endSection) const;

protected slots:
    void onSectionResized(int logicalIdx, int oldSize, int newSize);

signals:
    void sectionPressed(int from, int to);
};

2. 定制列表头(概述)

    // 横向表头
    RTableHeaderView* p_header = new RTableHeaderView(Qt::Horizontal, 2, 15, ui->tableWidget);
    QAbstractItemModel* pHeaderModel = p_header->model();
    // 合并表头
    p_header->setSpan(0, 0, 2, 1);
    p_header->setSpan(0, 1, 2, 1);
    p_header->setSpan(0, 2, 1, 13);
    // 设置表头标题内容
    pHeaderModel->setData(pHeaderModel->index(0, 0), QString("Reference"), Qt::DisplayRole);
    pHeaderModel->setData(pHeaderModel->index(0, 1), QString("Action"), Qt::DisplayRole);
    pHeaderModel->setData(pHeaderModel->index(0, 2), QString("Params"), Qt::DisplayRole);
    for (int i = 0; i < 13; i++)
    {
        pHeaderModel->setData(pHeaderModel->index(1, i+2), QString("param_%1").arg(i), Qt::DisplayRole);
    }
    
    // 设置禁止点击
    p_header->setSectionsClickable(false);
    // 设置表头颜色
    p_header->setCellBackgroundColor(pHeaderModel->index(0, 0), 0xcfcfcf);
    p_header->setCellBackgroundColor(pHeaderModel->index(0, 1), 0xcfcfcf);
    p_header->setCellBackgroundColor(pHeaderModel->index(0, 2), 0xcfcfcf);

3. 定制行表头(概述)

    // 纵向表头
    RTableHeaderView* p_vertical = new RTableHeaderView(Qt::Vertical, 6, 2, ui->tableWidget);
    QAbstractItemModel* pVerticalModel = p_vertical->model();
    // 合并表头
    p_vertical->setSpan(0, 0, 2, 2);
    p_vertical->setSpan(2, 0, 2, 1);
    p_vertical->setSpan(4, 0, 2, 1);
    // 设置表头标题内容
    pVerticalModel->setData(pVerticalModel->index(0,0), QString("0"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(2,0), QString("1"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(4,0), QString("2"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(0,1), QString("name"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(1,1), QString("value"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(2,1), QString("name"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(3,1), QString("value"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(4,1), QString("name"), Qt::DisplayRole);
    pVerticalModel->setData(pVerticalModel->index(5,1), QString("value"), Qt::DisplayRole);
    // 设置禁止点击
    p_vertical->setSectionsClickable(false);
    // 设置表头颜色
    p_vertical->setCellBackgroundColor(pHeaderModel->index(0,0), 0xcfcfcf);

四、右键菜单

在table中连接菜单槽函数

connect(ui->tableWidget, SIGNAL(customContextMenuRequested(QPoint)), this, SLOT(slotContextMenu(QPoint)));

    QMenu *menu = new QMenu(ui->tableWidget);
    QAction *menu1 = new QAction(QString("添加"));
    QAction *separator = new QAction();
    separator->setSeparator(true);
    QAction *menu2 = new QAction(QString("删除"));
    connect(menu1, SIGNAL(triggered()), this, SLOT(menu_add()));
    connect(menu2, SIGNAL(triggered()), this, SLOT(menu_delete()));
    menu->addAction(menu1);
    menu->addAction(separator);
    menu->addAction(menu2);
    menu->move(QCursor::pos());
    menu->show();

VUE:使用antd design


命令行安装:

npm install ant-design-vue --save     #pc端
npm i antd-mobile-vue -S              #手机端

在main.js中

1.全部引入

#pc端
import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(ant)

#手机端
import AntdMobile from 'antd-mobile-vue'
Vue.use(AntdMobile)

2.按需引入

import {Button} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(Button)

直接在项目中可以使用

在antd官网复制即可https://www.antdv.com/components/button/

<a-button type="primary">Primary</a-button>

碰见的问题

发生的问题:Inline JavaScript is not enabled. Is it set in your options?
后来发现是less版本太高3.0.+,后更改为2.7.2,再npm install 就OK了。


VUE:整屏滚动效果


这里需要用的是vue-fullpage插件

安装

npm install vue-fullpage --save
npm install animate.css --save

配置

在main.js需要引入该插件的css和js文件

import 'vue-fullpage/vue-fullpage.css'
import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

页面代码

在page-wp容器上加v-fullpage指令,v-fullpage的值是fullpage的配置 在page容器上加v-animate指令,v-animate的值是animate.css的动画效果

<template>
  <div id="app">
    <div class="fullpage-container">
      <div class="fullpage-wp" v-fullpage="opts">
        <div class="page-1 page">
          <p class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage</p>
        </div>
        <div class="page-2 page">
          <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
        </div>
        <div class="page-3 page">
          <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
          <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      opts: {
        start: 0,
        dir: 'v',
        loop: false,
        duration: 500,
        stopPageScroll: true,
        beforeChange: function (prev, next) {
          console.log(prev,next)
        },
        afterChange: function (prev, next) {
          console.log(prev,next)
        }
      }
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
#app{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  color:red;
}
.page-1{
  background: rgba(0,0,0,0.8);
}
.page-2{
  background: pink;
}
.page-3{
  background: blueviolet;
}
.page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>