forked from qt-creator/qt-creator
Doc: Use "screen" only to refer to physical screens
Replace with "UI", "view", or "parent" or leave it out, depending on the context. Change-Id: I319d173d5db45380f8b940701ca1b1e5e9753065 Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
@@ -58,7 +58,7 @@
|
||||
\section1 Creating the Main View
|
||||
|
||||
The main view of the application displays a Qt logo in the top left corner
|
||||
of the screen and two empty rectangles.
|
||||
of the view and two empty rectangles.
|
||||
|
||||
To use the \e qt-logo.png image in your application, you must copy it from
|
||||
the Qt examples directory to the project directory (same subdirectory as
|
||||
@@ -149,7 +149,7 @@
|
||||
|
||||
\li In \uicontrol {Layout}, select the vertical center anchor button and
|
||||
then the right anchor button to
|
||||
anchor the rectangle to the middle right margin of the screen.
|
||||
anchor the rectangle to the middle right margin of its parent.
|
||||
|
||||
\li In the \uicontrol Margin field, select \e 10 for the right
|
||||
anchor and \e 0 for the vertical center anchor.
|
||||
@@ -163,7 +163,7 @@
|
||||
\li In the \uicontrol Id field, enter \e bottomLeftRect.
|
||||
|
||||
\li In \uicontrol {Layout}, select the bottom and left anchor buttons to
|
||||
anchor the rectangle to the bottom left margin of the screen.
|
||||
anchor the rectangle to the bottom left margin of its parent.
|
||||
|
||||
\li In the \uicontrol Margin field, select \e 20 for the bottom
|
||||
anchor and \e 10 for the left anchor.
|
||||
|
@@ -242,7 +242,7 @@
|
||||
files in the project folder belong to the project. Therefore, you do
|
||||
not need to individually list all the files in the project.
|
||||
|
||||
\li .qml file defines an UI item, such as a component, screen, or the
|
||||
\li .qml file defines an UI item, such as a component or the
|
||||
whole application UI.
|
||||
|
||||
\li ui.qml file defines a form for the application UI. This file is
|
||||
|
@@ -142,14 +142,14 @@
|
||||
\l{SwipeDelegate}{Swipe Delegate} delegate components are also available
|
||||
in the \uicontrol Library.
|
||||
|
||||
\section1 Positioning Items on Screens
|
||||
\section1 Positioning Items in UIs
|
||||
|
||||
The position of an item on the canvas can be either absolute or relative
|
||||
to other items. If you are designing a static user interface,
|
||||
The position of an item in the UI can be either absolute or
|
||||
relative to other items. If you are designing a static UI,
|
||||
\l{Important Concepts In Qt Quick - Positioning#manual-positioning}
|
||||
{manual positioning} provides the most efficient form of positioning items
|
||||
on the screen. For a dynamic user interface, you can employ the following
|
||||
positioning methods provided by Qt Quick:
|
||||
{manual positioning} provides the most efficient form of positioning
|
||||
items. For a dynamic UI, you can employ the following positioning
|
||||
methods provided by Qt Quick:
|
||||
|
||||
\list
|
||||
\li \l{Setting Bindings}
|
||||
@@ -264,7 +264,7 @@
|
||||
the layout managers used with standard Qt widgets, except that they are
|
||||
also containers in their own right.
|
||||
|
||||
You can use the following positioners to arrange items on screens:
|
||||
You can use the following positioners to arrange items in UIs:
|
||||
|
||||
\list
|
||||
\li \l[QML] {Column} arranges its child items vertically.
|
||||
@@ -283,11 +283,11 @@
|
||||
\section2 Using Layouts
|
||||
|
||||
Since Qt 5.1, you can use QML types in the \l{qtquicklayouts-index.html}
|
||||
{Qt Quick Layouts} module to arrange Qt Quick items on screens. Unlike
|
||||
{Qt Quick Layouts} module to arrange Qt Quick items in UIs. Unlike
|
||||
positioners, they manage both the positions and sizes of items in a
|
||||
declarative interface. They are well suited for resizable user interfaces.
|
||||
declarative interface. They are well suited for resizable UIs.
|
||||
|
||||
You can use the following layout types to arrange items on screens:
|
||||
You can use the following layout types to arrange items in UIs:
|
||||
|
||||
\list
|
||||
\li \l{Layout} provides attached properties for items pushed onto a
|
||||
@@ -337,7 +337,7 @@
|
||||
\section2 Organizing Items
|
||||
|
||||
Since Qt 5.7, you can use the following \l{Qt Quick Controls} types to
|
||||
organize items on screens:
|
||||
organize items in UIs:
|
||||
|
||||
\list
|
||||
\li \l [QtQuickControls]{Frame} places a logical group of controls
|
||||
@@ -357,7 +357,7 @@
|
||||
\section1 Adding User Interaction Methods
|
||||
|
||||
You can use the following QML types to add basic interaction methods to
|
||||
screens:
|
||||
UIs:
|
||||
|
||||
\list
|
||||
\li \l{Flickable}
|
||||
@@ -441,7 +441,7 @@
|
||||
\section1 History of Qt Quick Controls
|
||||
|
||||
In Qt 4, ready-made Qt Quick 1 Components were provided for creating
|
||||
screens with a native look and feel for a particular target platform.
|
||||
UIs with a native look and feel for a particular target platform.
|
||||
In Qt 5.1, Qt Quick Controls, Dialogs, and Layouts were added for
|
||||
creating classic desktop-style user interfaces using Qt Quick 2.1. The
|
||||
Qt Quick Controls Styles could be used to customize Qt Quick Controls.
|
||||
|
@@ -157,7 +157,7 @@
|
||||
|
||||
The width and height of the root item in a QML file determine the size of
|
||||
the component. You can reuse components, such as buttons, in different
|
||||
sizes in other QML files and design screens for use with different device
|
||||
sizes in other QML files and design UIs for use with different device
|
||||
profiles, screen resolution, or screen orientation. The component size
|
||||
might also be zero (0,0) if its final size is determined by property
|
||||
bindings.
|
||||
|
@@ -60,7 +60,7 @@
|
||||
\li Start, stop or pause animations.
|
||||
\li Execute some script required in the new state.
|
||||
\li Change a property value for a particular item.
|
||||
\li Show a different view or screen.
|
||||
\li Show a different view.
|
||||
\endlist
|
||||
|
||||
The \uicontrol States pane displays the different \l{State}{states}
|
||||
@@ -73,7 +73,7 @@
|
||||
To add states, click the \inlineimage plus.png
|
||||
button. Then modify the new state in the editor. For example, to change the
|
||||
appearance of a button, you can hide the button image and show another image
|
||||
in its place. Or, to add movement to the screen, you can change the position
|
||||
in its place. Or, to add movement to the view, you can change the position
|
||||
of an object on the canvas and then add animation to the change between the
|
||||
states.
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
QML states typically describe user interface configurations, such as the UI
|
||||
controls, their properties and behavior and the available actions. For
|
||||
example, you can use states to create two screens.
|
||||
example, you can use states to create two views.
|
||||
|
||||
To add states, click the empty slot in the \uicontrol States pane.
|
||||
Then modify the new state in the \uicontrol {Form Editor} or the
|
||||
@@ -106,7 +106,7 @@
|
||||
This allows you to:
|
||||
|
||||
\list
|
||||
\li Align items on different screens with each other.
|
||||
\li Align items on different views with each other.
|
||||
\li Avoid excessive property changes. If an item is invisible in the
|
||||
base state, you must define all changes to its child types as
|
||||
property changes, which leads to complicated QML code.
|
||||
@@ -116,13 +116,13 @@
|
||||
states.
|
||||
\endlist
|
||||
|
||||
To create screens for an application by using states:
|
||||
To create views for an application by using states:
|
||||
|
||||
\list 1
|
||||
\li In the base state, add all items you will need in the application
|
||||
(1). While you work on one screen, you can click the
|
||||
(1). While you work on one view, you can click the
|
||||
\inlineimage eye_open.png
|
||||
icon to hide items on the canvas that are not part of a screen.
|
||||
icon to hide items on the canvas that are not part of a view.
|
||||
\li In the \uicontrol States pane, click the empty slot to create a
|
||||
new state and give it a name. For example, \c Normal.
|
||||
\li In the \uicontrol Properties pane (2), deselect the
|
||||
@@ -130,9 +130,9 @@
|
||||
for each item that is not needed in this view. If you specify
|
||||
the setting for the parent item, all child items inherit it and
|
||||
are also hidden.
|
||||
\image qmldesigner-screen-design.png "Designing screens"
|
||||
\li Create additional states for each screen and set the visibility
|
||||
or opacity of the items in the screen.
|
||||
\image qmldesigner-screen-design.png "Designing views"
|
||||
\li Create additional states for each view and set the visibility
|
||||
or opacity of the items in the view.
|
||||
\li To determine which view opens when the application starts, use the
|
||||
\uicontrol {Text Editor} to set the state of the root item of the
|
||||
.qml file, as specified by the following code snippet:
|
||||
|
Reference in New Issue
Block a user