feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Update UI Positioning document

Browse Source 
Change in some texts, re-organized icons, and moved the
Learn more section to reduce complexity of the tutorial.

Fixes: QDS-7761
Change-Id: I504cb0a5edeee4c6798f22c1d4fd4332a8fd8c26
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Pranta Dastider
2022-10-04 17:41:45 +02:00
committed by Pranta Ghosh Dastider
parent b30233e619
commit a902729b35
1 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
doc/qtdesignstudio/examples/doc/loginui2.qdoc
View File

@@ -98,13 +98,11 @@
rectangle at the top, while keeping its horizontal center aligned rectangle at the top, while keeping its horizontal center aligned
with that of the rectangle. with that of the rectangle.
\li Select \e tagLine in \uicontrol Navigator. \li Select \e tagLine in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, deselect the \li In \uicontrol Properties > \uicontrol Layout,
\inlineimage icons/anchor-center-vertical.png select the \inlineimage icons/anchor-top.png
button to remove the vertical center anchor, and then select the button and then select \e qt_logo_green_128x128px
\inlineimage icons/anchor-top.png as \uicontrol Target to anchor \e tagLine with a 40-pixel margin.
button to anchor the tag line to This attaches the top of the tag line to the
\e qt_logo_green_128x128px in the \uicontrol Target field with a
40-pixel margin. This attaches the top of the tag line to the
bottom of the logo, while keeping its horizontal center aligned bottom of the logo, while keeping its horizontal center aligned
with that of the rectangle. with that of the rectangle.
\image loginui2-layout-text.png "Text Layout properties" \image loginui2-layout-text.png "Text Layout properties"
@@ -123,20 +121,6 @@
\image loginui2-loginpage.jpg "Login page in the Design mode and live preview" \image loginui2-loginpage.jpg "Login page in the Design mode and live preview"
\section2 Learn More - Anchors
In an anchor-based layout, each component instance can be thought of as
having a set of invisible \e anchor lines: top, bottom, left, right, fill,
horizontal center, vertical center, and baseline.
Anchors enable placing a component instance either adjacent to or inside of
another component instance, by attaching one or more of the instance's
anchor lines to the anchor lines of the other component instance. If a
component instance changes, the instances that are anchored to it will
adjust automatically to maintain the anchoring.
For more information, see \l{Positioning with Anchors}.
\section1 Using Column Positioners \section1 Using Column Positioners
You will now position the entry fields and buttons in columns You will now position the entry fields and buttons in columns
@@ -172,7 +156,7 @@
\li Select \e fields in \uicontrol Navigator. \li Select \e fields in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the \li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage icons/anchor-top.png \inlineimage icons/anchor-top.png
button to anchor the top of the field column to button to anchor the top of the fields column to
the bottom of \e tagLine with a 170-pixel margin. the bottom of \e tagLine with a 170-pixel margin.
\li Select the \inlineimage icons/anchor-center-horizontal.png \li Select the \inlineimage icons/anchor-center-horizontal.png
button to anchor the column horizontally to its parent. button to anchor the column horizontally to its parent.
@@ -192,7 +176,20 @@
\image loginui2-loginpage-ready.jpg "Login page in the Design mode and live preview" \image loginui2-loginpage-ready.jpg "Login page in the Design mode and live preview"
\section1 Learn More - Positioners \section1 Learn More
\section2 Anchors
In an anchor-based layout, each component instance can be thought of as
having a set of invisible \e anchor lines: top, bottom, left, right, fill,
horizontal center, vertical center, and baseline.
Anchors enable placing a component instance either adjacent to or inside of
another component instance, by attaching one or more of the instance's
anchor lines to the anchor lines of the other component instance. If a
component instance changes, the instances that are anchored to it will
adjust automatically to maintain the anchoring.
For more information, see \l{Positioning with Anchors}.
\section2 Positioners
For many use cases, the best positioner to use is a simple grid, row, or For many use cases, the best positioner to use is a simple grid, row, or
column, and \QDS provides components that will position children in these column, and \QDS provides components that will position children in these