SARibbon

中文档点击这里,QQ群:434014314

	Windows (2019 ล่าสุด)	Linux Ubuntu (20.04 ล่าสุด)	Mac (11-ล่าสุด)
Qt5.12
Qt5.13
Qt5.14
Qt5.15
Qt6.0
Qt6.1
Qt6.2
Qt6.3
Qt6.4
Qt6.5
Qt6.6

รู้เบื้องต้นเกี่ยวกับ SARibbon

นี่คือ Ribbon control ภายใต้กรอบงาน Qt ซึ่งมีอินเทอร์เฟซคล้ายกับซอฟต์แวร์ Microsoft Office SARibbon เหมาะสำหรับซอฟต์แวร์ขนาดใหญ่ ซอฟต์แวร์อุตสาหกรรม และ UI ของซอฟต์แวร์ที่ซับซ้อน SARibbon ได้รับการออกแบบโดยอ้างอิงถึงรูปแบบการตั้งชื่อของอินเทอร์เฟซ MFC Ribbon และรูปแบบอินเทอร์เฟซของ SARibbon อ้างอิงถึงอินเทอร์เฟซ Ribbon ของซอฟต์แวร์ชุด Microsoft Office และซอฟต์แวร์ WPS และผสมผสานข้อดีของทั้งสองอย่างเข้าด้วยกัน SARibbon เป็นวิดเจ็ต Ribbon ที่สามารถกำหนดสไตล์ธีมได้หลากหลาย และสามารถกำหนดสไตล์ธีมที่คุณต้องการได้อย่างรวดเร็วผ่าน qss เพื่ออำนวยความสะดวกในการพัฒนาซอฟต์แวร์ขนาดใหญ่ SARibbon ได้สรุปการควบคุมการทำงานบางอย่างที่ใช้กันทั่วไป เช่น วิดเจ็ตสี

คุณสมบัติ

• เค้าโครงและการแสดงผลสำหรับ Ribbon

• รองรับโหมดการย่อขนาด Ribbon จะแสดงเฉพาะแท็บ (การดับเบิลคลิกตามค่าเริ่มต้นบนแท็บจะเปลี่ยน)

• รองรับ QuickAccessBar (เมนูด่วนของ Word) ซึ่งจะมีผลการแสดงผลที่แตกต่างกันในโหมดเค้าโครงที่แตกต่างกัน

• รองรับปุ่มริบบอนที่แตกต่างกัน 4 ปุ่ม: ปุ่มปกติ, ปุ่มเมนูป๊อปอัพหน่วงเวลา, ปุ่มเมนู, ปุ่มเมนูการกระทำ

• มีเค้าโครงริบบิ้นให้เลือก 4 สไตล์ที่แตกต่างกัน

• รองรับ QSS เพื่อปรับแต่ง Ribbon คุณสามารถสลับธีมได้แบบเรียลไทม์ และมีธีมในตัวให้เลือก 5 สไตล์

ธีม win7: ธีม office2013: ธีม office2016: ธีม office2021: ธีมสีเข้ม:

• ให้การควบคุมแกลเลอรี

• รองรับการเลื่อนแบบยาวและการดำเนินการของตัวเลือก

• ให้โหมดการจัดตำแหน่งกึ่งกลาง

• รองรับหน้าจอ 4K และหลายหน้าจอ
• รองรับลินุกซ์และ MacOS

โปรโตคอล MIT ยินดีต้อนรับทุกคนใช้และแสดงความคิดเห็น

gitee - https://gitee.com/czyt1988/SARibbon

GitHub - https://github.com/czyt1988/SARibbon

สร้าง

SARibbon จัดเตรียมทั้งวิธีการสร้าง qmake และ cmake และจัดเตรียมไฟล์ SARibbon.h และ SARibbon.cpp ที่รวมกันสำหรับการฝังแบบคงที่ลงในโปรเจ็กต์เดียว

SARibbon รองรับไลบรารีของบริษัทอื่น QWindowKit ในเวลาเดียวกัน ยังรองรับโซลูชันแบบไร้กรอบที่เรียบง่ายอีกด้วย หากคุณต้องการการรองรับหน้าต่างดั้งเดิมสำหรับระบบปฏิบัติการ เช่น การตัดขอบหลัง Windows 7 และการเพิ่มเอฟเฟกต์การโฮเวอร์ของปุ่มให้สูงสุดใน Windows 11 ขอแนะนำให้เปิดใช้งาน QWindowKit Library ซึ่ง QWindowKit Library สามารถแก้ปัญหาการเคลื่อนที่หลายหน้าจอได้ดีขึ้น

หากคุณต้องการใช้ QWindowKit Library จะต้องคอมไพล์ไลบรารี QWindowKit ก่อน QWindowKit เป็นโมดูลย่อยของโปรเจ็กต์ SARibbon หากพารามิเตอร์ '-- recursive' ไม่รวมอยู่ใน 'git clone' คำสั่ง 'submodules update' จำเป็นต้องดำเนินการ:

git submodule update --init --recursive

คอมไพล์ไปยังไลบรารีแบบไดนามิก

สำหรับขั้นตอนการสร้างโดยละเอียด โปรดดูเอกสาร: การสร้าง SARibbon

การฝัง SARibbon ลงในโครงการโดยตรง

SARibbon มีไฟล์ SARibbon.h และไฟล์ SARibbon.cpp รวมกัน คุณจะต้องนำเข้าไฟล์ทั้งสองนี้ในโปรเจ็กต์ของคุณเอง และในขณะเดียวกันก็นำเข้าไฟล์ทรัพยากรและไฟล์ไลบรารีของบริษัทอื่นเพื่อใช้ โดยไม่จำเป็นต้องคอมไพล์ลงในไลบรารีแบบไดนามิก หรือไลบรารีแบบคงที่ คุณสามารถอ้างถึงตัวอย่าง StaticExample (อยู่ใน src/example/StaticExample ) การฝังแบบคงที่จะถูกใช้เพื่อ SARibbon.h , SARibbon.cpp , SARibbon.pri , SARibbonBar/resource.qrc และ SARibbonBar/3rdparty , SARibbonBar/resource สองโฟลเดอร์:

