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_width或expand_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或前端技术。