2. 程式人生 > >自定義日曆(四)-區間選擇控制元件

自定義日曆(四)-區間選擇控制元件

阿新 • • 發佈：2019-11-02

目錄

  • 一、概述
  • 二、效果展示
  • 三、整體結構
  • 四、分析實現
    • 1、QPickDate
    • 2、QDatePanel
    • 3、QDateWidget、QDateContent
    • 4、 排程繪製
  • 五、相關文章

原文連結：自定義日曆(四)-區間選擇控制元件

一、概述

很早很早以前，寫過幾篇關於日曆的文章，不同於Qt原生的控制元件，這些控制元件都是博主使用自繪的方式進行完成，因此可定製性更強一些，感興趣的可以參考自定義日曆(一)、自定義日曆(二)和自定義日曆(三))。

本篇文章還是繼續來寫我們的日曆控制元件，仍然採用自繪的方式，帶來更加炫酷的效果。看本文的標題就應該就能明白，這次實現的是一個可以區間選擇的日曆控制元件。

二、效果展示

效果圖如下，一個簡單的效果展示。

日曆控制元件與Qt原生的QDateEdit一樣，是由一個按鈕進行觸發，彈出如期選擇面板。不同的是這個日曆選擇面板由2個小的日期面板組成，分別是開始和結束日期，規則如下：

  1. 開始日期必須小於結束日期
  2. 頂部有快速返回按鈕
  3. 選中的日期段上有高亮背景色
  4. 選中的日期點上有藍色圓形標識
  5. 點選確定按鈕以後日期選擇面板關閉

三、整體結構

開始講解具體內容之前，先來看下整體的結構劃分，實現這個日期段選擇控制元件，總共需要以下4個類，下圖是工程結構

以下是4個類的說明

  1. QDateContent：單個日曆視窗
  2. QDateWidget：包含了年月選擇的單個日曆視窗
  3. QDatePanel：日期段選擇面板
  4. QPickDate：日期選擇按鈕，用於撥出日期選擇面板

其中QPickDate類就是對外使用的類，使用也很簡單，可能像下面這樣

QPickDate * pickDate = new QPickDate;
pickDate->SetQuickValue(QDatePanel::DAY_ONE);

意思是構造一個日期段選擇空間，然後初始時為選擇當天。有了一個大致的瞭解後，下面開始詳細的講解每個類的實現過程

四、分析實現

1、QPickDate

QPickDate類是對外匯出類，也是我們使用的時候需要了解的類，他的標頭檔案實現如下

class QPickDate : public QPushButton
{
    Q_OBJECT

public:
    QPickDate(QWidget * parent = nullptr);
    ~QPickDate();

signals:
    void PickSuccess();//選擇日期成功時呼叫

public:
    void SetQuickValue(QDatePanel::QuickPick pick);
    void GetStartDate(unsigned short year, unsigned short month, unsigned short day);
    void GetEndDate(unsigned short year, unsigned short month, unsigned short day);

private slots:
    void OnClicked();

private:
    void InitializeUI();

private:
    QDatePanel::QuickPick m_ePick = QDatePanel::DAY_CUSTOM;
    QDatePanel * m_pPanel = nullptr;
};

介面看起來也比較簡單，SetQuickValue介面上一小節使用過，主要是用來初始化日期控制元件狀態。GetStartDate和GetEndDate介面主要就是獲取日期段的開始時間和結束時間。其中的實現具體的日期資料是從成員變數QDatePanel中獲取。

2、QDatePanel

如下是QDatePanel的標頭檔案宣告，由於程式碼量的問題，其中精簡了一部分，QDatePanel這個類就是日期選擇面板，垂直方向由三部分組成，分別是快速選擇、日期選擇和操作按鈕

class QDatePanel : public QFrame
{
    ...
public:
    enum QuickPick
    {
        DAY_ONE,//今天
        DAY_WEEK,//近一週
        DAY_MONTH,//近一月
        DAY_YEAR,//近一年
        DAY_CUSTOM,//自定義
    };

signals:
    void PickSuccess(QuickPick, const QString &);
    ...
public:
    QString GetQuickName(QuickPick pick);
    void SetQuickValue(QuickPick pick);
    void GetStartDate(unsigned short year, unsigned short month, unsigned short day);
    void GetEndDate(unsigned short year, unsigned short month, unsigned short day);

private:
    ...
};