ไดเร็กทอรีโครงการของคุณจะมีลักษณะดังนี้:

 |-you-project-dir
|  |-you-project.pro
|  |-SARibbon.h
|  |-SARibbon.cpp
|  |-SARibbon.pri
|  |-SARibbonBar
|     |-resource.qrc
|     |-resource(Directly copy the resource under SARibbonBar in its entirety)
|        |-resource files

หากต้องการคอมไพล์ด้วย qmake คุณสามารถทำตามขั้นตอนด้านล่าง:

• 1. คัดลอก SARibbon.h , SARibbon.cpp , SARibbon.pri ไปยังไดเร็กทอรีโครงการของคุณ
• 2. สร้างโฟลเดอร์ SARibbonBar ในไดเรกทอรีโครงการของคุณ
• 3. คัดลอกไฟล์ src/SARibbonBar/resource.qrc ในซอร์สโค้ดไปยังโฟลเดอร์ SARibbonBar ในไดเร็กทอรีโปรเจ็กต์ของคุณ
• 4. คัดลอกโฟลเดอร์ resource ภายใต้ src/SARibbonBar ไปยังโฟลเดอร์ SARibbonBar ในไดเรกทอรีโครงการของคุณ
• 5. นำเข้าไฟล์ SARibbon.pri ลงในไฟล์ pro ของโปรเจ็กต์ของคุณ เช่น include($$PWD/SARibbon.pri)

หากคุณใช้ cmake ให้อ้างอิงถึงวิธีการเขียน cmake ของตัวอย่าง StaticExample (อยู่ใน src/example/StaticExample )

วิธีใช้:

นำเข้าห้องสมุด

หลังจากการคอมไพล์เสร็จสิ้น ให้นำเข้า SARibbon ดังนี้:

คิวเมค

หากคุณใช้ qmake คุณสามารถคัดลอกไฟล์ต่อไปนี้ลงในโปรเจ็กต์ของคุณในโครงสร้างไดเร็กทอรีได้หลังจากการคอมไพล์เสร็จสิ้น

สร้างโฟลเดอร์บุคคลที่สามในโปรเจ็กต์ของคุณก่อน จากนั้นคัดลอกโฟลเดอร์ SARibbon ทั้งหมด มีไฟล์ pri หลายไฟล์ภายใน SARibbon ที่สามารถให้คุณนำเข้าโปรเจ็กต์ไปยังไดเร็กทอรีของคุณเองได้อย่างง่ายดาย และไฟล์ ./importSARibbonBarLib.pri ถูกใช้เพื่อ นำเข้าไลบรารี SARibbon

หลังจากเสร็จสิ้นกระบวนการอุทธรณ์ คุณสามารถเพิ่มข้อความต่อไปนี้ลงในไฟล์ Qt project pro ของคุณได้

include( $$ PWD/3rdparty/SARibbon/importSARibbonBarLib.pri)

กระบวนการคอมไพล์ของ qmake จะสร้างโฟลเดอร์ bin_qtx.x_xx ภายใต้ SARibbon และไฟล์ไลบรารีและไฟล์ dll อยู่ในโฟลเดอร์นี้ และ importSARibbonBarLib.pri จะอ้างอิงไลบรารีในโฟลเดอร์นี้โดยอัตโนมัติ

ณ จุดนี้ ไดเรกทอรีโครงการของคุณมีลักษณะดังนี้:

 |-[you-project-dir]
|  |-you-project.pro
|  |-[3rdparty]
|     |-[SARibbon](Copy SARibbon in its entirety)
|        |-importSARibbonBarLib.pri
|        |-SARibbonBar.pri
|        |-common.pri
|        |-[bin_qtx.x.x_{MSVC/GNU}_x{32/64}]
|        |-[src]
|        |   |-[SARibbonBar]

cmake (แนะนำ)

ขอแนะนำให้ใช้ไลบรารีนี้หลังจากดำเนินการ install

วิธีการแนะนำ cmake:

 find_package (SARibbonBar REQUIRED)
...
target_link_libraries ({your_target_name} PUBLIC SARibbonBar::SARibbonBar)

หาก find_package ไม่พบ SARibbonBar คุณจะต้องแจ้งโปรเจ็กต์ cmake ของคุณเกี่ยวกับตำแหน่งการติดตั้ง SARibbon

 set(SARibbonBar_DIR "[your SARibbonBar installation root directory]/lib/cmake")

หากในระหว่างการคอมไพล์ ตัวเลือก SARIBBON_INSTALL_IN_CURRENT_DIR ถูกตั้งค่าเป็น ON (ค่าเริ่มต้น) โฟลเดอร์ bin_qt{Qt version}_{MSVC/GNU}_x{32/64} จะถูกสร้างขึ้นภายใต้ไดเร็กทอรีรากของโปรเจ็กต์ SARibbon เป็นไดเร็กทอรีการติดตั้ง นี่คือเพื่อให้สอดคล้องกับ qmake และอำนวยความสะดวกในการติดตั้ง Qt และคอมไพเลอร์หลายเวอร์ชันที่แตกต่างกันบนระบบปฏิบัติการเดียว มิฉะนั้น บน Windows จะถูกติดตั้งในโฟลเดอร์ C:Program FilesSARibbonBar ตามค่าเริ่มต้น

สำหรับการอ้างอิงในการแนะนำ SARibbon ผ่าน cmake โปรดดูที่ src/example/MainWindowExample/CMakeLists.txt

สำหรับรายละเอียด โปรดดูเอกสารประกอบ: อาคาร SARibbon

