Skip to main content

Module ui

Module ui 

Source
Expand description

The widget vocabulary as composables: the same widgets, the same properties and the same Modifier slots the rsx! layer writes, with Compose’s names and Compose’s shape.

ⓘ
use compose_rust::runtime::*;
use compose_rust::ui::*;

#[composable]
fn Greeting(name: String) {
    Column().modifier(Modifier.padding(16.0).fill_max_width()).content(|| {
        Text(format!("Hello, {name}")).type_role(TypeRole::Title);
        Button("Wave").on_click(|| show_message("Hello back"));
    });
}

A widget is written as a statement. Text("Hello") creates a description and the statement’s end hands it to the composition; the methods in between set what Compose would take as named arguments. A container’s children are the closure given to content, which runs at once. Binding a widget to a variable delays it to the end of the variable’s scope, so a widget is not bound.

Nothing here defines a widget. Each composable writes exactly the attributes its rsx! counterpart writes, through the same translation into wire records, so a screen written either way is the same tree of the same nodes for the Renderer. A Modifier the rsx! counterpart does not accept is still written when it is set, because the wire carries every Modifier slot on every node.

Re-exports§

pub use crate::boundary::LaunchBuilder;
pub use crate::brush::Brush;
pub use crate::brush::Stop;
pub use crate::brush::brush;
pub use crate::drawing::DrawCommand;
pub use crate::drawing::DrawList;
pub use crate::drawing::DrawListBuilder;
pub use crate::message::Message;
pub use crate::message::show_message;
pub use crate::runtime::application;
pub use crate::runtime::launch;
pub use crate::schema::Alignment;
pub use crate::schema::Arrangement;
pub use crate::schema::ButtonKind;
pub use crate::schema::ButtonVariant;
pub use crate::schema::Color;
pub use crate::schema::ColorRole;
pub use crate::schema::ColorScheme;
pub use crate::schema::DesignSystem;
pub use crate::schema::IconRole;
pub use crate::schema::Key;
pub use crate::schema::MaterialRole;
pub use crate::schema::MessageDuration;
pub use crate::schema::MotionRole;
pub use crate::schema::Paint;
pub use crate::schema::ShapeRole;
pub use crate::schema::SpaceRole;
pub use crate::schema::TextAlign;
pub use crate::schema::TextOverflow;
pub use crate::schema::Theme;
pub use crate::schema::TypeRole;
pub use crate::schema::WindowHeightClass;
pub use crate::schema::WindowSizeClass;
pub use crate::spans::TextSpans;
pub use crate::theme::ThemeHandle;
pub use crate::theme::current_theme;
pub use crate::window::NodeSize;
pub use crate::window::WindowSize;
pub use crate::Cursor;
pub use crate::FileDrop;
pub use crate::KeyEvent;
pub use crate::PointerEvent;
pub use crate::PointerKind;
pub use crate::PointerKinds;
pub use crate::RangeRequest;
pub use crate::UserSelect;
pub use crate::asset;
pub use crate::asset;
pub use crate::pointer_button;

Structs§

AssetScope
An Image or an Icon and its builder.
BadgeScope
A Badge and its builder.
ButtonScope
A Button and its builder.
CanvasScope
A Canvas and its builder.
CardScope
A Card and its builder.
CheckboxScope
A Checkbox and its builder.
ChipScope
A Chip and its builder.
ColumnScope
A Column and its builder.
ComposeBox
A Box and its builder. Named apart from std::boxed::Box, which a glob import of this module would otherwise hide.
DatePickerScope
A DatePicker and its builder.
DividerScope
A Divider and its builder.
DropdownScope
A Dropdown and its builder.
FileDropTargetScope
A FileDropTarget and its builder.
FloatingActionScope
A FloatingAction and its builder.
LazyList
A lazy list and its builder.
LazyListScope
What a lazy list’s builder is handed. Compose’s LazyListScope.
LinearProgressIndicatorScope
The worked extension widget: Material 3’s determinate linear progress indicator.
MenuScope
A Menu and its builder.
ModalScope
A Dialog or a Sheet and its builder: open seeds the Renderer’s own open state, and on_dismiss says once that the user asked to close it.
Modifier
What sits around a widget: its size, its surface, its outline, how far its content is inset, and what the Renderer reports about it. Compose’s Modifier.
NavigationItemScope
A NavigationItem and its builder.
NavigationScope
A Navigation and its builder.
ProgressIndicatorScope
A ProgressIndicator and its builder.
RadioButtonScope
A RadioButton and its builder.
RowScope
A Row and its builder.
ScaffoldScope
A Scaffold and its builder.
ScrollColumnScope
A ScrollColumn and its builder.
ScrollRowScope
A ScrollRow and its builder.
SelectionContainerScope
A SelectionContainer and its builder.
SliderScope
A Slider and its builder.
SpacerScope
A Spacer and its builder.
SplitPaneScope
A SplitPane and its builder.
SurfaceScope
A Surface and its builder.
SwitchScope
A Switch and its builder.
TabsScope
A Tabs and its builder.
TextFieldScope
A TextField and its builder.
TextScope
A Text and its builder.
TimePickerScope
A TimePicker and its builder.
TooltipScope
A Tooltip and its builder.
TopAppBarScope
A TopAppBar and its builder.

