-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
272c375
commit 54fb748
Showing
9 changed files
with
174 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # Components | ||
|
|
||
| 在Makepad中，我们认为组件(component)是一个高级的小部件(widget)，建立在小部件的基本结构之上。组件可以是具有预定义属性的单个小部件，也可以是多个小部件协同工作的组合。这种方法允许在设计用户界面时具有更大的灵活性和模块性。在以下部分中，我将深入解释Makepad的`theme_desktop_dark`中的所有组件，展示它们的独特特性和功能。 | ||
|
|
||
| In Makepad, we believe that a component is an advanced widget, built upon the foundational structures of widgets. A component can either be a single widget with predefined properties or a combination of multiple widgets working together. This approach allows for greater flexibility and modularity in designing user interfaces. In the following sections, I will provide an in-depth explanation of all the components within Makepad's `theme_desktop_dark`, showcasing their unique properties and functionalities. | ||
|
|
||
| ## All Components | ||
|
|
||
| ### View | ||
|
|
||
| - `ScrollXView` | ||
| - `ScrollYView` | ||
| - `ScrollXYView` | ||
|
|
||
| ### ScrollBar(s) | ||
|
|
||
| - `ScrollBar` | ||
| - `ScrollBars` | ||
|
|
||
| ### |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| # View | ||
|
|
||
| View是一个最基础的视图组件，其他视图组件有: `ScrollXYView`, `ScrollXView`, `ScrollYView` | ||
|
|
||
| ## Example | ||
|
|
||
| ```rust | ||
| use makepad_widgets::*; | ||
|
|
||
| live_design!{ | ||
| import makepad_widgets::base::*; | ||
| import makepad_widgets::theme_desktop_dark::*; | ||
|
|
||
| App = {{App}} { | ||
| ui: <Root>{ | ||
| main_window = <Window>{ | ||
| block_signal_event: true; | ||
| window: {inner_size: vec2(600, 400)}, | ||
| pass: {clear_color: #1C2128}, | ||
| <View>{ | ||
| show_bg: true, | ||
| // inherits parent width | ||
| width: All, | ||
| // inherits parent height | ||
| height: All, | ||
| padding: 10.0, | ||
| spacing: 16.0, | ||
| draw_bg: {color: #ADBABD}, | ||
| flow: Right, | ||
| <View>{ | ||
| height: 30, | ||
| width: 120, | ||
| show_bg: true, | ||
| draw_bg: {color: #FF0000}, | ||
| } | ||
| <View>{ | ||
| height: 30, | ||
| width: 90, | ||
| show_bg: true, | ||
| draw_bg: {color: #FF00FF}, | ||
| } | ||
| <View>{ | ||
| height: 30, | ||
| width: 120, | ||
| show_bg: true, | ||
| draw_bg: {color: #FF00FF}, | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| ### flow Right | ||
|  | ||
| ### flow Down | ||
|  | ||
| ### flow Overlay | ||
|  | ||
|
|
||
| # ScrollView | ||
|
|
||
| ## ScrollXView | ||
|
|
||
| ## ScrollYView | ||
|
|
||
| ## ScrollXYView |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # Window | ||
|
|
||
| ## Example | ||
|
|
||
|  | ||
|
|
||
| ```rust | ||
| use makepad_widgets::*; | ||
|
|
||
| live_design!{ | ||
| import makepad_widgets::base::*; | ||
| import makepad_widgets::theme_desktop_dark::*; | ||
|
|
||
| App = {{App}} { | ||
| ui: <Root>{ | ||
| main_window = <Window>{ | ||
| block_signal_event: true; | ||
| show_bg: true | ||
| // set size | ||
| window: {inner_size: vec2(1280, 1000)}, | ||
| // width: Fill, | ||
| // height: Fill, | ||
| // recommend pass | ||
| pass: {clear_color: #1C2128}, | ||
| // draw_bg: { | ||
| // fn pixel(self) -> vec4 { | ||
| // // test | ||
| // return mix(#7, #3, self.pos.y); | ||
| // } | ||
| // } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # Root | ||
|
|
||
| Root是Makepad的UI入口，扮演十分重要的角色，所有的子widget都应该在该Root下被编写。 | ||
|
|
||
| Root中包含一个窗口(Window)，因此当Root被创建后我们可以使用Window中的属性对它进行调节 | ||
|
|
||
| The `Root` serves as the entry point for the UI in Makepad, playing a crucial role in the application. All child widgets should be defined under this `Root`. | ||
|
|
||
| The `Root` contains a `Window`, which allows us to adjust its properties once the `Root` is created. | ||
|
|
||
| Here is the documentation for the `Root` widget based on the provided struct: | ||
|
|
||
|
|
||
| ## Props | ||
| |decorate|name|type|description| | ||
| |--|--|--|--| | ||
| |rust|draw_state|`DrawStateWrap<DrawState>`|Holds the state of the drawing operations for the `Root` widget.| | ||
| |rust|windows|`ComponentMap<LiveId, Window>`|A map of windows managed by the `Root`, keyed by their `LiveId`.| | ||
|
|
||
| --- | ||
|
|
||
| ## Event | ||
|
|
||
| This widget does not define any specific events. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,28 @@ | ||
| # Widgets | ||
|
|
||
| 在Makepad这个框架中，Widgets是用来构建用户界面（UI）的基本构建块。它们类似于其他UI框架中的组件或控件，用于创建和管理各种UI元素，如按钮、文本框、标签、布局容器等。通过组合和配置这些Widgets，开发者能够构建出复杂且互动的用户界面。 | ||
|
|
||
| 本节将对所有内置小部件进行说明。 | ||
|
|
||
| In the Makepad, Widgets are the basic building blocks used to build user interfaces (UI). They are similar to components or controls in other UI frameworks, used to create and manage various UI elements such as buttons, text boxes, labels, layout containers, etc. By combining and configuring these Widgets, developers can build complex and interactive user interfaces. | ||
|
|
||
| This section will explain all built-in widgets. | ||
|
|
||
| 在Makepad这个框架中，Widgets是用来构建用户界面（UI）的基本构建块。它们类似于其他UI框架中的组件或控件，用于创建和管理各种UI元素，如按钮、文本框、标签、布局容器等。通过组合和配置这些Widgets，开发者能够构建出复杂且互动的用户界面。 | ||
| ## Attention | ||
|
|
||
| Makepad中的所有内置小部件都遵循`XXXBase`的命名约定。在开发应用程序时，很少直接使用这些小部件。相反，它们主要在创建组件时使用。在本章中，讨论的所有小部件都遵循`XXXBase`命名约定，且使用默认属性。我把这些称为内置小工具。当这些小部件被修改或扩展时，它们被称为组件。 | ||
|
|
||
| All built-in widgets in Makepad follow the naming convention of `XXXBase`. These widgets are rarely used directly when developing applications. Instead, they are primarily utilized when creating components. In this chapter, all the widgets discussed follow the `XXXBase` naming convention and use default properties. I refer to these as Built-in Widgets. When these widgets are modified or extended, they are referred to as Components. | ||
|
|
||
| 在本章节中你不会获得任何例子! 所有的例子将会在Component章节中。 | ||
|
|
||
| In this chapter, you will not get any examples! All Examples are in the Component chapter. | ||
|
|
||
|
|
||
|
|
||
| 本节将对所有内置小部件进行说明。 | ||
| <strong style="color: #FF0000"> | ||
| 但请不要忽略这个章节，它是你学习Makepad的重要基础! | ||
| <br /> | ||
| <br /> | ||
| But please do not ignore this chapter, it is the basic of Makepad learning! | ||
| </strong> |
Oops, something went wrong.