指南
线上沙龙
工作坊
示例入手
贡献
指南
线上沙龙
工作坊
示例入手
贡献
简体中文

Live DSL 建议编码规范

命名规范

组件类型命名

  • 使用 PascalCase(大驼峰)命名组件类型
  • 以功能性名词命名，表明语义
1// Good
2Button = {{Button}} { }
3DropDownList = {{DropDownList}} { }
4ScrollView = {{ScrollView}} { }
5
6// Bad
7button = {{button}} { }
8dropdownlist = {{dropdownlist}} { }
9scroll_view = {{scroll_view}} { }

实例属性命名

  • 当实例是可复用、需要引用的UI组件时,使用 PascalCase
  • 当实例是布局容器或装饰性元素时,使用 snake_case
1Dialog = {{Dialog}} {
2    // 可交互、需要引用的组件用 PascalCase
3    OkButton = <Button> { }
4    CancelButton = <Button> { }
5
6    // 布局容器用 snake_case
7    content_area = <View> {
8        header = <View> { }
9        body = <View> { }
10        footer = <View> { }
11    }
12}

字段属性命名

使用 snake_case 命名所有字段属性

1Button = {{Button}} {
2    // Good
3    background_color: #fff,
4    border_width: 1.0,
5    corner_radius: 4.0,
6
7    // Bad
8    backgroundColor: #fff,
9    BorderWidth: 1.0,
10    cornerRadius: 4.0,
11}

缩进和空格

缩进

  • 使用 4 个空格进行缩进
  • 每个嵌套层级增加一级缩进
1Container = {{View}} {
2    width: Fill,
3    height: Fill,
4
5    Header = <View> {
6        height: 60,
7
8        Title = <Label> {
9            text: "Hello"
10        }
11    }
12}

空格和换行

  • 属性冒号后加一个空格
  • 大括号前后各加一个空格
  • 实例定义之间用空行分隔
  • 相关的字段属性可以组合在一起
1Container = {{View}} {
2    // 布局相关属性组合在一起
3    width: Fill,
4    height: Fill,
5    flow: Down,
6    spacing: 10,
7
8    // 视觉相关属性组合在一起
9    background_color: #fff,
10    border_width: 1.0,
11    corner_radius: 4.0,
12
13    // 子实例之间空行分隔
14    Header = <View> {
15        height: 60
16    }
17
18    Content = <View> {
19        flow: Down
20    }
21
22    Footer = <View> {
23        height: 40
24    }
25}

属性排序

建议按以下顺序组织属性:

  1. 布局属性(width, height, margin等)
  2. 视觉属性(color, border等)
  3. 行为属性(cursor, grab_key_focus等)
  4. 动画属性(animator)
  5. 子组件实例
1Button = {{Button}} {
2    // 1. 布局属性
3    width: 100,
4    height: 40,
5    margin: {left: 10, right: 10},
6
7    // 2. 视觉属性
8    background_color: #fff,
9    border_width: 1.0,
10    corner_radius: 4.0,
11
12    // 3. 行为属性
13    cursor: Pointer,
14    grab_key_focus: true,
15
16    // 4. 动画属性
17    animator: {
18        hover = {
19            default: off
20        }
21    },
22
23    // 5. 子组件实例
24    Icon = <Icon> { },
25
26    Label = <Label> { }
27}

组件结构

基础组件定义

  • 基础组件使用双大括号语法
  • 组件名和实现需一致
1// 基础组件定义
2Button = {{Button}} { }
3Label = {{Label}} { }

组件继承和组合

  • 继承使用尖括号语法
  • 组合使用实例属性
1// 继承
2PrimaryButton = <Button> {
3    background_color: #2196f3
4}
5
6// 组合
7CardView = {{View}} {
8    header = <View> { }
9    content = <View> { }
10}

注释规范

组件注释

  • 在组件定义前添加说明性注释
  • 说明组件的用途和重要属性
1// 主要操作按钮
2// 支持 size: small | medium | large
3// 支持 variant: contained | outlined | text
4PrimaryButton = <Button> {
5    background_color: #2196f3
6}

分组注释

  • 使用注释对相关属性进行分组
1Dialog = {{Dialog}} {
2    // -------- Layout --------
3    width: 400,
4    height: 300,
5
6    // -------- Visual --------
7    background_color: #fff,
8    shadow_color: #0007,
9
10    // -------- Components --------
11    Header = <View> { }
12    Content = <View> { }
13}

模式和最佳实践

可复用组件

  • 抽取可复用的样式和布局为单独的组件
  • 使用继承扩展基础组件
1// 基础卡片组件
2Card = {{View}} {
3    background_color: #fff,
4    corner_radius: 4.0,
5    shadow_color: #0007
6}
7
8// 特定用途的卡片
9ProductCard = <Card> {
10    width: 200,
11    height: 300
12}