เริ่มต้นอย่างรวดเร็ว

Ribbon เป็นการผสมผสานระหว่างแถบเมนูและแถบเครื่องมือ และแสดงผ่านตัวควบคุมแท็บ Ribbon ไม่สามารถแทนที่ได้ง่าย ๆ ด้วย Tab+Toolbar ซึ่งเกี่ยวข้องกับรายละเอียดมากมาย SARibbon อ้างอิงถึงสไตล์การตั้งชื่อของอินเทอร์เฟซ MFC Ribbon ในการออกแบบ หน้าแท็บเรียกว่า Category และมีหลาย pannel ภายใต้แต่ละ Category ด้านล่างซึ่งจัดการปุ่มเครื่องมือ pannel จะคล้ายกับ Toolbar แบบดั้งเดิมเล็กน้อย โดยมีลำดับชั้นตามที่แสดงในภาพด้านล่าง และชื่อเหล่านี้อ้างอิงถึง คลาสอินเทอร์เฟซ Ribbon MFC

คำนามทั่วไปบางคำจะอธิบายไว้ด้านล่างนี้

• Category แสดงถึงสิ่งที่ป้ายกำกับนำเสนอ ซึ่งสอดคล้องกับ SARibbonCategory

• Context Category นี่เป็นหมวดหมู่พิเศษ มันไม่แสดงผลตามปกติ คุณต้องตัดสินใจว่าควรแสดงตามบริบทหรือไม่ วิธีที่พบบ่อยที่สุดคือหลังจากแทรกรูปภาพใน Word แล้ว ป้ายที่เกี่ยวข้องกับการแก้ไขรูปภาพจะปรากฏขึ้น หากไม่ได้เลือกรูปภาพ ป้ายกำกับจะหายไป นี่คือหมวดหมู่บริบท ซึ่งสอดคล้องกับ SARibbonContextCategory

• Pannel นี่คือชุดของเมนู เช่น แถบเครื่องมือ ที่สอดคล้องกับ SARibbonPannel

• ปุ่มแอปพลิเคชัน นี่คือปุ่มซ้ายสุดในแถบแท็บ (คำคือปุ่มไฟล์ที่เกี่ยวข้อง) ปุ่มนี้จะทริกเกอร์หน้าหรือเมนูพิเศษบางหน้าซึ่งสอดคล้องกับ SARibbonApplicationButton ซึ่งสามารถซ่อนได้

• Quick Access Bar แถบเครื่องมือธรรมดาที่ด้านบนสำหรับวางการกระทำทั่วไปที่สอดคล้องกับ SARibbonQuickAccessBar

• Gallery Control นี่คือการควบคุมริบบิ้นที่สะดุดตาที่สุด โดยจะแสดงฟังก์ชันต่างๆ ด้วยภาพที่ใช้งานง่าย และแม้แต่การเรนเดอร์บางส่วนก็ทำแบบเรียลไทม์ตามบริบท ตัวอย่างทั่วไปคือการเลือกสไตล์ในคำว่า office สอดคล้องกับ SARibbonGallery

เค้าโครงของ SARibbonBar แสดงในรูปด้านล่าง

หมายเหตุ: รูปแบบโครงร่างที่แตกต่างกันจะส่งผลต่อตำแหน่งของ Category และ Quick Access Bar

ใช้ Ribbon ในหน้าต่างหลัก

หากต้องการใช้ SARibbon ใน MainWindow คุณต้องแทนที่ QMainWindow ด้วย SARibbonMainWindow ซึ่งจะปรับเปลี่ยนวิธีที่ QMainWindow แสดงผลแถบเมนู

โปรดทราบว่าหากคุณใช้ไฟล์ UI คุณควรลบเมนูของไฟล์ UI มิฉะนั้นอาจทำให้เกิดข้อยกเว้นบางประการ

รหัสตัวอย่างจะเป็นดังนี้:

# include " SARibbonMainWindow.h "
class MainWindow : public SARibbonMainWindow
{
    Q_OBJECT
public:
    MainWindow (QWidget* par = nullptr );
    ...
}

SARibbonMainWindow ยังรองรับการเรนเดอร์โหมดปกติด้วยคอนสตรัคเตอร์ต่อไปนี้:

 SARibbonMainWindow (QWidget *parent = nullptr , bool useRibbon = true );

หากพารามิเตอร์ตัวที่สองถูกตั้งค่าเป็นเท็จ จะใช้โหมดแถบเครื่องมือเมนูปกติ อินเทอร์เฟซนี้สงวนไว้สำหรับบางโครงการที่ต้องสามารถสลับระหว่างฉากแถบเครื่องมือ Ribbon และเมนูคลาสสิก สถานะ Ribbon และสถานะคลาสสิกไม่รองรับ Hot Switching หากคุณต้องการเปลี่ยน คุณสามารถตั้งค่าไฟล์การกำหนดค่าหรือรีจิสตรี ส่งค่า false ไปยังพารามิเตอร์ตัวที่สองเมื่อรีสตาร์ทแอปพลิเคชันเพื่อเข้าสู่โหมดแถบเครื่องมือเมนูคลาสสิก

ใช้ SARibbonBar ใน QWidget หรือ QDialog

SARibbonBar สามารถใช้บน QWidget หรือ QDialog ดูตัวอย่าง： src/example/WidgetWithRibbon

สิ่งที่คุณต้องทำคือใช้ SARibbonBar เป็นวิดเจ็ตปกติ

ขั้นแรก ประกาศตัวชี้ของ SARibbonBar ในไฟล์ส่วนหัว

 private:
    Ui::Widget* ui;
    SARibbonBar* mRibbonBar { nullptr };

