热门标签
热门文章
- 1mysql 写权限,在MySQL中创建/写入权限
- 2微信小程序-canvas绘实现贴纸效果_小程序 canvas 贴纸
- 3NFV架构及VNF部署业务流程_nfv和vnf
- 4NLP&LLM算法面经问题整理与回答（更新中20240723）_llm面经
- 5机器学习算法在游戏中的一些具体应用_游戏算法能做什么
- 6JavaScript常用单词整理总结
- 7Flask项目部署到阿里云服务器（全网最清晰简单完整部署），linux命令和脚本文件 nginx安装到服务器等每一步清晰记录_flask部署到服务器
- 806 SpringBoot 配置文件详解-application.yaml_application.yaml配置文件
- 9elasticSearch（三）window报错：org.elasticsearch.ElasticsearchSecurityException:_failed to load ssl configuration [xpack.security.t
- 10（11-8）基于大模型的情感分析系统（Tensorflow+BERT+RoBERTa+Sklearn）：基准模型——朴素贝叶斯分类器_reberta模型 分类器
当前位置: article > 正文
Dioxus、Freya学习——rsx!
作者：码创造者 | 2024-08-02 10:49:52
赞
踩
dioxus
示例代码：
#![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] use freya::prelude::*; fn main() { launch_with_props(app, "Counter", (400.0, 350.0)); } fn app() -> Element { let mut count = use_signal(|| 0); rsx!( rect { height: "50%", width: "100%", main_align: "center", cross_align: "center", background: "rgb(0, 119, 182)", color: "white", shadow: "0 4 20 5 rgb(0, 0, 0, 80)", label { font_size: "75", font_weight: "bold", "{count}" } } rect { height: "50%", width: "100%", main_align: "center", cross_align: "center", direction: "horizontal", Button { onclick: move |_| count += 1, label { "Increase" } } Button { onclick: move |_| count -= 1, label { "Decrease" } } } ) }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
显示效果：
rsx!宏展开后，等价代码：
use freya::prelude::*; fn main() { launch_with_props(app, "Counter", (400.0, 350.0)); } fn app() -> Element { let mut count = use_signal(|| 0); Some({ static TEMPLATE: dioxus_core::Template = dioxus_core::Template { name: "examples/counter.rs:15:5:283", roots: &[ dioxus_core::TemplateNode::Element { tag: dioxus_elements::rect::TAG_NAME, namespace: dioxus_elements::rect::NAME_SPACE, attrs: &[ dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::height.0, namespace: dioxus_elements::rect::height.1, value: "50%", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::width.0, namespace: dioxus_elements::rect::width.1, value: "100%", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::main_align.0, namespace: dioxus_elements::rect::main_align.1, value: "center", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::cross_align.0, namespace: dioxus_elements::rect::cross_align.1, value: "center", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::background.0, namespace: dioxus_elements::rect::background.1, value: "rgb(0, 119, 182)", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::color.0, namespace: dioxus_elements::rect::color.1, value: "white", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::shadow.0, namespace: dioxus_elements::rect::shadow.1, value: "0 4 20 5 rgb(0, 0, 0, 80)", }, ], children: &[ dioxus_core::TemplateNode::Element { tag: dioxus_elements::label::TAG_NAME, namespace: dioxus_elements::label::NAME_SPACE, attrs: &[ dioxus_core::TemplateAttribute::Static { name: dioxus_elements::label::font_size.0, namespace: dioxus_elements::label::font_size.1, value: "75", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::label::font_weight.0, namespace: dioxus_elements::label::font_weight.1, value: "bold", }, ], children: &[ dioxus_core::TemplateNode::DynamicText { id: 0usize, }, ], }, ], }, dioxus_core::TemplateNode::Element { tag: dioxus_elements::rect::TAG_NAME, namespace: dioxus_elements::rect::NAME_SPACE, attrs: &[ dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::height.0, namespace: dioxus_elements::rect::height.1, value: "50%", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::width.0, namespace: dioxus_elements::rect::width.1, value: "100%", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::main_align.0, namespace: dioxus_elements::rect::main_align.1, value: "center", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::cross_align.0, namespace: dioxus_elements::rect::cross_align.1, value: "center", }, dioxus_core::TemplateAttribute::Static { name: dioxus_elements::rect::direction.0, namespace: dioxus_elements::rect::direction.1, value: "horizontal", }, ], children: &[ dioxus_core::TemplateNode::Dynamic { id: 1usize, }, dioxus_core::TemplateNode::Dynamic { id: 2usize, }, ], }, ], node_paths: &[&[0u8, 0u8, 0u8], &[1u8, 0u8], &[1u8, 1u8]], attr_paths: &[], }; dioxus_core::VNode::new( None, TEMPLATE, Box::new([ dioxus_core::DynamicNode::Text( dioxus_core::VText::new((count).to_string().to_string()), ), dioxus_core::DynamicNode::Component({ use dioxus_core::prelude::Properties; (fc_to_builder(Button) .onclick(EventHandler::new(move |_| count += 1)) .children( Some({ static TEMPLATE: dioxus_core::Template = dioxus_core::Template { name: "examples/counter.rs:15:5:933", roots: &[ dioxus_core::TemplateNode::Element { tag: dioxus_elements::label::TAG_NAME, namespace: dioxus_elements::label::NAME_SPACE, attrs: &[], children: &[ dioxus_core::TemplateNode::Text { text: "Increase", }, ], }, ], node_paths: &[], attr_paths: &[], }; dioxus_core::VNode::new( None, TEMPLATE, Box::new([]), Box::new([]), ) }), ) .build()) .into_vcomponent(Button, "Button") }), dioxus_core::DynamicNode::Component({ use dioxus_core::prelude::Properties; (fc_to_builder(Button) .onclick(EventHandler::new(move |_| count -= 1)) .children( Some({ static TEMPLATE: dioxus_core::Template = dioxus_core::Template { name: "examples/counter.rs:15:5:1051", roots: &[ dioxus_core::TemplateNode::Element { tag: dioxus_elements::label::TAG_NAME, namespace: dioxus_elements::label::NAME_SPACE, attrs: &[], children: &[ dioxus_core::TemplateNode::Text { text: "Decrease", }, ], }, ], node_paths: &[], attr_paths: &[], }; dioxus_core::VNode::new( None, TEMPLATE, Box::new([]), Box::new([]), ) }), ) .build()) .into_vcomponent(Button, "Button") }), ]), Box::new([]), ) }) }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
最终数据结构：
Some( VNode { vnode: VNodeInner { key: None, template: Cell { value: Template { name: "examples/counter.rs:15:16:294", roots: [ Element { tag: "rect", namespace: None, attrs: [ Static { name: "height", value: "50%", namespace: None, }, Static { name: "width", value: "100%", namespace: None, }, Static { name: "main_align", value: "center", namespace: None, }, Static { name: "cross_align", value: "center", namespace: None, }, Static { name: "background", value: "rgb(0, 119, 182)", namespace: None, }, Static { name: "color", value: "white", namespace: None, }, Static { name: "shadow", value: "0 4 20 5 rgb(0, 0, 0, 80)", namespace: None, }, ], children: [ Element { tag: "label", namespace: None, attrs: [ Static { name: "font_size", value: "75", namespace: None, }, Static { name: "font_weight", value: "bold", namespace: None, }, ], children: [ DynamicText { id: 0, }, ], }, ], }, Element { tag: "rect", namespace: None, attrs: [ Static { name: "height", value: "50%", namespace: None, }, Static { name: "width", value: "100%", namespace: None, }, Static { name: "main_align", value: "center", namespace: None, }, Static { name: "cross_align", value: "center", namespace: None, }, Static { name: "direction", value: "horizontal", namespace: None, }, ], children: [ Dynamic { id: 1, }, Dynamic { id: 2, }, ], }, ], node_paths: [ [ 0, 0, 0, ], [ 1, 0, ], [ 1, 1, ], ], attr_paths: [], }, }, dynamic_nodes: [ Text( VText { value: "0", }, ), Component( VComponent { name: "Button", }, ), Component( VComponent { name: "Button", }, ), ], dynamic_attrs: [], }, mount: Cell { value: MountId( 18446744073709551615, ), }, }, )
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
类似于JSON的数据结构：
{ "Some": { "VNode": { "vnode": { "key": null, "template": { "value": { "name": "examples/counter.rs:15:16:294", "roots": [ { "tag": "rect", "namespace": null, "attrs": [ { "name": "height", "value": "50%", "namespace": null }, { "name": "width", "value": "100%", "namespace": null }, { "name": "main_align", "value": "center", "namespace": null }, { "name": "cross_align", "value": "center", "namespace": null }, { "name": "background", "value": "rgb(0, 119, 182)", "namespace": null }, { "name": "color", "value": "white", "namespace": null }, { "name": "shadow", "value": "0 4 20 5 rgb(0, 0, 0, 80)", "namespace": null } ], "children": [ { "tag": "label", "namespace": null, "attrs": [ { "name": "font_size", "value": "75", "namespace": null }, { "name": "font_weight", "value": "bold", "namespace": null } ], "children": [ { "id": 0 } ] } ] }, { "tag": "rect", "namespace": null, "attrs": [ { "name": "height", "value": "50%", "namespace": null }, { "name": "width", "value": "100%", "namespace": null }, { "name": "main_align", "value": "center", "namespace": null }, { "name": "cross_align", "value": "center", "namespace": null }, { "name": "direction", "value": "horizontal", "namespace": null } ], "children": [ { "id": 1 }, { "id": 2 } ] } ], "node_paths": [ [ 0, 0, 0 ], [ 1, 0 ], [ 1, 1 ] ], "attr_paths": [] } }, "dynamic_nodes": [ { "Text": { "value": "0" } }, { "Component": { "name": "Button" } }, { "Component": { "name": "Button" } } ], "dynamic_attrs": [] }, "mount": { "value": { "MountId": 18446744073709551615 } } } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/918340
推荐阅读
相关标签
