QtWidgets and QtQuick.Controls - A Comparison Qt Developer Days Europe 2014 Presented by Kevin Krammer
QtWidgetsandQtQuick.Controls-AComparison QtDeveloperDaysEurope2014 PresentedbyKevinKrammer [email protected] p TheQuestion TheQues on Side-by-SideComparison Conclusions TheQuestion p CommonQuestion WhatshouldIuseforanewproject: QtWidgetsorQtQuick.Controls? TheQuestion p GoodAnswer? Itdepends! TheQuestion p Side-by-SideComparison TheQuestion Side-by-SideComparison Conclusions Side-by-SideComparison p BaseLine Setofstandardinterfaceelements e.g.Button,CheckBox,Slider Layouting Styling PlatformLook&Feel Custom ApplicationWindow MenuBar,ToolBar,StatusBar,etc Dialogs StandardDialogs BaseforCustomDialogs Side-by-SideComparison p Requirements QtWidgets QtQuick.Controls System GraphicsBuffers System OpenGL QtVersion basicallyany QtVersion >5.1 ProgrammingLanguages ForUse C++ (QML+JavaScriptwithQML registeredwidgets) ForExtending C++ ProgrammingLanguages ForUse QML+JavaScript ForExtending QML+JavaScript(composition) C++(customrendering) Side-by-SideComparison p Layouting QtWidgets Horizontal/VerticalBoxLayout,Grid Layout,FormLayout Layouts"fill"parentwidget Widgetsprovide: SizeHints SizePolicies Developercanoverridesizehint,set policy QtQuick.Controls RowLayout,ColumnLayout, GridLayout,Anchors(relative positioning) Layoutsneedtobeexplicitlysized oranchored Controlsprovide: ImplicitSize Developercanattachresizehints Side-by-SideComparison p Layouting-Example QtWidgets 1 2 3 4 5 6 7 8 9 10 QVBoxLayout*layout=newQVBoxLayout(this); QPushButton*one=newQPushButton("One"); layout->addWidget(one); QPushButton*two=newQPushButton("Two"); layout->addWidget(two); QPushButton*three=newQPushButton("Three"); layout->addWidget(three); QtQuick.Controls 1 2 3 4 5 6 7 ColumnLayout{ anchors.fill:parent Button{text:"One"} Button{text:"Two"} Button{text:"Three"} } Side-by-SideComparison p Styling QtWidgets QtQuick.Controls PlatformNativeStyling PlatformNativeStyling QtStyleSheets(QSS) StyleComponent Replacepartsofthecontrol QStylePlugins Side-by-SideComparison p. Styling-Example QtWidgets QPushButton*button=newQPushButton("ClickMe!",window); button->setStyleSheet("QPushButton{background-color:white}"); QtQuick.Controls 1 2 3 4 5 6 7 8 9 10 11 Button{ x:50;y:50 text:"ClickMe!" style:ButtonStyle{ background:Rectangle{ color:"white" border.color:"#ABABAB" } } } Side-by-SideComparison p. ApplicationWindow QtWidgets QMainWindow MenuBar StatusBar AnynumberofToolBars AddingactionsresultsinTool Buttons DockWidgets CentralWidgetresizedwith window QtQuick.Controls ApplicationWindow MenuBar StatusBar OneToolBar CreateToolButtons,then associateaction Contentitemneedsexplicitresize handling Side-by-SideComparison p. Dialogs QtWidgets StandardDialogs Color,File,Font,MessagBox,Print, Progress,Wizard CustomDialogs BasetypeQDialog ModalandNon-modal QDialogButtonBoxforplatform correctbuttonhandling accesstoindividualbuttons possible accept/rejectcanbe intercepted QtQuick.Controls StandardDialogs Color,File,Font,Message CustomDialogs BasetypeDialog ModalandNon-modal standardButtonsforplatform correctbuttonhandling currentlynotaccesstobuttons Allactionsclosethedialog Side-by-SideComparison p. Tooling QtWidgets QtDesignerinQtCreatorandstandalone CodegeneratedbyUIC Usedbydelegationincustom classes Testing QtTestforunittesting SquishforUItesting Gammarayforruntimeinspection QtQuick.Controls QtQuickDesignerinQtCreator ManipulatesQMLcodedirectly Usebymanualeditingofthesame files Testing QtTestforunittesting SquishforUItesting Gammarayforruntimeinspection QtCreatorJSdebugger/profiler C++toolsfordebugging/analysisof customcode Side-by-SideComparison p. Conclusions TheQuestion Side-by-SideComparison Conclusions Conclusions p. Conclusions Bothtechnologiesviableforwiderangeofprojects QtQuick.Controlsnotascompleteyetbutrapidlyevolving Knowledgeoftypeseasilytransferable Knowledgeofbehaviornotalwaysapplicable Conclusions p.
© Copyright 2025