สร้าง SARibbonBar ในตัวสร้าง Widget มีเค้าโครง QVBoxLayout ในไฟล์ ui ของวิดเจ็ต วาง SARibbonBar ที่ด้านบนสุด และในเวลาเดียวกัน เนื่องจากโหมด QWidget ไม่จำเป็นต้องแสดงชื่อ คุณสามารถโทรได้ วิธีการ SARibbonBar::setTitleVisible เพื่อซ่อนชื่อเรื่อง applicationbutton สามารถยกเลิกได้ใน QWidget ผ่าน SARibbonBar::setApplicationButton หากไม่จำเป็น และสุดท้ายเนื่องจากธีมของ SARibbonBar ถูกตั้งค่าในเมธอด SARibbonMainWindow จึงสามารถตั้งค่าธีมใน QWidget ผ่านฟังก์ชันโกลบอล sa_set_ribbon_ theme

# include " SARibbonBar.h "
# include " SARibbonCategory.h "
# include " SARibbonPannel.h "
# include " SARibbonMainWindow.h "
Widget::Widget (QWidget* parent) : QWidget(parent), ui( new Ui::Widget)
{
    // Note: There is a QVBoxLayout layout in the ui file
    ui-> setupUi ( this );
    // Create SARibbonBar
    mRibbonBar = new SARibbonBar ( this );
    // there is no need to display the title anymore on QWidget
    mRibbonBar -> setTitleVisible ( false );
    // it is better to use compact mode directly on QWidget
    mRibbonBar -> setRibbonStyle (SARibbonBar::RibbonStyleCompactThreeRow);
    // cancel applicationbutton
    mRibbonBar -> setApplicationButton ( nullptr );
    // Set the theme, although SARibbonMainWindow is not used here, 
    // but the theme of the Ribbon is defined in SARibbonMainWindow, so SARibbonMainWindow.h should be introduced
    sa_set_ribbon_theme ( mRibbonBar , SARibbonMainWindow::RibbonThemeOffice2013);

    // QWidgets sets a QVBoxLayout and puts the window in the second layout of the QVBoxLayout, 
    // and the first layout is given to SARibbonBar, so that SARibbonBar will be on top
    ui-> verticalLayout -> insertWidget ( 0 , mRibbonBar );

    buildRibbon ( mRibbonBar );
}

นี่คือสิ่งที่ดูเหมือน:

สร้างหมวดหมู่และ Pannel

ลำดับของการสร้าง Ribbon คือการสร้างหมวดหมู่ จากนั้นเป็น Pannel และสุดท้ายคือปุ่มเครื่องมือ (การกระทำ)

ใช้ SARibbonBar::addCategoryPage เพื่อเพิ่มหมวดหมู่ให้กับ SARibbonBar, SARibbonCategory::addPannel เพื่อเพิ่มหมวดหมู่ และ SARibbonPannel::addAction เพื่อเพิ่มการดำเนินการให้กับ Pannel

รหัสต่อไปนี้สาธิตตัวอย่างของการเพิ่มการกระทำ:

 // Add main tab - The main tab is added through the addcategorypage factory function.
SARibbonCategory* categoryMain = ribbon-> addCategoryPage (tr( " Main " ));
 // Using the addpannel function to create saribponpannel. The effect is the same as that of new saribponpannel, and then call SARibbonCategory:: addpannel.
SARibbonPannel* pannel1 = categoryMain-> addPannel (( " Panel 1 " ));
QAction* actSave = new QAction( this );
actSave-> setText ( " save " );
actSave-> setIcon (QIcon( " :/icon/icon/save.svg " ));
actSave-> setObjectName ( " actSave " );
actSave-> setShortcut (QKeySequence(QLatin1String( " Ctrl+S " )));
pannel1-> addLargeAction (actSave);

การดำเนินการข้างต้นจะเพิ่มปุ่ม และเอฟเฟกต์จะแสดงในรูปต่อไปนี้:

คุณยังสามารถสร้างใหม่โดยตรงจาก SARibbonCategory และเพิ่มลงใน pannel และโค้ดต่อไปนี้จะมีลักษณะเหมือนกับโค้ดด้านบน:

SARibbonCategory* categoryMain = new SARibbonCategory(tr( " Main " ));
ribbon-> addCategoryPage (categoryMain);
SARibbonPannel* pannel1 = new SARibbonPannel( " Panel 1 " );
categoryMain-> addPannel (pannel1);
QAction* actSave = new QAction( this );
...
pannel1-> addLargeAction (actSave);

สไตล์เค้าโครงที่แตกต่างกันสามารถรวมกันผ่าน addLargeAction , addMediumAction , addSmallAction สำหรับรายละเอียด โปรดดูที่:

./src/example/MainWindowExample/mainwindow.cpp

หมวดหมู่บริบท

หมวดหมู่บริบทที่เรียกว่าหมายถึงป้ายกำกับ / กลุ่มป้ายกำกับที่ปรากฏภายใต้สถานการณ์พิเศษเท่านั้น ตัวอย่างเช่น เมื่อ office word เลือกรูปภาพ หมวดหมู่บริบทของการแก้ไขรูปภาพจะปรากฏขึ้น ดังแสดงในรูปต่อไปนี้:

คลาสที่สอดคล้องกับหมวดหมู่บริบทใน SARibbon คือ SARibbonContextCategory

หมวดหมู่บริบทมักจะถูกสร้างขึ้นเมื่อมีการเตรียมใช้งานโปรแกรม โดยปกติจะถูกซ่อนและแสดงเมื่อจำเป็นต้องแสดง หมวดหมู่บริบทถูกสร้างขึ้นดังนี้:

เนื่องจากจำเป็นต้องเรียกใช้หมวดหมู่บริบทเมื่อใช้ จึงเป็นทางเลือกที่ดีในการบันทึกด้วยตัวแปรสมาชิก แน่นอน คุณสามารถสำรวจการค้นหาได้ ( SARibbonBar::contextCategoryList สามารถระบุ SARibbonContextCategory ทั้งหมดได้)

