最近一直在学习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<T> + '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<T> + 'static,
params: impl Into<FlexParams>,
) -> Self {
self.add_flex_child(child, params);
self
}
fix_width
用SizedBox包裹组件，并设置宽度
fix_height
用SizedBox包裹组件，并设置高度
布局实践
实现一个顶部固定高度，底部自适应的效果，同时顶部内实现两边固定宽，中间自适应的三栏布局
fn build_app() -> impl Widget<u32> {
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或前端技术。
