Rust Druid之Flex布局

最近一直在学习Rust的Gui框架Druid,不得不说文档是真的少,国内文档就更少了,一切都靠自己摸索,下面主要介绍下Flex布局的用法,笔者也是在学习阶段,有错误的地方,请帮忙指出。

Flex::row()

创建一个新的水平堆栈,子元素从左到右水平布局。相当于css:

{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

Flex::column()

创建一个新的垂直堆栈,子元素从上到下垂直布局。相当于css:

{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

add_child

添加一个non-flex的子组件。

with_child

add_child的变体用法,便于链式调用,源码:

pub fn with_child(mut self, child: impl Widget + 'static) -> Self {
  self.add_child(child);
  self
}

add_flex_child

添加一个flexible的子组件。

注意:即使元素是flexible,它默认也不会撑满所有空间,如果需要占满空间,可以调用expand_widthexpand_height方法。

with_flex_child

add_flex_child的变体用法,便于链式调用,源码:

pub fn with_flex_child(
  mut self,
  child: impl Widget + 'static,
  params: impl Into,
) -> Self {
  self.add_flex_child(child, params);
  self
}

fix_width

SizedBox包裹组件,并设置宽度

fix_height

SizedBox包裹组件,并设置高度

布局实践

实现一个顶部固定高度,底部自适应的效果,同时顶部内实现两边固定宽,中间自适应的三栏布局

fn build_app() -> impl Widget {
    let mut col = Flex::column().with_child(
        Flex::row()
            .with_child(Label::new("left"))
            .with_flex_child(Label::new("center").center(), 1.0)
            .with_child(Label::new("right"))
            .fix_height(100.0)
            .background(Color::rgb8(0, 0x77, 0x88)),
    );
    col.add_flex_child(Label::new("body").center().background(Color::RED), 1.0);
    col.debug_paint_layout()
}

效果:

image.png

欢迎关注公众号“前端家园”,一起探讨Rust或前端技术。

你可能感兴趣的:(Rust Druid之Flex布局)