最近一直在學習Rust的Gui框架Druid昔案，不得不說文檔是真的少，國內文檔就更少了电媳，一切都靠自己摸索踏揣，下面主要介紹下Flex布局的用法，筆者也是在學習階段匾乓，有錯誤的地方捞稿，請幫忙指出。
Flex::row()
創(chuàng)建一個新的水平堆棧拼缝，子元素從左到右水平布局娱局。相當于css：
{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
Flex::column()
創(chuàng)建一個新的垂直堆棧，子元素從上到下垂直布局咧七。相當于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包裹組件背蟆，并設置高度
布局實踐
實現(xiàn)一個頂部固定高度鉴分，底部自適應的效果，同時頂部內實現(xiàn)兩邊固定寬带膀，中間自適應的三欄布局
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或前端技術。
