first commit

Author: robert1207

README.md

@@ -0,0 +1,39 @@
+# 07. Qt对话框的自适应动态布局（布局跟随窗口大小改变）
+## 一、效果图
+## 二、制作原理说明
+要想实现对话框缩放时候内部的控件跟着动态缩放。需要以下几个关键设置：
+1. 给对话框窗口设置一个布局，以后窗口靠这个布局管理
+2. 给对话框窗口设置QSizePolicy为Expanding
+3. 窗口内包含的控件都设置QSizePolicy::Expanding属性，或自定义控件覆盖resizeEvent来保持自定义控件动态填满父布局。layout不用设置Expanding属性。
+4. 对话框窗口设置setMinimumSize
+## 三、自定义跟随父布局缩放的控件
+本例子中自己实现了两个自定义控件，分别是：
+MyVideoWidget：显示视频或图片的控件
+MyRangeSlider：调节裁剪范围的控件
+这两个控件都重新实现了resizeEvent方法。因此这两个控件，默认就会填满父布局。会跟着父布局扩展而扩展
+
+## 四、在伸缩动态布局中，保持按钮不变形
+在本例子中有两个按钮分别设置了图片背景。以实现自己需要的按钮造型。
+按钮配图片的方法为：
+	```cpp
+	record_btn_p->setStyleSheet("QPushButton{border-image: url(:/img/image/record.png);}"
+	"QPushButton:hover{border-image: url(:/img/image/rightcheck.png);}"
+	"QPushButton:pressed{border-image: url(:/img/image/pause.png);}");
+	```
+设置完按钮发现按钮会随着缩放变形，导致很难看。并且设置setGeometry
+并不管用。设置按钮的sizePolicy为Fixed也没有用。经过测试发现，最终的固定按钮尺寸的方法为：
+	```cpp
+	record_btn_p->setMinimumSize(QSize(28, 28));
+	record_btn_p->setMaximumSize(QSize(28, 28));
+	```
+当需要只设置垂直方向固定，则需要如下配置：
+	```cpp
+	myrange_slider_p->setMaximumHeight(24);
+	myrange_slider_p->setMinimumHeight(24);
+	```
+当需要只设置水平方向固定，则需要如下配置：
+	```cpp
+	myrange_slider_p->setMinimumWidth(100);
+	myrange_slider_p->setMaximumWidth(100);
+	```
+## 五、自定义控件源码与本例子源码

VideoPlay.pro

@@ -0,0 +1,49 @@
+#-------------------------------------------------
+#
+# Project created by QtCreator 2019-07-12T10:31:44
+#
+#-------------------------------------------------
+
+QT       += core gui
+
+greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
+
+TARGET = VideoPlay
+TEMPLATE = app
+
+# The following define makes your compiler emit warnings if you use
+# any feature of Qt which has been marked as deprecated (the exact warnings
+# depend on your compiler). Please consult the documentation of the
+# deprecated API in order to know how to port your code away from it.
+DEFINES += QT_DEPRECATED_WARNINGS
+
+# You can also make your code fail to compile if you use deprecated APIs.
+# In order to do so, uncomment the following line.
+# You can also select to disable deprecated APIs only up to a certain version of Qt.
+#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
+
+CONFIG += c++11
+
+SOURCES += \
+        main.cpp \
+        mainwindow.cpp \
+        ui/capture_video_dialog/capture_video_dialog.cpp \
+        views/myrangeslider.cpp \
+        views/myvideowidget.cpp
+
+HEADERS += \
+        mainwindow.h \
+        ui/capture_video_dialog/capture_video_dialog.h \
+        views/myrangeslider.h \
+        views/myvideowidget.h
+
+FORMS += \
+        mainwindow.ui
+
+RESOURCES += \
+    res/res.qrc
+
+# Default rules for deployment.
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target

main.cpp

@@ -0,0 +1,11 @@
+#include "mainwindow.h"
+#include <QApplication>
+
+int main(int argc, char *argv[])
+{
+    QApplication a(argc, argv);
+    MainWindow w;
+    w.show();
+
+    return a.exec();
+}

mainwindow.cpp

@@ -0,0 +1,26 @@
+#include "mainwindow.h"
+#include "ui_mainwindow.h"
+
+MainWindow::MainWindow(QWidget *parent) :
+    QMainWindow(parent),
+    ui(new Ui::MainWindow)
+{
+    ui->setupUi(this);
+}
+
+MainWindow::~MainWindow()
+{
+    delete ui;
+}
+
+void MainWindow::on_pushButton_clicked()
+{
+       // CaptureVideoDialog *dialog = new CaptureVideoDialog(this);
+       // dialog->show();
+
+    CaptureVideoDialog captureVideoDialog(this);
+    if(captureVideoDialog.exec() == QDialog::Accepted) {
+
+
+    }
+}

mainwindow.h