快速選擇：可以快速選擇一日、一週、一月和一年時間段

日期選擇：分為左右結構，左側時其實日期，右側時結束日期

操作按鈕：選擇好日期後，可以通過點選確定或者取消來關閉面板

3、QDateWidget、QDateContent

上邊說了QDatePanel是日期選擇面板，其中日期選擇部分就是由左右兩部分組成，其實分別就是一個QDateWidget，如下圖所示

QDateContent類是主要的日期計算和繪製類，被QDateWidget包裹了一層，並新增上了年和月的操作按鈕。

下面主要介紹下QDateContent類的實現，首先來看下宣告檔案

由於篇幅原因還是註釋了一大部分程式碼

class QDateContent : public QWidget
{
    ...
signals:
    void DateClicked(unsigned short year, unsigned short month, unsigned short day);

public:
    void SetSelectDate(unsigned short year, unsigned short month, unsigned short day);
    void GetSelectDate(unsigned short & year, unsigned short & month, unsigned short & day);
    void SetDate(unsigned short year, unsigned short month, unsigned short day);
    void GetDate(unsigned short & year, unsigned short & month, unsigned short & day);

    //設定關聯日期
    void SetRelationDate(QDateContent * content);

public slots :
    void PreviousMonth();//上一月
    void NextMonth();//下一月
    void PreviousYear();//上一年
    void NextYear();//下一年
    ...
private:
    struct QDateContentPrivate;
    QDateContentPrivate * d_ptr;
};

切換月份和年份的介面程式碼中已經包含了註釋，其他Set和Get介面看名稱基本也能明白，QDateContent類的程式碼量還是比較大的，下面我們主要來看繪製部分，其中有3個比較重要的點繪製頭、繪製數字和繪製選中。

繪製頭

該繪製模組主要是繪製表頭，也就是週日、週一這樣的欄位，繪製的位置時通過私有函式GetColumnLeft和GetColumnRight獲取。

void QDateContent::DrawWeek(QPainter & painter)
{
    //  QString aText[7] = { STR("週日"), STR("週一"), STR("週二"), STR("週三"), STR("週四"), STR("週五"), STR("週六") };
    QString aText[7] = { STR("日"), STR("一"), STR("二"), STR("三"), STR("四"), STR("五"), STR("六") };

    painter.save();
    painter.setFont(d_ptr->weekFont);
    QFontMetrics fm(d_ptr->weekFont);
    int height = fm.height();

    //painter.fillRect(d_ptr->GetColumnLeft(0), d_ptr->topBorder, d_ptr->GetColumnRight(6) - 3, d_ptr->topBorder + height, QColor(20, 22, 23));

    for (int i = 0; i < 7; ++i)
    {
        int left = d_ptr->GetColumnLeft(i);
        int right = d_ptr->GetColumnRight(i);
        QRect rect(left, d_ptr->topBorder, right - left, height);
        painter.setPen(QColor("#838D9E"));

        painter.drawText(rect, Qt::AlignCenter, aText[i]);
    }

    painter.restore();
}

繪製數字

繪製數字和繪製標題原理基本一致，位置資訊都是使用GetColumnLeft和GetColumnRight獲取，不同的是，繪製數字時還需要繪製額外的選中狀態、懸浮狀態

由於是繪製函式，因此有一些資料計算是通過整理好的，比如說需要繪製的數字，當前行數和當月第一天周幾等等

由於繪製篇幅原因，還是隻保留主要邏輯

