前言
最近学习 Rust GUI, 就记录下学 iced 的一些简单代码，代码也上传到了 GitHub，想看完整代码，可直接下载即可。(字体报错找不到，是因为字体十几M太了，所以没放上去，大家随便找个可以显示中文字体的放上去就行了)
用 iced 的版本是 0.3
这个是官方的一些例子，有兴趣可以看一下 https://github.com/hecrj/iced/tree/master/examples
Demo App 的界面
在这里插入图片描述
Font
以下的 XQFONT 均指该 XQFONT
const XQFONT: Font = Font::External {
name: "方正字体",
bytes: include_bytes!("source/FZKT_Document.TTF"), // 用 include_bytes 如果路径错误，会提示的
};
Text
文本
let text = Text::new("我是 Text")
.size(100) // 字体大小
.height(Length::Units(100)) // 高度(默认自适应)
.width(Length::Units(200)) // 宽度(默认自适应)
.color(Color::new(0.2, 0.8, 0.2, 1.0)) // 字颜色
.font(XQFONT) // 字体, XQFONT 是我自定义的字体
.vertical_alignment(VerticalAlignment::Center) // 字纵向的排列
.horizontal_alignment(HorizontalAlignment::Center) // 字横向的排列
Button
按钮
let button = Button::new(&mut self.button_state, Text::new("Touch me!(Button)"))
.on_press(HelloMessage::Button) // 点击发出 message
.min_width(250) // 最小宽度
.min_height(60) // 最小高度
.padding(20) // 内间距
;
CheckBox
复选框
let check_box = Checkbox::new(self.is_checked, "CheckBox", HelloMessage::CheckBox)
.size(30) // 框大小
.spacing(10) // 框和字的间距
.text_size(30) // 字大小
Radio
单选按钮
let radio = Radio::new(
true,
"Radio".to_string(),
Option::Some(self.radio_value),
HelloMessage::Radio,
)
.size(30) // 框大小
.text_size(30) // 字大小
.spacing(10) // 框和字的间距
TextInput
输入框
let text_input = TextInput::new(
&mut self.input_state,
"placeholder",
&self.input_str,
HelloMessage::TextInput,
)
.on_submit(HelloMessage::TextInputSubmit) // 用户按下回车, 发送消息
.padding(10) // 内间距
.password() // 变成密码类型输入框
Slider
滑条
let slider = Slider::new(
&mut self.slider_state,
RangeInclusive::new(0, 100),
self.slider_value,
HelloMessage::Slider,
)
.step(2) // 一次跳转多少
.on_release(HelloMessage::SliderRelease) // 放开 Slider 通知
;
ProgressBar
进度条
let progress_bar =
ProgressBar::new(RangeInclusive::new(0.0, 100.0), self.slider_value as f32);
PickList
选择列表
let pick_list_option = vec![String::from("111"), String::from("222")];
let cow = Cow::Owned(pick_list_option);
let pick_list = PickList::new(
&mut self.pick_list_state,
cow,
Option::Some(self.pick_list_str.clone()),
HelloMessage::PickList,
)
.padding(10) // 内间距
.text_size(30) // 文字大小
Rule
线
// Rule::vertical(spacing) 是竖线
let rule = Rule::horizontal(30);
Tooltip
提示
let tooltip = Tooltip::new(
Text::new("移动到我这里，会出现 Tooltip").font(XQFONT),
"我是 Tooltip",
tooltip::Position::Top,
)
.gap(10) // 和 content 的距离
.font(XQFONT) // 字体
.padding(10) // 提示内间距
.size(30) // 提示字大小
Scrollable
滚动视图
let scrollable = Scrollable::new(&mut self.scrollable_state)
.push(column) // 添加控件
.scrollbar_margin(100) // 滚动条间距
.scrollbar_width(50) // 滚动条背景宽度
.scroller_width(40) // 滚动条宽度
.padding(16) // 内间距
.spacing(12) // 每个控件的间距
.max_height(1000000) // 最大高度
.max_width(1000000) // 最大宽度
Row
行布局
let row = Row::new()
.push(text)
.padding(16) // 内间距
.spacing(12) // 每个控件的间距
.align_items(Align::Start) // 布局对齐方式，默认就是start
.max_height(1000000) // 最大高度
.max_width(1000000) // 最大宽度
Column
列布局
let column = Column::new()
.push(text)
.padding(16) // 内间距
.spacing(12) // 每个控件的间距
.align_items(Align::Start) // 布局对齐方式，默认就是start
.max_height(1000000) // 最大高度
.max_width(1000000) // 最大宽度
PaneGrid
网格布局
let pane_grid = PaneGrid::new(&mut self.pane_grid_state, |_, state| {
// 根据枚举不同，创建不同的控件
pane_grid::Content::new(match state {
PaneState::Vertical => Text::new("我是 pane0, 点我纵向切割").font(XQFONT),
PaneState::Horizontal => Text::new("我是 pane1, 点我横向切割").font(XQFONT),
})
})
.on_drag(HelloMessage::PaneDragged) // 拖动事件
.on_resize(10, HelloMessage::PaneResized) // 刷新布局事件
.on_click(HelloMessage::PaneClick) // 点击事件
.height(Length::Units(500))
.spacing(10) // 控件间距
觉得有帮助就点个赞吧