ไฟล์ส่วนหัว:

SARibbonContextCategory* m_contextCategory;

ไฟล์ซีพีพี:

SARibbonBar* ribbon = ribbonBar();
// Create a contextCategory with random colors
m_contextCategory   = ribbon-> addContextCategory (tr( " context " ), QColor());
SARibbonCategory* contextCategoryPage1 = m_contextCategory-> addCategoryPage (tr( " Page1 " ));
// Operate on contextCategoryPage1
......
SARibbonCategory* contextCategoryPage2 = m_contextCategory-> addCategoryPage (tr( " Page2 " ));
// Operate on contextCategoryPage2
......

SARibbonCategory ที่สร้างโดย SARibbonContextCategory ได้รับการจัดการโดย SARibbonContextCategory เฉพาะเมื่อมีการแสดง SARibbonContextCategory เท่านั้น SARibbonCategory ที่มีการจัดการจะแสดงขึ้น

หมายเหตุ: SARibbonContextCategory ไม่ใช่วิดเจ็ต

เพื่อแสดงการใช้บริบท

SARibbonBar::showContextCategory / SARibbonBar::hideContextCategory :

 void MainWindow::onShowContextCategory ( bool on)
{
    if (on) {
        this -> ribbonBar ()-> showContextCategory (m_contextCategory);
    } else {
        this -> ribbonBar ()-> hideContextCategory (m_contextCategory);
    }
}

**หมายเหตุ: ** หากคุณต้องการลบ contextCategory คุณต้องเรียก SARibbonBar::destroyContextCategory แทนการลบโดยตรง หลังจากเรียก SARibbonBar::destroyContextCategory แล้ว คุณไม่จำเป็นต้องลบพอยน์เตอร์ของ ContextCategory