void QDateContent::DrawDay(QPainter & painter)
{
    painter.save();

    for (int column = 0; column < d_ptr->m_column_count; ++column)
    {
        int column_left = d_ptr->GetColumnLeft(column);
        int column_right = d_ptr->GetColumnRight(column);
        for (int row = 0; row < d_ptr->m_row_count; ++row)
        {
            int index = row * d_ptr->m_column_count + column;
            QRect & rcTmp = d_ptr->m_aRect[index];
            tDayFlag & flag = d_ptr->m_aDayFlag[index];
            flag.m_chEnable = (column != 0 && column != 6) ? true : false;

            bool selected = d_ptr->MatchRealDate(flag);
            if (selected)
            {
                QPainterPath path;
                path.addEllipse(QRectF(rcTmp).center(), 12, 12);
                painter.fillPath(path, QColor("#218CF2"));
            }

            painter.drawText(rcTmp, Qt::AlignCenter, QString::number(flag.m_chFlagD));

            painter.restore();
        }
    }

    painter.restore();
}

繪製選中

以下程式碼是繪製選中時的水平背景色，繪製程式碼比較簡單，複雜的地方主要有2個：

  1. 計算當前日期是否在選擇日期段當中，返回status
  2. 修正第一步返回的status

由於繪製篇幅原因，還是隻保留主要邏輯

以下程式碼是精簡過後的繪製選中背景色，看起來還是很長，不過大體上是分下面這幾步

  1. 根據當前年月日返回status，表示當前day是否在選擇的開始和選擇的結束日期之間
  2. 根據所處列和day修改第一步返回的status
  3. 根據status調整要繪製的形狀
  4. 繪製背景色

下面是主要的繪製流程，程式碼就不細講了，大家可以自行閱讀

void QDateContent::DrawSelectedBackground(QPainter & painter)
{
    painter.save();

    for (int column = 0; column < d_ptr->m_column_count; ++column)
    {
        for (int row = 0; row < d_ptr->m_row_count; ++row)
        {
            tDayFlag & flag = d_ptr->m_aDayFlag[index];

            if (little)
            {
                status = d_ptr->GetSelectedStatus(d_ptr->m_wYear, d_ptr->m_wMonth, d_ptr->m_wDay, d_ptr->m_sYear
                    , d_ptr->m_sMonth, flag.m_chFlagD, year, month, day);
            }
            else
            {
                status = d_ptr->GetSelectedStatus(year, month, day, d_ptr->m_sYear
                    , d_ptr->m_sMonth, flag.m_chFlagD, d_ptr->m_wYear, d_ptr->m_wMonth, d_ptr->m_wDay);
            }

            //修正資料
            CorrentStatus(status, column, flag.m_chFlagD);

            if (status == 0)
            {
                continue;
            }
            QRect rect = rcTmp.adjusted(0, 3, 0, -3);
            if (rect.height() < 15)
            {
                rect.setHeight(15);
                rect.moveCenter(rcTmp.center());
            }
            if (status == 2)
            {
                rect.adjust(-4, 0, 4, 0);
                painter.drawRect(rect);
            }
            else if (status == 1)//只有左半邊
            {
                rect.adjust(-4, 0, -4, 0);
                painter.drawRoundedRect(rect, rect.height() / 2, rect.height() / 2);
                painter.drawRect(rect.adjusted(0, 0, -rect.height() / 2, 0));
            }
            else if (status == 3)
            {
                rect.adjust(4, 0, 4, 0);
                painter.drawRoundedRect(rect, rect.height() / 2, rect.height() / 2);
                painter.drawRect(rect.adjusted(rect.height() / 2, 0, 0, 0));
            }
            else if (status == 5)
            {
                rect.adjust(4, 0, -4, 0);
                painter.drawRoundedRect(rect, rect.height() / 2, rect.height() / 2);
            }
        }
    }

    painter.restore();
}

4、 排程繪製

最後就是繪製的順序，這裡一定要注意，一定得線繪製背景色，如果是最後繪製的話會擋住當前繪製的文字和選中狀態。

void QDateContent::paintEvent(QPaintEvent * event)
{
    QDate date = QDate::currentDate();
    d_ptr->m_tYear = date.year();
    d_ptr->m_tMonth = date.month();
    d_ptr->m_tDay = date.day();

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    //painter.drawRect(rect());

    d_ptr->ResetDayFlag();

    DrawSelectedBackground(painter);

    DrawWeek(painter);

    DrawDay(painter);
}

