组件

为需要保存状态的界面实现 View。无状态片段可以用返回 Element 的函数。

#定义组件

struct Greeting {
    name: String,
}

impl View for Greeting {
    fn render(&mut self, _cx: &mut ViewContext<'_, Self>) -> impl IntoElement {
        text(format!("Hello, {}", self.name))
    }
}

没有自己状态的子视图也可以写成返回 Element 的函数。

#基础组件

div、text、button、text_input、text_area、img、svg、custom_shader 和 VirtualList 是基础构件。submit_button 会提交最近的 form。Markdown 使用 features = ["markdown"]；Editor、CodeBlock 和 DiffView 使用 features = ["editor"]；Terminal 也是可选功能。

#复合组件

let checkbox = Checkbox::new(self.checked);
checkbox
    .root()
    .flex_row()
    .gap(8.0)
    .on_click(toggle)
    .child(checkbox.indicator_with(div().size(16.0, 16.0)))
    .child(text("Remember this device"))

把部件放在所属的 root 下，这样焦点和值才会保持关联。

#受控状态

把值保存在 View 上，传入构造函数，并在监听器中更新。然后调用 cx.invalidate()。状态由 View 拥有。

#组件类别

组件参考 覆盖表单、浮层、菜单、表格、树等。examples/base_ui_components.rs 是组件画廊。

#设置各部件的样式

在每个可见部件上使用链式样式方法。部件默认无样式，颜色和布局由应用决定。TabsState 和 SelectState 等类型会暴露当前状态，便于自定义呈现。