You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
On the "New Project" page, select "Empty Interface", then set the project path and click the "OK" button. At this point, you will enter the design view of the empty interface.
Below is a calculator software project to introduce how to design an interface. We select a form in the main view area with the mouse, and an orange small square that can be dragged will be displayed in eight directions of its border. We click on it with the mouse and drag it to the appropriate size.
After setting the size of the form, we can make corresponding settings for the form in the property editing panel on the right. The "Set Properties" column lists the basic property settings for the current form:
611
611
宽:窗体窗度
612
-
612
+
Width: window width of the form
613
613
高:窗体高度
614
-
614
+
High: Form height
615
615
布局方式:窗体采用“打包排布”、“表格排布”还是“数值定位”。
616
-
616
+
Layout method: Whether the form is arranged in a "packed layout", "table layout", or "numerical positioning".
617
617
背景:当前窗体背景色
618
-
618
+
Background: Current form background color
619
619
图片:当前窗体的背景图片
620
-
620
+
Image: Background image of the current form
621
621
标题:当前窗体的标题栏文字
622
-
622
+
Title: The title bar text for the current form
623
623
窗口菜单:当前窗体菜单管理器,用于编辑菜单。
624
-
624
+
Window Menu: The current form menu manager, used to edit menus.
625
625
程序图标:当前项目的程序图标
626
-
626
+
Program icon: The program icon for the current project
627
627
有标题栏:设置是否使用标题栏
628
-
628
+
With a title bar: Set whether to use a title bar
629
629
可调整大小:设置窗体是否可以通过边缘拖动进行大小调整
630
-
630
+
Resizable: Set whether the form can be resized by dragging edges
System tray: The tray manager for the current project, used to edit the tray menu displayed in the Windows system taskbar when running the project. For example, the following image belongs to the system tray.
Next, let's select this Label. At this point, we can directly adjust its position and size by dragging the control and the orange small square. By default, the control adopts "numerical positioning", and the values can use pixel position or percentage. With the control selected, there will be a layout setting toolbar above the drawing toolbar in the lower part of the design area. Here, we can set the corresponding layout method, as well as the values of the control's X, Y, width, and height.
Here, we will set the Label to 0 pixels in X position, 0 pixels in Y position, 100% width, and 30 pixels in height. In the right property bar, select the "Background" attribute as dark gray, the font as a 32 size System font, and the text color as white. We will also set it to right alignment, which can also be set through the shortcut button at the top.
Drag to create a Button from the toolbar or create a Button through the right-click menu, place it in the left position below the Label, adjust the size, and use it as the number "1" button.
Then we set the font of the control through the property bar and top bar, or we can set the font and size through the property bar and top shortcut bar.
After completing button "1", we also need to create other buttons, which can be quickly created through the copy function of the control. There are two methods for copying controls:
701
701
1、选中控件按CTRL键+C键进行复制,然后按CTRL键+V键进行粘贴。
702
-
702
+
1. Select the control and press CTRL+C to copy, then press CTRL+V to paste.
The property settings are mainly done through the property bar on the right. In the interface design above, we have completed the basic interface visualization creation and the basic property settings of controls. Here, we can further adjust the relevant properties in detail.
0 commit comments