[Rust] iced: 레이아웃 - Stack

0.13 버전 기준이다.

Stack 컴포넌트

Stack 컴포넌트는 이름 그대로 컴포넌트를 쌓아올리는 역할을 하는 위젯이다.
요소 순서대로 층층이 쌓아올린다.

예를 들어, 이 코드는 배경에 먼저 빨간색을 크게 깔고, 그 안에 stack으로 초록색, 파란색을 깐다.
딱 정의한 순서대로 깔고 보는 것이다.

그렇게 돌려보면

의도한대로 나타날 것이다.

위처럼 뭔가를 중첩시켜서 표현할때 유용하다.

예제 코드

use iced::widget::{container, stack, text};
use iced::{Background, Color, Element, Length, Settings, Size};

pub struct MainApp {}

#[derive(Debug, Clone)]
pub enum Message {}

impl MainApp {
    pub fn new() -> Self {
        let app = Self {};

        app
    }
    pub fn theme(&self) -> iced::Theme {
        iced::Theme::Dracula
    }

    pub fn update(&mut self, message: Message) {
        match message {}
    }

    pub fn view(&self) -> Element<Message> {
        let content = container(stack![
            container(text("c"))
                .width(Length::Fill)
                .height(Length::Fill)
                .style(|_| {
                    let mut style = container::Style::default();
                    style.background = Some(Background::Color(Color::from_rgb8(0, 255, 0)));
                    style
                })
                .width(Length::Fixed(250.0))
                .height(Length::Fixed(250.0)),
            container(text("d"))
                .width(Length::Fill)
                .height(Length::Fill)
                .style(|_| {
                    let mut style = container::Style::default();
                    style.background = Some(Background::Color(Color::from_rgb8(0, 0, 255)));
                    style
                })
                .width(Length::Fixed(200.0))
                .height(Length::Fixed(200.0)),
        ])
        .width(Length::Fixed(300.0))
        .height(Length::Fixed(300.0))
        .style(|_| {
            let mut style = container::Style::default();

            style.background = Some(Background::Color(Color::from_rgb8(255, 0, 0)));

            style
        })
        .into();

        content
    }
}

impl Default for MainApp {
    fn default() -> Self {
        Self::new()
    }
}

fn main() -> iced::Result {
    let setting = Settings::default();

    iced::application("test", MainApp::update, MainApp::view)
        .settings(setting)
        .resizable(false)
        .window_size(Size::new(600.0, 600.0))
        .theme(MainApp::theme)
        .run()
}

응용: Modal 구현

기본 창 위에 작은 창을 띄우는걸 보통 모달이라고 부른다.

Stack의 흔한 응용례 중 하나가 이렇게 중첩된 위젯을 표시하는 것이다보니, 모달 같은걸 구현할 때도 Stack을 주로 사용한다.

먼저 모달을 현재 표시하는 상태인지에 대한 상태값이 필요하다.

그리고 당연히 모달을 켜고 끄는 이벤트에 대해서도 핸들링이 되어야한다.

stack 기반으로 간단한 보일러플레이트를 만들었다.
이러면 기존 위젯을 전부 바닥에 깔고, 모달을 위에 까는 형태로 구성이 된다.

view에서는 이런 식으로 해서, show_modal이 켜져있으면 방금 정의한 보일러플레이트 기반으로 모달 뷰를 중첩해서 띄우고, 아니면 그냥 모달 없는채로 표시하도록 하면 된다.

그리고 버튼으로 모달을 켜고, 모달 밖을 누르면 모달이 꺼지도록 했다.

그렇게 실행해보면

의도한대로 동작할 것이다.

아래는 전체 예제코드다.

use iced::widget::{button, center, container, mouse_area, opaque, stack, text};
use iced::{Color, Element, Length, Settings, Size};

pub fn create_modal<'a, Message>(
    base: impl Into<Element<'a, Message>>,
    content: impl Into<Element<'a, Message>>,
    on_blur: Message,
) -> Element<'a, Message>
where
    Message: Clone + 'a,
{
    stack![
        base.into(),
        opaque(
            mouse_area(center(opaque(content)).style(|_theme| {
                container::Style {
                    background: Some(
                        Color {
                            a: 0.8,
                            ..Color::BLACK
                        }
                        .into(),
                    ),
                    ..container::Style::default()
                }
            }))
            .on_press(on_blur)
        )
    ]
    .into()
}

pub struct MainApp {
    show_modal: bool,
}

#[derive(Debug, Clone)]
pub enum Message {
    OpenModal,
    CloseModal,
}

impl MainApp {
    pub fn new() -> Self {
        let app = Self { show_modal: false };

        app
    }
    pub fn theme(&self) -> iced::Theme {
        iced::Theme::Dracula
    }

    pub fn update(&mut self, message: Message) {
        match message {
            Message::OpenModal => {
                self.show_modal = !self.show_modal;
            }
            Message::CloseModal => {
                self.show_modal = false;
            }
        }
    }

    pub fn view(&self) -> Element<Message> {
        let content = container(button(text("Foo").size(12)).on_press(Message::OpenModal))
            .width(Length::Fill)
            .height(Length::Fill)
            .into();

        if self.show_modal {
            let modal_view = container(text("Bar").size(24))
                .width(250)
                .padding(10)
                .style(container::rounded_box);

            create_modal(content, modal_view, Message::CloseModal)
        } else {
            content
        }
    }
}

impl Default for MainApp {
    fn default() -> Self {
        Self::new()
    }
}

fn main() -> iced::Result {
    let setting = Settings::default();

    iced::application("test", MainApp::update, MainApp::view)
        .settings(setting)
        .resizable(false)
        .window_size(Size::new(200.0, 200.0))
        .theme(MainApp::theme)
        .run()
}