#语法基础

1MyWidget = {{Widget}} {
2    // 字段属性示例
3    color: #f00,         // 颜色属性
4    width: 100,         // 数值属性
5    visible: true,      // 布尔属性
6    name: "button",     // 字符串属性
7    padding: {          // 嵌套字段属性
8        left: 10,
9        right: 10
10    }
11}

1Container = {{View}} {
2    // 实例属性示例
3    Button1 = <Button> {  // 创建 Button 实例
4        width: 100,
5        label: "Click me"
6    }
7
8    Panel = <View> {     // 创建 View 实例
9        flow: Down,
10        Button2 = <Button> {
11            width: 200
12        }
13    }
14}

1MyComponent = {{Component}} {
2    // 字段属性 - 定义组件本身的属性
3    width: Fill,
4    color: #f00,
5
6    // 实例属性 - 创建子组件
7    Header = <View> {
8        height: 50
9    }
10
11    Content = <View> {
12        // 字段属性
13        flow: Down,
14        spacing: 10,
15
16        // 嵌套实例属性
17        button1 = <Button> {
18            label: "OK"
19        }
20        button2 = <Button> {
21            label: "Cancel"
22        }
23    }
24}
25
26// 字段属性会映射到结构体字段
27#[derive(Live)]
28pub struct Component {
29    #[live] pub width: Size,    // 对应 width: Fill
30    #[live] pub color: Vec4,    // 对应 color: #f00
31}
32
33// 实例属性会创建新的组件实例
34impl Widget for Component {
35    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
36        // 可以通过 button() 访问子实例
37        let button = self.button(id!(button1));
38        button.handle_event(cx, event);
39    }
40}