ContextCategory ที่แตกต่างกันมีสไตล์ที่แตกต่างกัน สำหรับรายละเอียด โปรดดู: [สไตล์ SARibbon](#สไตล์ SARibbon) และ [การเปรียบเทียบการแสดงผลภายใต้สไตล์ที่แตกต่างกัน](#การเปรียบเทียบการแสดงผลภายใต้สไตล์ที่แตกต่างกัน)

ApplicationButton

มีปุ่มพิเศษและชัดเจนที่เรียกว่า ApplicationButton ที่มุมซ้ายบนของอินเทอร์เฟซ Ribbon โดยทั่วไปปุ่มนี้ใช้เพื่อเรียกเมนูต่างๆ SARibbonBar สร้าง ApplicationButton ตามค่าเริ่มต้นระหว่างการก่อสร้าง คุณสามารถตั้งค่าข้อความได้ด้วยวิธีต่อไปนี้:

SARibbonBar* ribbon = ribbonBar();
ribbon-> applicationButton ()->setText(( " File " ));

applicationButton เริ่มต้นสืบทอดมาจาก SARibbonApplicationButton และ SARibbonApplicationButton สืบทอดมาจาก QPushButton ดังนั้นคุณจึงสามารถดำเนินการทั้งหมดบน QPushButton ได้ แน่นอน หากคุณต้องการตั้งค่าปุ่มของคุณเองเป็น applicationButton คุณสามารถเรียกใช้ฟังก์ชัน SARibbonBar::setApplicationButton ได้

QuickAccessBar และ RightButtonGroup

QuickAccessBar คือแถบเครื่องมือด่วนที่มุมซ้ายบน และ rightButtonGroup คือแถบเครื่องมือด่วนที่มุมขวาบน ในโหมดออฟฟิศจะแบ่งออกเป็นด้านซ้ายและด้านขวา ในโหมด WPS ด้านซ้ายและด้านขวาจะรวมกันและวางไว้ทางด้านขวา

ใน SARibbon :

• QuickAccessBar สอดคล้องกับคลาส SARibbonQuickAccessBar
• rightButtonGroup สอดคล้องกับคลาส SARibbonQuickAccessBar

ในระหว่างการเริ่มต้น SARibbonBar จะสร้าง QuickAccessBar และ RightButtonGroup ตามค่าเริ่มต้น พอยน์เตอร์สามารถรับได้ผ่าน SARibbonBar::quickAccessBar และ SARibbonBar::rightButtonGroup ตัวอย่างมีดังนี้:

QAction* MainWindow::createAction ( const QString& text, const QString& iconurl, const QString& objName)
{
    QAction* act = new QAction ( this );
    act-> setText (text);
    act-> setIcon ( QIcon (iconurl));
    act-> setObjectName (objName);
    return act;
}

void MainWindow::initQuickAccessBar (){
    SARibbonBar* ribbon = ribbonBar ();
    SARibbonQuickAccessBar* quickAccessBar = ribbon-> quickAccessBar ();
    quickAccessBar-> addAction ( createAction ( " save " , " :/icon/icon/save.svg " , " save-quickbar " ));
    quickAccessBar-> addSeparator ();
    quickAccessBar-> addAction ( createAction ( " undo " , " :/icon/icon/undo.svg " ), " undo " );
    quickAccessBar-> addAction ( createAction ( " redo " , " :/icon/icon/redo.svg " ), " redo " );
    quickAccessBar-> addSeparator ();
}
void MainWindow::initRightButtonGroup (){
    SARibbonBar* ribbon = ribbonBar ();
    SARibbonButtonGroupWidget* rightBar = ribbon-> rightButtonGroup ();
    QAction* actionHelp = createAction ( " help " , " :/icon/icon/help.svg " , " help " );
    connect (actionHelp, &QAction::triggered, this , &MainWindow::onActionHelpTriggered);
    rightBar-> addAction (actionHelp);
}

รูปแบบเค้าโครง SARibbonBar

SARibbon รองรับการสลับระหว่างสไตล์ริบบิ้นสี่แบบ ในที่นี้จะกล่าวถึงรูปแบบริบบิ้นของ office และ WPS การสลับสไตล์ออนไลน์สามารถทำได้ผ่าน void SARibbonBar::setRibbonStyle(RibbonStyle v)

โหมด office เป็นโหมด Ribbon ที่พบบ่อยที่สุด tab และแถบชื่อเรื่องใช้พื้นที่มากขึ้น โหมด Ribbon ที่ออกแบบโดย WPS ได้รับการปรับปรุง โดยจะลดความสูงของ Ribbon ฉลากและแถบชื่อเรื่องถูกตั้งค่าไว้ด้วยกัน เพื่อที่จะ ลดความสูงของแถบชื่อเรื่อง ใช้พื้นที่แนวตั้งอย่างมีประสิทธิภาพ และในขณะเดียวกัน เค้าโครงปุ่มของพาเนลก็เปลี่ยนจากสูงสุด 3 เป็น 2 บีบอัดพื้นที่แนวตั้งเพิ่มเติม

การเปรียบเทียบภาพหน้าจอระหว่างอินเทอร์เฟซคำของ office และอินเทอร์เฟซคำของ WPS

ภายใต้หน้าจอปกติ สไตล์ WPS จะลดความสูงในแนวตั้งลงอย่างน้อย 30 พิกเซล เมื่อเทียบกับสไตล์ Office ซึ่งเทียบเท่ากับการประหยัดพื้นที่แนวตั้งเกือบ 3% เมื่อเทียบกับหน้าจอ 1920*1080

ใน SARibbon อันที่มีแถบหัวเรื่องเรียกว่า Loose และองค์ประกอบของเลย์เอาต์แบบหลวม ๆ จะถูกจัดเรียงตามที่แสดงด้านล่าง:

เค้าโครงนี้สอดคล้องกับเค้าโครงเริ่มต้นของ Office

ใน SARibbon เค้าโครงที่มีแถบหัวเรื่องและแท็บเรียกว่าเค้าโครงแบบกะทัดรัด และองค์ประกอบของเค้าโครงแบบกะทัดรัดจะถูกจัดเรียงดังนี้:

SARibbonBar มีฟังก์ชัน setRibbonStyle ที่กำหนดรูปแบบเค้าโครงปัจจุบัน และการแจกแจง SARibbonBar::RibbonStyle จะกำหนดโครงร่างสี่แบบ:

• SARibbonBar::RibbonStyleLooseThreeRow Loose With Three Row(เวอร์ชัน v0.x คือ SARibbonBar::OfficeStyle )

• SARibbonBar::RibbonStyleLooseTwoRow หลวมด้วยสองแถว (เวอร์ชัน v0.x คือ SARibbonBar::OfficeStyleTwoRow )

• SARibbonBar::RibbonStyleCompactThreeRow กระชับด้วยสามแถว (เวอร์ชัน v0.x คือ SARibbonBar::WpsLiteStyle )

• SARibbonBar::RibbonStyleCompactTwoRow กระชับด้วยสองแถว (เวอร์ชัน v0.x คือ SARibbonBar::WpsLiteStyleTwoRow )

การตัดข้อความและขนาดไอคอน

ฟังก์ชัน SARibbonBar::setEnableWordWrap ช่วยให้คุณควบคุมได้ว่าข้อความของ SARibbonBar จะตัดหรือไม่ ความสูงของ SARibbonBar ได้รับการแก้ไขแล้ว และข้อความจะตัดหรือไม่ส่งผลต่อขนาดของการแสดงไอคอน ดังนั้น หากคุณต้องการให้ไอคอน ให้ดูใหญ่ขึ้นก็ตั้งค่าข้อความไม่ให้ตัดได้

ในรูปแบบเค้าโครง SARibbonBar::RibbonStyleCompactTwoRow ข้อความที่ไม่มีการตัดคำจะแสดงดังนี้:

SARibbonBar::RibbonStyleCompactTwoRow紧凑结构，2 行模式把文字设置为不换行后( SARibbonBar::setEnableWordWrap(false) ) ของคำสั่ง

เมื่อข้อความ SARibbonBar ถูกตั้งค่าเป็นแบบไม่ตัดคำ พื้นที่แสดงของไอคอนจะใหญ่ขึ้น

รูปแบบปุ่มเครื่องมือของ SARibbonBar

SARibbonPannel มีสามวิธีในการเพิ่มการดำเนินการ:

• addLargeAction
• addMediumAction
• addSmallAction

ในแผงมาตรฐาน การดำเนินการ (ปุ่ม) มีโหมดเค้าโครงสามโหมด ยกตัวอย่างคำที่ใช้ในสำนักงาน เค้าโครงทั้งสามของ pannel คือจำนวนบรรทัดที่ถูกครอบครอง:

• อันแรกซึ่งครอบครองทั้งแผงเรียกว่า 'ใหญ่'
• ประการที่สองสามารถวาง 2 ปุ่มไว้ใต้แผงเดียวซึ่งเรียกว่า 'กลาง'
• แบบที่ 3 แผงมี 3 ปุ่ม เรียกว่า 'samll'

SARibbonPannelItem::RowProportion ใช้เพื่อแสดงจำนวนแถวที่แต่ละแบบฟอร์มครอบครองใน Pannel มักใช้ในเค้าโครงพาเนล การแจงนับนี้ถูกกำหนดไว้ดังนี้:

 /* *
 * @brief defines the proportion of rows. The ribbon has  three proportions: large, media and small.
 */
enum RowProportion {
    None            // /< to define the proportion, it will be judged according to expandingDirections. If Qt::Vertical is available, it is equal to Large, otherwise it is Small
    , Large         // /< Large proportion, the height of a widget will fill the whole pannel.
    , Medium        // /< Medium proportion will only work when @ref SARibbonPannel::pannelLayoutMode is @ref SARibbonPannel::ThreeRowMode, and will occupy two of the three rows if both of them in the same column are Medium.
    , Small         // /< Small proportion, in the line of SARibbonPannel, Medium will become Small if it does not meet the conditions, but will not become Large.
};

แต่ละการกระทำที่จัดการใน SARibbonPannel จะมีคุณสมบัติส่วนตัว ( SARibbonPannelItem::RowProportion ) คุณสมบัตินี้กำหนดโครงร่างของการดำเนินการนี้ในแผง

โหมดเค้าโครง SARibbonPannel

โหมด 3 บรรทัด

โหมดสามบรรทัดเป็นรูปแบบแผงแบบดั้งเดิม ดังแสดงในรูปต่อไปนี้:

ในโหมด 3 บรรทัด มีตัวยึดตำแหน่งสามประเภท ได้แก่ ใหญ่ กลาง และเล็ก

แผงในโหมด 3 บรรทัดจะแสดงชื่อของแผงในพื้นที่ชื่อแผง และมีพื้นที่ OptionAction อื่น พื้นที่นี้ใช้เพื่อเพิ่มทริกเกอร์พิเศษให้กับการกระทำนี้ หากไม่ได้ตั้งค่า OptionAction พื้นที่นี้จะถูกซ่อนไว้

โหมด 2 บรรทัด

โหมดสองบรรทัดคือวิธีเค้าโครงที่ได้รับการปรับปรุง WPS ดังแสดงในรูปต่อไปนี้:

ในโหมด 2 บรรทัด ตัวยึดตำแหน่งขนาดกลางและขนาดเล็ก (SARibbonPannelItem::RowProportion) จะเหมือนกัน และไม่มีการสร้างความแตกต่าง

ในโหมด 2 บรรทัด แผงควบคุมจะไม่แสดงชื่อเรื่อง

การปรับแต่ง SARibbon

การปรับแต่ง Ribbon เป็นคุณลักษณะหนึ่งของ Ribbon ด้วยการอ้างอิงถึงอินเทอร์เฟซแบบกำหนดเองของ office และ WPS ผู้ใช้สามารถกำหนดเนื้อหาจำนวนมากสำหรับ Ribbon ของตนเอง หรือแม้แต่กำหนดอินเทอร์เฟซที่แตกต่างไปจากเดิมอย่างสิ้นเชิง

ต่อไปนี้คืออินเทอร์เฟซแบบกำหนดเองของ office

SARibbon หมายถึงอินเทอร์เฟซของ office และ WPS และสรุปคลาส SARibbonCustomize** ที่ใช้งานง่าย ซึ่งรวมถึงห้าคลาสต่อไปนี้:

• SARibbonCustomizeDialog
• SARibbonCustomizeWidget
• SARibbonCustomizeData
• SARibbonActionsManager
• SARibbonActionsManagerModel

ผู้ใช้จริงสามารถใช้ได้เฉพาะ SARibbonActionsManager และ SARibbonCustomizeDialog / SARibbonCustomizeWidget เท่านั้น และผู้ใช้รายอื่นจะไม่ใช้งานตามปกติ

SARibbonActionsManager ใช้เพื่อจัดการ QAction เพิ่ม QAction ที่ต้องการปรับแต่งเป็น SARibbonActionsManager สำหรับการจัดการ และจัดประเภท QAction เพื่อให้สามารถแสดงใน SARibbonCustomizeDialog / SARibbonCustomizeWidget

SARibbonCustomizeDialog / SARibbonCustomizeWidget เป็นหน้าต่างแสดงผลเฉพาะ SARibbonCustomizeDialog จะห่อหุ้ม SARibbonCustomizeWidget เป็นกล่องโต้ตอบ หากคุณต้องการรวมเข้ากับกล่องโต้ตอบการกำหนดค่า เช่น office คุณสามารถใช้ SARibbonCustomizeWidget ผลกระทบของ SARibbonCustomizeDialog จะแสดงในรูปต่อไปนี้:

เพิ่มฟังก์ชันแบบกำหนดเองให้กับอินเทอร์เฟซ

ต่อไปนี้เป็นวิธีเพิ่มคุณสมบัติที่กำหนดเอง

ขั้นแรก ให้กำหนด SARibbonActionsManager เป็นตัวแปรสมาชิกของ MainWindow

 // Define member variables in the MainWindow.h. 
SARibbonActionsManager* m_ribbonActionMgr; // /< Manage all actions

ในระหว่างการเริ่มต้น MainWindow จำเป็นต้องสร้าง QAction จำนวนมาก อ็อบเจ็กต์หลักของ QAction ถูกกำหนดให้เป็น MainWindow นอกจากนี้ เค้าโครงริบบิ้นจะถูกสร้างขึ้น เช่น การเพิ่มหมวดหมู่ การเพิ่มแผง และการดำเนินการอื่นๆ หลังจากการดำเนินการข้างต้นเสร็จสิ้น ให้เพิ่มขั้นตอนต่อไปนี้เพื่อให้ SARibbonActionsManager จัดการ QAction ทั้งหมดโดยอัตโนมัติ

 // Initialization of MainWindow and generation of QAction.
// Generate ribbon layout.
m_ribbonActionMgr = new SARibbonActionsManager(mainWinowPtr);
m_ribbonActionMgr-> autoRegisteActions (mainWinowPtr);

ฟังก์ชันหลัก autoRegisteActions ของ SARibbonActionsManager สามารถสำรวจวัตถุย่อยทั้งหมดภายใต้ SARibbonMainWindow ค้นหาและลงทะเบียนการดำเนินการ และสำรวจ SARibbonCategory ทั้งหมด การดำเนินการภายใต้ SARibbonCategory ถูกจัดประเภทตามชื่อชื่อเรื่องของ SARibbonCategory ฟังก์ชันนี้ยังลงทะเบียนการดำเนินการภายใต้ SARibbonMainWindow แต่ไม่อยู่ภายใต้หมวดหมู่ใด ๆ เป็นแท็ก 'NotInRibbonCategoryTag' ชื่อเริ่มต้นคือ 'not in Ribbon'

หากต้องการเรียก SARibbonCustomizeDialog ดังนี้:

QString cfgpath = " customization.xml " ;
SARibbonCustomizeDialog dlg ( this , this );

dlg.setupActionsManager(m_ribbonActionMgr);
dlg.fromXml(cfgpath); // This step is called to load the existing custom steps, which can be added based on the original custom steps when saving.
if (QDialog::Accepted == dlg.exec()) {
    dlg. applys (); // Apply custom steps
    dlg. toXml (cfgpath); // Save custom steps to a file
}

ก่อนที่จะสร้าง MainWindow จะต้องโหลดเนื้อหาที่ปรับแต่งเองก่อน ดังนั้น ควรเพิ่มคำสั่งต่อไปนี้ในตัวสร้าง:

 // Constructor of MainWindow
sa_apply_customize_from_xml_file ( " customization.xml " , this , m_ribbonActionMgr);

sa_apply_customize_from_xml_file เป็นฟังก์ชันที่มีให้ใน SARibbonCustomizeWidget.h เนื้อหาที่ปรับแต่งในไฟล์คอนฟิกูเรชันจะถูกนำไปใช้โดยตรงใน MainWindow

ด้วยวิธีนี้ ซอฟต์แวร์จะถูกโหลดตามไฟล์การกำหนดค่าทุกครั้งที่เริ่มทำงาน

ภาพหน้าจอเพิ่มเติม

• นี่คือภาพหน้าจอของซอฟต์แวร์ที่สร้างด้วย SARibbon

GitHub - https://github.com/czyt1988/data-workbench

gitee - https://gitee.com/czyt1988/data-workbench

สามารถดูรหัสการสร้าง Ribbon เฉพาะได้:

https://github.com/czyt1988/data-workbench/blob/master/src/APP/DAAppRibbonArea.cpp

คำถามที่พบบ่อย

ปัญหาการแสดงผลหน้าจอ DPI สูง

มีสองวิธีในการเตรียมพร้อมสำหรับปัญหาการแสดงผลหน้าจอ DPI สูง:

• 1 ตั้งค่า Qt::AA_EnableHighDpiScaling สำหรับ QApplication ในฟังก์ชันหลัก

คุณลักษณะนี้ช่วยให้แอปพลิเคชันตรวจจับความหนาแน่นของพิกเซลของจอแสดงผลโดยอัตโนมัติเพื่อให้สามารถปรับขนาดอัตโนมัติได้ เช่น:

 int main ( int argc, char * argv[])
{
# if (QT_VERSION >= QT_VERSION_CHECK(5, 6, 0))
    QApplication::setAttribute (Qt::AA_EnableHighDpiScaling);
    QApplication::setAttribute (Qt::AA_UseHighDpiPixmaps);
# endif
    QApplication a (argc, argv);
    ......
}

• 2 ตั้งค่านโยบายการปรับขนาดสำหรับ QApplication ในฟังก์ชันหลัก: QApplication::setHighDpiScaleFactorRoundingPolicy

Qt5.6 มี Qt::AA_EnableHighDpiScaling แต่ไม่สามารถแก้ปัญหาหน้าจอ DPI สูงได้อย่างสมบูรณ์ Qt5.14 ได้จัดให้มีการตั้งค่านโยบายการปรับขนาดหน้าจอความละเอียดสูงที่เรียกว่า QApplication::setHighDpiScaleFactorRoundingPolicy และจำเป็นต้องตั้งค่าในฟังก์ชันหลักด้วย เช่น:

 int main ( int argc, char * argv[])
{
# if (QT_VERSION >= QT_VERSION_CHECK(5, 6, 0))
    QApplication::setAttribute (Qt::AA_EnableHighDpiScaling);
    QApplication::setAttribute (Qt::AA_UseHighDpiPixmaps);
# endif
# if (QT_VERSION >= QT_VERSION_CHECK(5, 14, 0))
    QApplication::setHighDpiScaleFactorRoundingPolicy (Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);
# endif
    QApplication a (argc, argv);
    ......
}

ปัญหาคีย์ลัด

ผู้คนมักให้ข้อเสนอแนะว่าหลังจากใช้ SARibbonBar แล้ว ปุ่มลัดของหน้าแท็บที่ไม่ได้ใช้งานจะไม่ตอบสนอง และมีเพียงปุ่มลัดของหน้าแท็บที่เปิดใช้งานเท่านั้นที่ตอบสนอง หากอยู่ในโหมดแถบเครื่องมือแบบเดิม ปุ่มลัดจะยังคงมีผลอยู่ เนื่องจากแถบเครื่องมือที่มีการดำเนินการอยู่จะอยู่แถวหน้าเสมอ อย่างไรก็ตาม หากเป็น SARibbonBar ปุ่มลัดในแผงการทำงานจะถูกซ่อน และจะไม่มีผลใดๆ หลังจากซ่อน หากคุณต้องการให้ปุ่มลัดมีผลไม่ว่า Pannel จะถูกซ่อนอยู่หรือไม่ก็ตาม ให้ตั้งค่าปุ่มลัด' คุณสมบัติของ shortContext 'ของ Qt::ApplicationShortcut ก็ไม่ถูกต้องเช่นกัน ในกรณีนี้ คุณสามารถสร้างคีย์ลัดด้วยตนเองในตำแหน่งที่คุณสร้างหมวดหมู่ได้

ตัวอย่าง:

    ribbon build
    ...
    QShortcut* shortCut = new QShortcut(QKeySequence(QLatin1String( " Ctrl+S " )), this );
    connect (shortCut, &QShortcut::activated, this , [ actSave ]() {
        actSave-> trigger ();
    });