feat: Config background color

src/paint.rs

@@ -1,9 +1,9 @@
 use iced::Theme;
 use iced::padding;
 use iced::widget::container;
-use iced::widget::{Column, Grid, button, column, image, row};
-use iced::{Border, Color, Length, Point, Task};
-
+use iced::widget::{Column, button, column, image, row};
+use iced::{Border, Color, Length, Point, Task, Element, Renderer};
+use iced_core::color;
 use crate::image_button::image_button;
 use crate::mouse_area::mouse_area;
 
@@ -175,20 +175,49 @@ impl Paint {
             .on_release(|pos| Message::MouseReleased(pos))
             .on_move(|pos| Message::MouseMoved(pos));
         // 注意：mouse_area 的 on_move 给出的坐标通常是相对于 widget 左上角的，这正是我们需要的！
+        let canvas_area = container(canvas_area)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .padding(padding::left(5).top(5))
+            .style(|_| {
+                container::Style {
+                    background: Some(color!(0x808080).into()),
+                    ..container::Style::default()
+                }
+            });
 
-        let mut grid = Grid::new();
-        grid = grid.columns(2).width(100);
-
-        for i in 0..(Tool::Count as usize) {
-            let tool = Tool::from(i);
-            let btn = image_button(
+        let mut columns: Vec<Element<'_, Message, Theme, Renderer>> = Vec::new();
+        for i in (0..(Tool::Count as usize)).step_by(2) {
+            let btn1 = image_button(
                 format!("image/normal/normal_{:02}.jpg", i + 1),
                 format!("image/selected/selected_{:02}.jpg", i + 1),
                 self.tool_states[i],
             )
-            .on_press(Message::ClickTool(tool));
-            grid = grid.push(btn);
+                .on_press(Message::ClickTool(Tool::from(i)));
+            let btn2 = image_button(
+                format!("image/normal/normal_{:02}.jpg", i + 2),
+                format!("image/selected/selected_{:02}.jpg", i + 2),
+                self.tool_states[i+1],
+            )
+                .on_press(Message::ClickTool(Tool::from(i + 1)));
+            columns.push(row![btn1, btn2].into());
         }
+        let tool_config_area = container("").width(90).height(200).style(|theme: &Theme| {
+            let palette = theme.extended_palette();
+
+            container::Style {
+                background: Some(Color::from_rgb8(192, 192, 192).into()),
+                border: Border {
+                    width: 1.0,
+                    radius: 5.0.into(),
+                    color: palette.background.weak.color,
+                },
+                ..container::Style::default()
+            }
+        });
+        let tool_config_area = container(tool_config_area).padding(padding::top(5).left(5));
+        columns.push(tool_config_area.into());
+        let grid = Column::from_vec(columns).height(Length::Fill);
 
         let tool_area = container(grid)
             .padding(padding::top(5).left(5).right(5).bottom(100))
@@ -702,6 +731,6 @@ impl Paint {
 
 pub fn main() -> iced::Result {
     iced::application(Paint::new, Paint::update, Paint::view)
-        .theme(Theme::CatppuccinMocha)
+        .theme(Theme::Dark)
         .run()
 }