This PR/branch is based on feat-box-widgets

Implementation of Flex with the same API in Flutter. And some relative widgets:

• Expanded
• Row and Column implemented by Flex now
• Remove space_between and cross_axis_size in Column and Row
  • cross_axis_size can be covered with cross_axis_alignment
  • space_between is a specified type of main_axis_alignment. It should only be effective in that mode. Or maybe we do this like Flutter, with some space widgets? Or put the f64 value in MainAxisAlignment::SpaceBetween?

CrossAxisAlignment::Baseline is to be done after we finish the text relative implementations.

Widgets

• ConstrainedBox
• UncontrainedBox
• ColoredBox
• SizedBox

Traits

• ~~BoxLayoutWidget, common for box-model measure and layout~~
• ChildWidget, widgets with children.

Hello, I tried your great ui framework, but I have a problem when trying to run this example:

#[derive(ViewWidget)]
pub struct TextDebug {
    text:String
}

pub struct TextDebugState {
    text:String
}

impl WidgetState for TextDebug {
    type State = TextDebugState;

    fn create_state(&self) -> Self::State { 
        TextDebugState{text:String::from("hello3")} }
}

impl Debug for TextDebug{
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("TextDebug").field("text", &self.text).finish()
    }
}

impl ViewWidget for TextDebug {
    fn build<'w>(&'w self, cx: BuildCx<'w, Self>) -> Self::Widget<'w> {
let textt=cx.state().text.to_owned();
        Text::new( cx.state().text.to_owned())
    }
}

fn main() {
    run_app(App);
}

#[derive(ViewWidget)]
struct App;

impl WidgetState for App {
    type State =String;

    fn create_state(&self) -> Self::State {
        "hello".into()
    }
}

impl ViewWidget for App {
    fn build<'w>(&'w self, cx: BuildCx<'w, Self>) -> Self::Widget<'w> {
        
Column::builder()
.space_between(60.0)
.main_axis_size(MainAxisSize::Max)
.cross_axis_size(CrossAxisSize::Max)
.main_axis_alignment(MainAxisAlignment::Center)
.cross_axis_alignment(CrossAxisAlignment::Center)
.children((
        
        button::Button{
            label:TextDebug{text:cx.state().to_owned()},
            on_click: ||{
                *cx.state_mut()=String::from("hello from button");
            },
        },
        Text::new(
            cx.state().to_owned()
        ),
        TextDebug{text:cx.state().to_owned()},
        
))
    }
}

First of all, the widget always show hello3 instead of hello when initialising. And when the button is clicked, it doesn't update the TextDebug label, but it is working as expected for Text widget. What am I missing ? Thank you in advance for your help.

Basic Container components

• DecoratedBox
• LimitedBox
• Shadow
• ShapeBorder
• etc...

Directional

• Directional trait for different text direction dependency widget
• Directionality for inherited TextDirection

~The polymorphism of abstract class AlignmentGeometry in Rust withtrait is ugly, and it cannot apply to third-party crate derive_builder。 Now change it to two separated struct and wrap them with a sum type AlignmentGeometry, which can be hold in widget with the same type.~ Add TextDirection and resolve from AlignmentGeometry into Alignment

• rewrite Flex implementation
• correctly apply space_between
• fix Container layout algorithm

This implementation differs slightly from Flutter (on purpose), but it can always be changed later.

Hey there! This is really an awesome project, I got amazed by seeing the code design language that you guys are using is identical to flutter which is amazing, and seeing it running in rust would be more amazing.

I suggest to create a discussions page for this project.

• Split RenderContext into LayoutCtx and PaintCtx
• Rename BuildContext to BuildCtx
• Rename PaintCtx to Canvas
• Move rstate and wstate to RenderExt to share logic
• Move try_parent_data and size to RenderOSExt to share logic
• Move all rendering-related structures from frui::prelude to frui::render

Run example

cargo run --example stack

How to use

Stack::builder()
            .alignment(&Alignment::TOP_CENTER)
            .children((
                Text::new("🦀").size(100.0).weight(FontWeight::BOLD),
                Positioned {
                    child: Container::builder()
                    .color(Color::GREEN)
                    .width(50.0)
                    .height(50.0),
                    right: Some(10.0),
                    bottom: Some(10.0),
                    left: None,
                    top: None,
                    width: None,
                    height: None,
                },
                Positioned {
                    child: Container::builder()
                        .color(Color::GREEN)
                        .width(50.0)
                        .height(50.0),
                    right: Some(10.0),
                    bottom: Some(10.0),
                    left: Some(10.0),
                    top: Some(50.0),
                    width: None,
                    height: None,
                },
                Center {
                    child: Text::new("🦀").size(100.0).weight(FontWeight::BOLD),
                },
            ))

Preview

I like very of the approach of using Flutter concepts to mount the UI.

This project will give support for webassembly support?

I also like the approach of async-ui.

As a suggestion, it would be good if you put the concepts together.

I make a issue here, because I couldn't join discord. Sorry.

Thanks.

Frui needs an easy way to handle pointer events. In this issue I wanted to document the overall API I am planning.

✅ Pointer Listener

Widget that responds to low-level pointer events.

PointerListener::builder()
    .on_pointer_down(|e| { ... })
    .on_pointer_up(|e| { ... })
    .on_pointer_scroll(|e| { ... })

✅ Pointer Region

Widget that responds to pointer entering child's widget region. It also allows changing cursor icon (e.g. to a pointer icon when hovering over a button).

PointerRegion::builder()
    .cursor(Cursor::Pointer)
    .on_enter(|e| { ... })
    .on_move(|e| { ... })
    .on_exit(|e| { ... })

Gesture Detector

Widget that distinguishes between different high-level gestures.

GestureDetector::builder()
    .on_tap(|e| { ... })
    .on_double_tap(|e| { ... })
    .on_vertical_drag(|e| { ... })
    // ...

I was thinking about adding an ability to directly extend that widget with custom gestures:

fn add_gesture<G: Gesture>(self, gesture: G, callback: impl Fn(G::Event)) -> Self {
    // ...
}

Above builder method could then be abstracted using extension trait and used like:

GestureDetector::builder()
    .on_tap(|_| { ... })
    .on_my_custom_gesture(|_| { ... })

As of now, I am working on implementing PointerListener and KeyboardListener (other issue).

GestureDetector is a little bit tricky to implement and not that useful on PC, so I plan to implement it later when we will focus on supporting mobile devices. For now, PointerListener and PointerRegion should be enough for handling input on PC.

Following is a list of some of the more important core layout widgets that need to be implemented. Their exact API is up for debate, since there may be better ways to adapt those to Rust.

Single-child layout widgets

• [ ] Align
• [x] Center
• [ ] Padding
• [ ] Transform

• [x] SizedBox
• [ ] FittedBox
• [ ] LimitedBox
• [ ] OverflowBox
• [x] ConstrainedBox
• [ ] SizedOverflowBox
• [ ] FractionallySizedBox

• [x] Flexible
• [x] Expanded

• [ ] Container
• [ ] AspectRatio

Multi-child layout widgets

• [x] Row
• [ ] Wrap
• [x] Stack
• [x] Column

• [ ] Table
• [ ] ListView
• [ ] GridView