五、相關文章

自定義日曆(一)

自定義日曆(二)

自定義日曆(三))

Qt之模擬視窗失去焦點隱藏

值得一看的優秀文章：

  1. 財聯社-產品展示
  2. 廣聯達-產品展示
  3. Qt定製控制元件列表
  4. 牛逼哄哄的Qt庫





如果您覺得文章不錯，不妨給個打賞，寫作不易，感謝各位的支援。您的支援是我最大的動力，謝謝！！！













很重要--轉載宣告

  1. 本站文章無特別說明，皆為原創，版權所有，轉載時請用連結的方式，給出原文出處。同時寫上原作者：朝十晚八 or Twowords

  2. 如要轉載，請原文轉載，如在轉載時修改本文，請事先告知，謝絕在轉載時通過修改本文達到有利於轉載者的目的。

相關推薦

自定義日曆(四)-區間選擇控制元件

目錄 一、概述 二、效果展示 三、整體結構 四、分析實現 1、QPickDate 2、QDatePanel 3、QDateWidget、QDateContent

自定義Android日期時間選擇控制元件DateTimePickerDialog

ad = new AlertDialog.Builder(activity).setIcon(R.drawable.datetimeicon).setTitle(initDateTime).setView(dateTimeLayout).setPositiveButton("設定",

iOS 自定義日期和資料來源選擇控制元件

需求 App開發中經常會有日期選擇（如生日、睡眠定時等）或者省市區選擇等此類功能，通常UI中不會單獨使用UI中的控制元件，而是在UIPickerView的基礎上增加一個取消和確定按鈕 特點 支援常見的選擇型的資料格式 該控制元件集成了 yyyy-M

安卓自定義View進階-特殊控制元件的事件處理方案

本文帶大家瞭解 Android 特殊形狀控制元件的事件處理方式，主要是利用了 Region 和 Matrix 的一些方法，超級實用的事件處理方案，相信看完本篇之後，任何奇葩控制元件的事件處理都會變得十分簡單。 不得不說，Android 對事件體系封裝的非常棒，即便對事件體系不太

【轉載】SAP OO ALV 在自定義螢幕上新增ALV控制元件 一個螢幕上使用2個ALV

終於完成了 OO ALV的學習，第一個作品。 一個螢幕上放了2個ALV控制元件，上面用來顯示錶頭，下面用來顯示詳細的行專案。 業務背景： 在汽車的售後服務環節，汽車零件在質保期內損壞，維修產生的費用，整車廠會追溯到零件供應商索取。 資料模型簡介： 三包索賠單資料從銷售系統中傳入ERP系統。

Android 自定義Dialog 裡面有EditText控制元件點選關閉輸入法失效的問題

在做一個專案的時候，自定義額了一個Dialog 裡面有取消，儲存按鈕，以及EditText，在輸入法彈出的時候，點選取消按鈕，自定義dialog對話方塊關閉了，但是輸入法始終關閉不了，在網上找了很多方法，都不能很好的解決，輸入法不能關閉的問題。    最好找到的解決辦法是

VB.NET學習筆記：WinForm自定義DataGridView分頁組合控制元件

測試環境：windows 7和Microsoft Visual Studio 2015 點選下載本文資源 VB.NET雖然提供了大量控制元件供我們使用，但很多控制元件僅提供最基礎的功能。比如用DataGridView控制元件可以非常方便顯示或操作資料庫資料， 但卻沒有分頁功能。本文

自定義View之驗證碼控制元件

先上圖鎮貼 最近專案中有需要驗證碼，不過Android端的驗證碼一般都是手機簡訊，點選獲取驗證碼，將請求向後臺以及向簡訊驗證碼平臺傳送。簡訊平臺將驗證碼傳送到前端及後臺，讓前端輸入驗證碼和後臺進行比較。驗證碼的存在就是提高安全性，即使拿到賬戶和密碼，也無法登陸。因為驗證碼是隨機性的，唯

Android 自定義可拖動尺子控制元件

之所以要寫這個控制元件，是一朋友面試時候被問到了，自己覺得好玩就琢磨了一下！廢話不多說先看效果圖是不是想要的效果 因為自己不會弄動態圖所以就截了一張圖，這個控制元件是可以左右拖動的！！好了，直接上程式碼吧！ 首先是建立一個類繼承View，重寫三個構造方法，預設呼叫第三個

Android進階——自定義View之擴充套件系統控制元件的另一種思路實現漸變文字動畫的TextView

引言 前面幾篇文章 繼承或組合系統現有控制元件實現新控制元件，擴充套件新功能都是在對應的構造方法中去擴充套件的，但千萬不要把思路侷限於只能在構造方法中去擴充套件，這篇就簡單地分享另一種思路，通過重寫對應的週期方法實現擴充套件。 一、View中幾種重

WPF新手之將如何將一個成員變數或自定義類繫結到控制元件

（再次嘆一下中國的網路環境，搜出來的網頁一大堆，可有用的沒幾個，基本是大家相互轉，真正有了問題楞是找不到能解決的） 首先如果是基本型別的變數，或者是自定義的類，直接繫結到控制元件之後，控制元件只能顯示其初始值，值的改變並不能更新UI，只有以下兩種情況的繫結：①繫結到某個控制

Android自定義View圓盤滑動控制元件（已適配多種解析度）

好久沒寫部落格了，最近在寫一個專案時需要一個可以調節檔位的圓盤， 首先實現這個圓盤自定義View，首先在構造方法中定義畫筆，重寫onDraw(Canvas canvas)方法，進行繪製，首先繪製一個大圓，然後我這個大圓周圍的錶盤顯示一共有9個檔位，為了美觀，每個

【仿汽車之家】價格區間選擇控制元件

為了響應使用者的拖動手勢，給兩個把手（UIIMageView）分別新增滑動手勢識別（UIPanGestureRecognizer）。我們在setUpView中繼續新增如下程式碼 -(void)setUpView{ ….…. //給左把手新增滑動手勢識別 UIPanG

Android進階——自定義View之組合系統控制元件實現水珠形狀的ItemView

引言 相信大家在專案開發的過程中一定會有不少需要在上方顯示一張圖片，而在其下方顯示提示標題的效果，作為一個介面的功能按鈕或者單純作為一個列表的item項，尤其是當這個item還需要顯示一些動畫效果時候，此時更應該當成一個整體，否則動畫效果就會需要額外的調整，否

iOS 自定義圖片無限輪播控制元件

一：簡介 圖片輪播功能在App中是一個非常常見的功能，即允許定時滾動，也允許拖拽滾動，也可以點選每張圖片觸發事件。 二：實現方式 圖片輪播功能的實現方式有很多中， UIScrollView + N個UIImageView UIScrol

Android程式碼中設定圖片，文字自定義顏色，Linearlayout等控制元件設定背景

平時專案中遇到的問題，在此記錄警示自己，也可使別人少走彎路。 ————–> 1. 程式碼中設定圖片,使用iv.setImageResource(R.mipmap.yishenghuo2);

Android UI-自定義日曆控制元件

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

[Xcode10 實際操作]四、常用控制元件-(5)UILabel文字標籤自定義文字樣式

本文將演示給標籤物件新增描邊效果，在專案資料夾上，點選滑鼠右鍵選單， 選擇【Create File】->【Cocoa Touch Class】->【Next】-> 【Class】：MyLabel 【Subclass of 】：UILabel 【Language】：Swift -&g

jquery.mobiscroll 適合移動端使用的滑動選擇控制元件 -- 自定義選項示例

mobiscroll ： 滑動選擇 2.13.2版本免費，官網（mobiscroll.com）收費 另外官方還有線上例子： 下載完成後，保留mobiscroll-2.13.2.full.min.css，mobiscroll-2.13.2.full.min.j

小程式自定義城市選擇控制元件

效果圖： 介紹： 對於微信小程式，微信提供了一個滾動選擇器和自身的城市滾動選擇器，但是開發中難免存在一些自定義的樣式，這時候就要自己來定義了。下面我來簡單介紹一下怎麼自定義: 1，首先微信提供了一個