Trait View
pub trait View: Sized + 'static {
// Provided methods
fn build<F>(self, cx: &mut Context, content: F) -> Handle<'_, Self>
where F: FnOnce(&mut Context) { ... }
fn element(&self) -> Option<&'static str> { ... }
fn event(&mut self, cx: &mut EventContext<'_>, event: &mut Event) { ... }
fn draw(&self, cx: &mut DrawContext<'_>, canvas: &Canvas) { ... }
fn accessibility(&self, cx: &mut AccessContext<'_>, node: &mut AccessNode) { ... }
}Expand description
A view is any object which can be displayed on the screen.
§Creating a Custom View
To create a custom view, first define a struct with any view-specific state.
pub struct CustomView {
count: i32,
}Next, implement the constructor for the custom view. Typically, the constructor will take &mut Context as the first argument
and return a Handle to the view.
pub struct CustomView {
count: i32,
}
impl CustomView {
pub fn new(cx: &mut Context, count: i32) -> Handle<Self> {
Self {
count,
}.build(cx, |cx|{
// If we want the view to contain other views we can build those here.
})
}
}
The build method above is provided by the View trait, which we must implement for any custom view.
pub struct CustomView {
count: i32,
}
impl CustomView {
pub fn new(cx: &mut Context, count: i32) -> Handle<Self> {
Self {
count,
}.build(cx, |cx|{
// If we want the view to contain other views we can build those here.
})
}
}
impl View for CustomView {
}The View trait contains methods, which can be optionally overridden, for assigning an element name, handling events, and performing custom drawing.
Provided Methods§
fn build<F>(self, cx: &mut Context, content: F) -> Handle<'_, Self>
fn build<F>(self, cx: &mut Context, content: F) -> Handle<'_, Self>
Builds the view into the tree and returns a handle which can be used to apply style and layout modifiers to the view.
Typically this method is called within the constructor of a view, for example:
pub struct CustomView{}
impl CustomView {
pub fn new(cx: &mut Context) -> Handle<Self> {
Self{}.build(cx, |_|{})
}
}The content closure allows for a view to be built from other views. For example, a custom view could encapsulate a
pair of labels:
pub struct CustomView{}
impl CustomView {
pub fn new(cx: &mut Context) -> Handle<Self> {
Self{}.build(cx, |cx|{
Label::new(cx, "Hello");
Label::new(cx, "World");
})
}
}fn element(&self) -> Option<&'static str>
fn element(&self) -> Option<&'static str>
Specifies a name for the view type which can be used as an element selector in css.
§Example
pub struct CustomView{}
impl CustomView {
pub fn new(cx: &mut Context) -> Handle<Self> {
Self{}.build(cx, |_|{})
}
}
impl View for CustomView {
fn element(&self) -> Option<&'static str> {
Some("custom_view")
}
}Then in css:
custom_view {
background-color: red;
}fn event(&mut self, cx: &mut EventContext<'_>, event: &mut Event)
fn event(&mut self, cx: &mut EventContext<'_>, event: &mut Event)
Handles any events received by the view.
§Example
pub struct CustomView{}
impl CustomView {
pub fn new(cx: &mut Context) -> Handle<Self> {
Self{}.build(cx, |_|{})
}
}
impl View for CustomView {
fn event(&mut self, cx: &mut EventContext, event: &mut Event) {
event.map(|window_event, meta| match window_event{
WindowEvent::MouseDown(_) => {
if meta.target == cx.current() {
// Emit a `WindowClose` event when this view is clicked on.
cx.emit(WindowEvent::WindowClose);
}
}
_=> {}
});
}
}fn draw(&self, cx: &mut DrawContext<'_>, canvas: &Canvas)
fn draw(&self, cx: &mut DrawContext<'_>, canvas: &Canvas)
Provides custom drawing for the view.
Usually the look of a view is determined by the style and layout properties of the view. However, the draw method of
the View trait can be used to provide completely custom drawing for the view. The properties of the view can be accessed
through the provided DrawContext and the provided Canvas can be used to draw custom paths.
§Example
pub struct CustomView{}
impl CustomView {
pub fn new(cx: &mut Context) -> Handle<Self> {
Self{}.build(cx, |_|{})
}
}
impl View for CustomView {
fn draw(&self, cx: &mut DrawContext, canvas: &mut Canvas) {
// Get the bounding box of the current view.
let bounds = cx.bounds();
// Create a new `Path` from the `vg` module.
let mut path = vg::Path::new();
// Add a rectangle to the path with the dimensions of the view bounds.
path.rect(bounds.x, bounds.y, bounds.w, bounds.h);
// Fill the path onto the canvas with a red color.
canvas.fill_path(&mut path, &vg::Paint::color(Color::red().into()));
}
}