@@ -0,0 +1,27 @@
+#ifndef MAINWINDOW_H
+#define MAINWINDOW_H
+
+#include <QMainWindow>
+
+#include "ui/capture_video_dialog/capture_video_dialog.h"
+
+namespace Ui {
+class MainWindow;
+}
+
+class MainWindow : public QMainWindow
+{
+    Q_OBJECT
+
+public:
+    explicit MainWindow(QWidget *parent = nullptr);
+    ~MainWindow();
+
+private slots:
+    void on_pushButton_clicked();
+
+private:
+    Ui::MainWindow *ui;
+};
+
+#endif // MAINWINDOW_H

mainwindow.ui

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>MainWindow</class>
+ <widget class="QMainWindow" name="MainWindow">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>400</width>
+    <height>300</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>MainWindow</string>
+  </property>
+  <widget class="QWidget" name="centralWidget">
+   <widget class="QPushButton" name="pushButton">
+    <property name="geometry">
+     <rect>
+      <x>110</x>
+      <y>110</y>
+      <width>113</width>
+      <height>32</height>
+     </rect>
+    </property>
+    <property name="text">
+     <string>PushButton</string>
+    </property>
+   </widget>
+  </widget>
+  <widget class="QMenuBar" name="menuBar">
+   <property name="geometry">
+    <rect>
+     <x>0</x>
+     <y>0</y>
+     <width>400</width>
+     <height>22</height>
+    </rect>
+   </property>
+  </widget>
+  <widget class="QToolBar" name="mainToolBar">
+   <attribute name="toolBarArea">
+    <enum>TopToolBarArea</enum>
+   </attribute>
+   <attribute name="toolBarBreak">
+    <bool>false</bool>
+   </attribute>
+  </widget>
+  <widget class="QStatusBar" name="statusBar"/>
+ </widget>
+ <layoutdefault spacing="6" margin="11"/>
+ <resources/>
+ <connections/>
+</ui>

res/image/Thumbs.db

@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/img">
+        <file>image/record.png</file>
+        <file>image/pause.png</file>
+        <file>image/rightcheck.png</file>
+    </qresource>
+</RCC>

res/image/app_icon.png

