前言

最近学习 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) // 控件间距

觉得有帮助就点个赞吧

学习 Rust GUI iced