Theme and Cursor Indicator

Keywords: iced::widget::column, iced::widget::row, iced::widget::horizontal_space, iced::Theme, iced::Length

本节将窗口设置为暗色调，并且通过text控件显示光标的位置。

设置窗口主题

窗口主题通过theme函数设置，定义主题风格的类为iced::Theme，Light和Dark分别表示亮色和暗色调。

use iced::Theme

// ...

impl Sandbox for Editor {
    // ...

    fn theme(&self) -> iced::Theme {
        iced::Theme::Dark // Set the window theme to dark
    }
}

读取文件内容

在程序启动时，我们可以设置一个默认的文件内容，此处可以使用include_str!宏在编译时读取文件内容并用于初始化文本框的状态。

impl Sandbox for Editor {
    // ...

    fn new() -> Self {
        Self {
            content: text_editor::Content::with(include_str!("main.rs"))
        }
    }
}

显示光标位置

文本框的光标位置可以通过self.content状态的cursor_position方法获取，返回一个包含光标位置（从0开始）的元组，可以根据光标位置创建一个text控件用于显示。

• 通过column!宏创建一个列布局，上边包含输入文本框，下边包含光标位置显示。
• 通过row!宏创建一个行布局，结合Length::Fill把光标位置压缩到右侧对齐。

use iced::widget::{column, row, horizontal_space, text};
use iced::Length;

// ...

impl Sandbox for Editor {
    // ...

    fn view(&self) -> Element<'_, Message> {
        let editor = text_editor(&self.content);
        // Query cursor position
        let cursor_indicator = {
            let (line, column) = self.content.cursor_position();

            text(format!("Line: {}, Column: {}", line + 1, column + 1))
        };
        let status_bar = row![horizontal_space(Length::Fill), cursor_indicator];

        container(column![editor, status_bar].spacing(10)).padding(10).into()
    }
}

以下为完整的main.rs文件内容：

Download source code

use iced::{Theme, Element, Sandbox, Settings, Length};
use iced::widget::{column, container, horizontal_space, row, text, text_editor};

fn main() -> iced::Result {
    Editor::run(Settings::default())
}

struct Editor {
    content: text_editor::Content
}

#[derive(Debug, Clone)]
enum Message {
    EditorEdit(text_editor::Action)
}

impl Sandbox for Editor {
    type Message = Message; // Define the type of messages

    fn new() -> Self {
        Self {
            content: text_editor::Content::with(include_str!("main.rs"))
        }
    }

    fn title(&self) -> String {
        String::from("A text editor")
    }

    fn update(&mut self, message: Message) {
        // Handle messages here
        match message {
            Message::EditorEdit(action) => {
                self.content.edit(action);
            }
        }
    }

    fn view(&self) -> Element<'_, Message> {
        // Create the user interface here
        let editor = text_editor(&self.content).on_edit(Message::EditorEdit);

        // Query cursor position
        let cursor_indicator = {
            let (line, column) = self.content.cursor_position();

            text(format!("Line: {}, Column: {}", line + 1, column + 1))
        };
        let status_bar = row![horizontal_space(Length::Fill), cursor_indicator];

        container(column![editor, status_bar].spacing(10)).padding(10).into()
    }

    fn theme(&self) -> Theme {
        Theme::Dark
    }
}

评论