Constants§

Modifier
The empty Modifier, to start a chain from: Modifier.padding(8.0).

Functions§

Badge
A count, a word or a dot, on its child or on its own. Compose’s BadgedBox and Badge.
Box
Stacks its children on top of each other. Compose’s Box.
Button
A button with a label. Compose’s Button; the variant is the design system’s seam, so ButtonVariant::Text is Compose’s TextButton and Outlined its OutlinedButton.
Canvas
Pixels the widget vocabulary cannot produce. Compose’s Canvas, with the drawing as a value rather than a callback: drawing code cannot cross into the Renderer, and an equal list costs no record.
Card
A grouped container. What it looks like is the design system’s.
Checkbox
A box that is ticked or not. Compose’s Checkbox(checked, onCheckedChange).
Chip
A small token that is chosen or filters. Compose’s FilterChip.
Column
Lays its children out one after another. Compose’s Column.
DatePicker
A date, as whole days since 1970-01-01. How it is picked is the design system’s.
Dialog
A modal. Compose’s Dialog, kept in the tree and opened by open, so its enter and exit belong to the Renderer.
Divider
A line between two things. Compose’s HorizontalDivider; vertical makes it the other.
Dropdown
One choice out of a list; each child is one option.
FileDropTarget
A place files may be dropped. Desktop only in effect.
FloatingAction
The one action a screen is about. Compose’s ExtendedFloatingActionButton; where it goes is the design system’s answer.
Icon
A registered icon, tinted. Compose’s Icon.
Image
A registered asset drawn as a picture. Compose’s Image.
IndeterminateProgressIndicator
Work in progress of no known length.
LazyColumn
A vertical list that composes only the items on screen. Compose’s LazyColumn.
LazyGrid
A grid that composes only the rows on screen. Compose’s LazyVerticalGrid; say how wide a column is with columns or min_column_width.
LazyRow
A horizontal list that composes only the items on screen. Compose’s LazyRow.
LinearProgressIndicator
The extension widget the schema carries as its example.
Menu
A popup hanging off its anchor. Compose’s DropdownMenu, with the anchor said rather than positioned: the Renderer places the popup.
Navigation
A set of destinations and the screen they lead to. The children that are NavigationItems are the destinations; whether they are a bar, a rail or a drawer is the Renderer’s choice. Compose’s NavigationSuiteScaffold.
NavigationItem
One destination inside a Navigation. Compose’s NavigationSuiteItem.
ProgressIndicator
How far along something is, as a fraction. Compose’s LinearProgressIndicator(progress).
RadioButton
One choice out of several. Compose’s RadioButton(selected, onClick).
Row
Lays its children out one after another. Compose’s Row.
Scaffold
The screen’s frame: which slots it has filled, and the page. Compose’s Scaffold. What each slot becomes on this platform at this width is the Renderer’s decision.
ScrollColumn
All of its content, with a vertical scroll the Renderer owns.
ScrollRow
All of its content, with a horizontal scroll the Renderer owns.
SelectionContainer
Every Text inside can be selected and copied as one selection.
Separator
A hairline between two rows of a grouped list, in the design system’s quiet edge or the given colour. The same node as Divider().modifier(Modifier.background(color)).
Sheet
A surface that slides in from the edge the Renderer chooses. Compose’s ModalBottomSheet, without a promise about which edge.
Slider
A value picked from a range. Compose’s Slider. The drag is the Renderer’s; value seeds it and moves it when the change came from elsewhere.
Spacer
Empty space, sized by its Modifier.
SplitPane
A side pane and a body with a divider the user drags. Exactly two children, side pane first. The drag is reported once, when it ends.
Surface
A plain background and elevation, without a card’s meaning.
Switch
An on and off control. Compose’s Switch(checked, onCheckedChange).
Tabs
A row of tabs; each child is one tab, and a tap is that child’s own click. Compose’s TabRow.
Text
Text. Compose’s Text.
TextField
An uncontrolled text field. Compose’s TextField, with the value kept where the platform’s text input keeps it: the Renderer reports each change and the Host never writes the value back while the user types.
TimePicker
A time of day, as minutes since midnight.
Tooltip
An explanation attached to its child, which assistive technology reads too. Compose’s TooltipBox.
TopAppBar
The bar across the top of a screen; its children are its content. Compose’s TopAppBar, with the title a property so the Renderer can find it.
theme
The application’s theme, to read and to change while it runs. A change is one SetTheme record in the batch the call that made it produces.