@@ -0,0 +1,129 @@
+
+#include "capture_video_dialog.h"
+
+
+CaptureVideoDialog::CaptureVideoDialog(QWidget *parent) :
+        QDialog(parent)
+{
+    SetupUI(this);
+
+}
+
+CaptureVideoDialog::~CaptureVideoDialog()
+{
+
+}
+
+
+void CaptureVideoDialog::SetupUI(QDialog *dialog) {
+
+    if (dialog->objectName().isEmpty())
+               dialog->setObjectName(QString::fromUtf8("capturingDialog"));
+    dialog->setWindowModality(Qt::NonModal);
+    dialog->resize(dialog_w_, dialog_h_);
+
+    //给主窗口设置 尺寸策略，为了内部布局可以跟着窗口一起扩展，需要用“Expanding”
+    QSizePolicy sizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
+    dialog->setSizePolicy(sizePolicy);
+    dialog->setMinimumSize(QSize(dialog_w_, dialog_h_));
+
+    QVBoxLayout *main_v_layout;
+    main_v_layout = new QVBoxLayout(dialog);//只有这个布局需要传入主窗口对象，表示这个布局是管理窗口的布局
+    main_v_layout->setObjectName(QString::fromUtf8("verticalLayout"));
+    main_v_layout->setSpacing(0);//设置布局内的布局与布局之间或控件与控件之间的距离
+    main_v_layout->setContentsMargins(0, 0, 0, 0);//设置主窗口dialog与此主布局之间的margin
+
+    QHBoxLayout *video_h_layout;
+    video_h_layout = new QHBoxLayout();//其他的子布局 ，不要传入主窗口的对象
+    video_h_layout->setObjectName(QString::fromUtf8("video_h_layout"));
+
+    //video
+    MyVideoWidget *my_video_widget_p;
+    my_video_widget_p = new MyVideoWidget();
+    my_video_widget_p->setObjectName(QString::fromUtf8("my_video_widget_p"));
+   // QSizePolicy video_view_size_policy(QSizePolicy::Expanding, QSizePolicy::Expanding);
+   // my_video_widget_p->setSizePolicy(video_view_size_policy);
+    video_h_layout->addWidget(my_video_widget_p);
+
+    QHBoxLayout *toolbar_h_layout;
+    toolbar_h_layout = new QHBoxLayout();//其他的子布局 ，不要传入主窗口的对象
+    toolbar_h_layout->setObjectName(QString::fromUtf8("horizontalLayout_2"));
+    toolbar_h_layout->setSpacing(6); //设置控件与控件之间的距离
+    toolbar_h_layout->setContentsMargins(6, 3, 6,3);//设置各个边单独的 margin距离
+
+    //tool bar
+    //range
+    MyRangeSlider *myrange_slider_p;
+    myrange_slider_p = new MyRangeSlider();//不需要传入父窗口对象
+    myrange_slider_p->setObjectName(QString::fromUtf8("myrange_slider_p"));
+    myrange_slider_p->setMaximumHeight(24);
+    myrange_slider_p->setMinimumHeight(24);
+    myrange_slider_p->setMinimumWidth(100);
+
+    //tool bar rocord btn
+    QPushButton *record_btn_p;
+    record_btn_p = new QPushButton();//不需要传入父窗口对象
+    record_btn_p->setObjectName(QString::fromUtf8("record_btn_p"));
+    record_btn_p->setFocusPolicy(Qt::NoFocus);
+    record_btn_p->setFlat(true);
+    record_btn_p->setMinimumSize(QSize(28, 28));
+    record_btn_p->setMaximumSize(QSize(28, 28));
+    record_btn_p->setStyleSheet("QPushButton{border-image: url(:/img/image/record.png);}"
+                                      "QPushButton:hover{border-image: url(:/img/image/rightcheck.png);}"
+                                      "QPushButton:pressed{border-image: url(:/img/image/pause.png);}");
+
+    //tool bar ok btn
+    QPushButton *ok_btn_p;
+    ok_btn_p = new QPushButton();//不需要传入父窗口对象
+    ok_btn_p->setObjectName(QString::fromUtf8("ok_btn_p"));
+    ok_btn_p->setMinimumSize(QSize(28,28));
+    ok_btn_p->setMaximumSize(QSize(28, 28));
+    ok_btn_p->setStyleSheet("QPushButton{border-image: url(:/img/image/record.png);}"
+                                      "QPushButton:hover{border-image: url(:/img/image/rightcheck.png);}"
+                                      "QPushButton:pressed{border-image: url(:/img/image/pause.png);}");
+
+    toolbar_h_layout->addWidget(myrange_slider_p);
+    toolbar_h_layout->addWidget(record_btn_p);
+    toolbar_h_layout->addWidget(ok_btn_p);
+    toolbar_h_layout->setStretch(0, 8);
+    toolbar_h_layout->setStretch(1, 1);
+    toolbar_h_layout->setStretch(2, 1);
+
+    main_v_layout->addLayout(video_h_layout);
+    main_v_layout->addLayout(toolbar_h_layout);
+    //由于控件自己支持延展因此不需要如下设置
+  //  main_v_layout->setStretch(0, 5);//设置第一个添加的布局的比例
+   // main_v_layout->setStretch(1, 5);//设置第二个添加的布局的比例
+
+
+    //直接把这两个背景分别设置到 video_h_layout 和 toolbar_h_layout
+    //就可以看到 main_v_layout->setStretch的效果了
+    /*
+    QWidget *video_h_layout_bg = new QWidget();
+    video_h_layout_bg->setObjectName("video_h_layout_bg");
+    video_h_layout_bg->setProperty("video-bg", true);
+    video_h_layout_bg->setStyleSheet("QWidget[video-bg=\"true\"] {background-color: #ff0000;}");
+    video_h_layout->addWidget(video_h_layout_bg);
+
+
+    QWidget *toolbar_h_layout_bg = new QWidget();
+    toolbar_h_layout_bg->setObjectName("toolbar_h_layout_bg");
+    toolbar_h_layout_bg->setProperty("toolbar-bg", true);
+    toolbar_h_layout_bg->setStyleSheet("QWidget[toolbar-bg=\"true\"] {background-color: #00ff00;}");
+    toolbar_h_layout->addWidget(toolbar_h_layout_bg);
+    */
+
+
+
+    RetranslateUi(dialog);
+
+    QMetaObject::connectSlotsByName(dialog);
+}
+
+void CaptureVideoDialog::RetranslateUi(QDialog *dialog) {
+    dialog->setWindowTitle(QApplication::translate("CaptureVideoDialog", "CaptureVideoDialog"));
+
+}
+
+
+

res/image/area.png

@@ -0,0 +1,45 @@
+
+
+#ifndef CAPTURE_VIDEO_DIALOG_H
+#define CAPTURE_VIDEO_DIALOG_H
+
+#include <QApplication>
+#include <QDialog>
+#include <QPushButton>
+#include <QLabel>
+#include <QVBoxLayout>
+#include <QPushButton>
+#include <QSlider>
+
+
+
+#include "../../views/myvideowidget.h"
+#include "../../views/myrangeslider.h"
+
+class CaptureVideoDialog: public QDialog
+{
+    Q_OBJECT
+public:
+    explicit CaptureVideoDialog(QWidget *parent = nullptr);
+    ~CaptureVideoDialog();
+
+private:
+    void SetupUI(QDialog *dialog);
+    void RetranslateUi(QDialog *dialog);
+
+private:
+
+
+private slots:
+    //函数名规则：on_子对象名_信号名
+
+
+private:
+    const int dialog_w_ = 280;
+    const int dialog_h_ = 180;
+
+private:
+
+};
+
+#endif // CAPTURE_VIDEO_DIALOG_H