[rust] GUI crateを調査

// カウンター
// Doc.rsより

use dioxus::prelude::*;

fn main() {
    dioxus::launch(app);
}

fn app() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    }
}

// ToDo List
// AI生成に多少修正

use dioxus::prelude::*;

const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");

#[derive(Debug, Clone, PartialEq)]
struct TodoItem {
    task: String,
    is_done: bool,     // 確定された状態
    draft_done: bool,  // チェックボックスの一時的な状態
}

#[derive(Debug, Clone, Copy, PartialEq)]
enum FilterMode {
    All,
    Active,
    Completed,
}

#[allow(non_snake_case)]
fn App() -> Element {
    // 1. TODOリストのSignal
    let mut todo_list = use_signal(|| {
        vec![
            // TodoItem {
            //     task: "Rustの勉強をする".to_string(),
            //     is_done: false,
            //     draft_done: false,
            // },
        ]
    });

    // 2. 新規タスクの入力文字列を管理するSignal
    let mut new_task_text = use_signal(String::new);

    // 3. 表示モードのSignal
    let mut filter_mode = use_signal(|| FilterMode::All);

    // 4. 画面全体のどこかに未確定の変更があるかをチェックするフラグ
    let has_changes = todo_list.read().iter().any(|item: &TodoItem| item.draft_done != item.is_done);

    // 5. 表示するアイテムを事前にフィルタリング
    let current_filter = filter_mode();
    let filtered_todos: Vec<(usize, TodoItem)> = todo_list
        .read()
        .iter()
        .cloned()
        .enumerate()
        .filter(|(_, item)| match current_filter {
            FilterMode::All => true,
            FilterMode::Active => !item.is_done,
            FilterMode::Completed => item.is_done,
        })
        .collect();

    rsx! {
        document::Link { rel: "stylesheet", href: TAILWIND_CSS }
        div { class: "p-6 max-w-xl mx-auto bg-white rounded-xl shadow-md space-y-4 mt-10",
            h2 { class: "text-2xl font-bold text-gray-900 border-b pb-2", "📌 TODOリスト" }

            // 🌟 --- 新規タスク追加フォーム ---
            form {
                style: "flex gap-2",
                // フォームのデフォルトの送信挙動（画面リロード）を防ぐ
                onsubmit: move |evt| {
                    evt.stop_propagation();
                },
                
                input {
                    r#type: "text",
                    placeholder: "新しいタスクを入力...",
                    value: "{new_task_text}",
                    class: "flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
                    // 入力内容をリアルタイムにSignalに同期
                    oninput: move |evt| new_task_text.set(evt.value()),
                }
                
                button {
                    r#type: "submit",
                    class: "px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 transition duration-200",
                    // クリック時にタスクを追加
                    onclick: move |_| {
                        let text = new_task_text.read().trim().to_string();
                        if !text.is_empty() {
                            // リストの末尾に新しいタスクを追加（初期状態は未完了）
                            todo_list.write().push(TodoItem {
                                task: text,
                                is_done: false,
                                draft_done: false,
                            });
                            // 入力欄をクリア
                            new_task_text.set(String::new());
                        }
                    },
                    "追加"
                }
            }

            // --- コントロールエリア（表示切り替え ＆ 一括反映ボタン） ---
            div { class: "flex items-center justify-between gap-4 py-2 border-b",
                
                // 表示切り替えタブ
                div { class: "flex gap-1 bg-gray-100 p-1 rounded-lg",
                    button {
                        class: format!("px-3 py-1.5 text-sm font-medium rounded-md transition {}", 
                            if filter_mode() == FilterMode::All { "bg-white shadow text-gray-900" } else { "text-gray-500 hover:text-gray-900" }
                        ),
                        onclick: move |_| filter_mode.set(FilterMode::All),
                        "すべて"
                    }
                    button {
                        class: format!("px-3 py-1.5 text-sm font-medium rounded-md transition {}", 
                            if filter_mode() == FilterMode::Active { "bg-white shadow text-gray-900" } else { "text-gray-500 hover:text-gray-900" }
                        ),
                        onclick: move |_| filter_mode.set(FilterMode::Active),
                        "未完了"
                    }
                    button {
                        class: format!("px-3 py-1.5 text-sm font-medium rounded-md transition {}", 
                            if filter_mode() == FilterMode::Completed { "bg-white shadow text-gray-900" } else { "text-gray-500 hover:text-gray-900" }
                        ),
                        onclick: move |_| filter_mode.set(FilterMode::Completed),
                        "完了済み"
                    }
                }

                // 一括更新ボタン
                button {
                    disabled: !has_changes,
                    class: format!(
                        "px-4 py-2 text-sm font-bold border rounded-md transition duration-200 {}",
                        if has_changes { 
                            "bg-amber-100 border-amber-300 text-amber-800 hover:bg-amber-200 cursor-pointer" 
                        } else { 
                            "bg-gray-50 border-gray-200 text-gray-400 cursor-not-allowed" 
                        }
                    ),
                    onclick: move |_| {
                        let mut list = todo_list.write();
                        for item in list.iter_mut() {
                            item.is_done = item.draft_done;
                        }
                    },
                    if has_changes { "⚠️ 変更を一括更新する" } else { "変更なし" }
                }
            }

            // --- TODOリスト一覧 ---
            ul { class: "divide-y divide-gray-200",
                for (i, item) in filtered_todos {
                    li { key: "{i}", class: "py-3 flex items-center justify-between gap-3",

                        // チェックボックス（一時的な状態 draft_done を操作）
                        div { class: "flex items-center gap-3 flex-1",
                            input {
                                r#type: "checkbox",
                                checked: item.draft_done,
                                class: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 cursor-pointer",
                                onclick: move |_| {
                                    let current_val = todo_list.read()[i].draft_done;
                                    todo_list.write()[i].draft_done = !current_val;
                                }
                            }

                            // タスク名
                            span {
                                class: format!("text-gray-800 transition {}", 
                                    if item.is_done { "line-through text-gray-400" } else { "" }
                                ),
                                "{item.task}"
                            }
                        }

                        div { class: "flex items-center gap-2",
                        // 状態バッジ
                            span {
                                class: format!("text-xs font-semibold px-2 py-1 rounded-full text-white {}",
                                    if item.is_done { "bg-green-500" } else { "bg-red-500" }
                                ),
                                if item.is_done { "完了" } else { "未完了" }
                            }

                            // 変更有無の判定
                            if item.draft_done != item.is_done {
                                span { style: "font-size: 0.8rem; color: #b78103; font-style: italic;", "(未反映の変更あり)" }
                            }
                        }
                    }
                }
            }
        }
    }
}

fn main() {
    dioxus::launch(App);
}

// カウンター
// Doc.rsより

#![windows_subsystem = "windows"]

use floem::prelude::*;

fn app_view() -> impl IntoView {
    // Create a reactive signal with a counter value, defaulting to 0
    let (counter, set_counter) = create_signal(0);

    // Create a vertical layout
    v_stack((
        // The counter value updates automatically, thanks to reactivity
        label(move || format!("Value: {}", counter.get())),
        // Create a horizontal layout
        h_stack((
            button("Increment").on_click_stop(move |_| {
                set_counter.update(|value| *value += 1);
            }),
            button("Decrement").on_click_stop(move |_| {
                set_counter.update(|value| *value -= 1);
            }),
        )),
    ))
}

fn main() {
    floem::launch(app_view);
}

// ToDo List
// IMEワークアラウンドはAIパワーで突っ切ろうとしたがダメでした

#![windows_subsystem = "windows"] // これを有効にするとIME漢字候補が表示されない

use floem::keyboard::{Key, NamedKey};
use floem::reactive::create_memo;
use floem::{prelude::*, text};

#[derive(Debug, Clone, PartialEq)]
struct TodoItem {
    task: String,
    is_done: bool,    // 確定された状態
    draft_done: bool, // チェックボックスの一時的な状態
}

#[derive(Debug, Clone, Copy, PartialEq)]
enum FilterMode {
    All,
    Active,
    Completed,
}

fn app_view() -> impl IntoView {
    // タスクリスト保存用
    // let todo_list: RwSignal<Vec<TodoItem>> = RwSignal::new(vec![
    //     TodoItem {
    //         task: "Rustの勉強をする".to_string(),
    //         is_done: true,
    //         draft_done: false,
    //     },
    //     TodoItem {
    //         task: "Rustの勉強をする".to_string(),
    //         is_done: false,
    //         draft_done: false,
    //     },
    //     TodoItem {
    //         task: "Rustの勉強をする".to_string(),
    //         is_done: true,
    //         draft_done: true,
    //     },
    // ]);
    let todo_list = create_rw_signal(Vec::<TodoItem>::new());

    // 新しいタスク入力用
    let new_task_text = RwSignal::<String>::new("".to_string());

    // 表示モードのSignal
    let filter_mode = create_rw_signal(FilterMode::All);

    // フィルター済みリスト
    let filtered_todos = create_memo(move |_| {
        todo_list
            .get()
            .iter()
            .cloned()
            .enumerate()
            .filter(|item| match filter_mode.get() {
                FilterMode::All => true,
                FilterMode::Active => !item.1.is_done,
                FilterMode::Completed => item.1.is_done,
            })
            .collect::<Vec<(usize, TodoItem)>>()
    });

    // dyn_stack向けtodo_key_fn
    // 戻り値はユニークでないといけない
    let todo_key_fn = |(idx, _): &(_, _)| *idx;

    // dyn_stack向けtodo_view_fn
    let todo_view_fn = move |(idx, item): (usize, TodoItem)| {
        let current_item = item.clone();

        // チェックボックスの表示
        let item_checkbox = checkbox(move || current_item.draft_done).on_update(move |state| {
            todo_list.update(|list| {
                if let Some(target) = list.get_mut(idx) {
                    target.draft_done = state;
                }
            });
        });

        // アイテムが完了/未完了のステータス表示
        let item_state = label(move || {
            let list = todo_list.get();

            if let Some(target) = list.get(idx) {
                if target.is_done {
                    "完了"
                } else {
                    "未完了"
                }
            } else {
                // 万が一リストから消えていた場合のフォールバック（初期値）
                if current_item.is_done {
                    "完了"
                } else {
                    "未完了"
                }
            }
        });

        // ステータスを変更したか否か
        let item_unchanged = label(move || {
            let list = todo_list.get();

            if let Some(target) = list.get(idx) {
                if target.draft_done != target.is_done {
                    "(未反映の変更あり)".to_string()
                } else {
                    "".to_string()
                }
            } else {
                "".to_string()
            }
        })
        .style(|s| s.font_style(text::Style::Italic).color(Color::BROWN));

        h_stack((
            item_checkbox,
            label(move || current_item.task.clone()),
            item_state,
            item_unchanged,
        ))
        .style(|s| s.gap(10.0))
    };

    // 新しいタスクの登録
    let add_task_action = move || {
        let new_task = new_task_text.get_untracked().trim().to_string();

        if !new_task.is_empty() {
            let item = TodoItem {
                task: new_task,
                is_done: false,
                draft_done: false,
            };
            todo_list.update(|list| list.push(item.into()));

            new_task_text.set("".to_string());
        }
    };

    // メイン画面
    v_stack((
        text("📌 TODOリスト"),
        h_stack((
            // IME切り替え対応入力ウィジェットを使う場合は
            // コメントアウトして入力ウィジェットを切り替える

            // 標準ウィジェット
            // IME未対応
            text_input(new_task_text).on_key_down(
                Key::Named(NamedKey::Enter),
                move |modifiers| modifiers.is_empty(),
                move |_event| {
                    let action = add_task_action.clone();
                    action();
                },
            ),
            // text_inputラッパーウィジェット
            // IME対応だがカーソル位置がズレるなど問題あり
            // ime_wrapped_text_input(new_task_text, add_task_action.clone()),

            // custom_ime_text_inputラッパーウィジェット
            // IME対応だがカーソル位置がズレるなど問題あり
            // custom_ime_text_input(new_task_text, add_task_action.clone()),
            // 追加ボタン
            button("追加").action(add_task_action.clone()),
        ))
        .style(|s| s.gap(10.0)),
        // フィルターボタン
        h_stack((
            text("フィルター"),
            button("すべて").action(move || {
                filter_mode.set(FilterMode::All);
            }),
            button("未完了").action(move || {
                filter_mode.set(FilterMode::Active);
            }),
            button("完了").action(move || {
                filter_mode.set(FilterMode::Completed);
            }),
        ))
        .style(|s| s.gap(10.0)),
        // 一括更新ボタン
        h_stack((button(label(move || {
            let has_changes = todo_list
                .get()
                .iter()
                .any(|item: &TodoItem| item.draft_done != item.is_done);
            if has_changes {
                "⚠️ 変更を一括更新する"
            } else {
                "変更なし"
            }
        }))
        .action(move || {
            todo_list.update(|list| {
                list.iter_mut().for_each(|item| {
                    if item.is_done != item.draft_done {
                        item.is_done = item.draft_done;
                    }
                });
            });
        }),)),
        // ToDo一覧表示
        v_stack((
            dyn_stack(move || filtered_todos.get(), todo_key_fn, todo_view_fn).style(|s| {
                s.flex_col() // dyn_stackの中身を縦並び（Column）にする
                    .gap(8.0)
            }),
        ))
        .style(|s| s.gap(10.0)),
    ))
    .style(|s| s.gap(15.0))
    .style(|s| s.margin(10.0))
}

fn main() {
    floem::launch(app_view);
}

#![windows_subsystem = "windows"]

use iced::widget::{button, row, text};
use iced::{alignment::Vertical, Element};

#[derive(Default)]
struct Counter {
    value: i32,
}

#[derive(Debug, Clone, Copy)]
enum Message {
    IncrementPressed,
    DecrementPressed,
}

impl Counter {
    fn update(&mut self, message: Message) {
        match message {
            Message::IncrementPressed => {
                self.value += 1;
            }
            Message::DecrementPressed => {
                self.value -= 1;
            }
        }
    }

    fn view(&self) -> Element<'_, Message> {
        row![
            button("Increment").on_press(Message::IncrementPressed),
            text(self.value).size(50),
            button("Decrement").on_press(Message::DecrementPressed)
        ]
        .padding(20)
        .spacing(10)
        .align_y(Vertical::Center)
        .into()
    }
}

pub fn main() -> iced::Result {
    iced::application(|| Counter::default(), Counter::update, Counter::view)
        .title("Counter")
        .run()
}

#![windows_subsystem = "windows"]

use iced::widget::{button, checkbox, column, container, row, text, text_input};
use iced::{alignment, color, Element};

#[derive(Debug, Clone, PartialEq, Default)]
struct TodoItem {
    task: String,
    is_done: bool,    // 確定された状態
    draft_done: bool, // チェックボックスの一時的な状態
}

#[derive(Debug, Clone, Copy, PartialEq)]
enum FilterMode {
    All,
    Active,
    Completed,
}

#[derive(Debug, Clone, PartialEq)]
struct State {
    todo_list: Vec<TodoItem>,
    // 新しいタスク入力用
    new_task_text: String,
    // 表示モードのSignal
    filter_mode: FilterMode,
}

impl Default for State {
    fn default() -> Self {
        Self {
            new_task_text: Default::default(),
            // todo_list: vec![
            //     TodoItem {
            //         task: "Rustの勉強をする".to_string(),
            //         is_done: true,
            //         draft_done: false,
            //     },
            //     TodoItem {
            //         task: "Rustの勉強をする".to_string(),
            //         is_done: false,
            //         draft_done: false,
            //     },
            //     TodoItem {
            //         task: "Rustの勉強をする".to_string(),
            //         is_done: true,
            //         draft_done: true,
            //     },
            // ],
            todo_list: vec![],
            filter_mode: FilterMode::All,
        }
    }
}

#[derive(Debug, Clone)]
enum Message {
    AddTask,
    ChangedTaskState,
    ChangedDraftTaskState(usize, bool),
    NewTaskText(String),
    ChangedFilterMode(FilterMode),
}

struct App;

impl App {
    fn update(state: &mut State, message: Message) {
        match message {
            Message::AddTask => {
                let new_task = state.new_task_text.trim().to_string();

                if !new_task.is_empty() {
                    let new_task = TodoItem {
                        task: new_task,
                        is_done: false,
                        draft_done: false,
                    };
                    state.todo_list.push(new_task);
                    state.new_task_text.clear();
                }
            }
            Message::ChangedTaskState => {
                state.todo_list.iter_mut().for_each(|item| {
                    if item.is_done != item.draft_done {
                        item.is_done = item.draft_done;
                    }
                });
            }
            Message::ChangedDraftTaskState(idex, draft_done) => {
                if let Some(item) = state.todo_list.get_mut(idex) {
                    item.draft_done = draft_done;
                };
            }
            Message::NewTaskText(new_task_text) => {
                state.new_task_text = new_task_text;
            }
            Message::ChangedFilterMode(new_mode) => {
                state.filter_mode = new_mode;
            }
        }
    }

    // メイン画面
    fn view(state: &State) -> Element<'_, Message> {
        container(
            column![
                row![text("📌 TODOリスト"),],
                row![
                    // 入力ウィジェット
                    text_input("", &state.new_task_text)
                        .on_input(Message::NewTaskText)
                        .on_submit(Message::AddTask),
                    // 追加ボタン
                    button(text("追加")).on_press(Message::AddTask),
                ]
                .spacing(10),
                // フィルターボタン
                row![
                    text("フィルター"),
                    button(text("すべて")).on_press(Message::ChangedFilterMode(FilterMode::All)),
                    button(text("未完了")).on_press(Message::ChangedFilterMode(FilterMode::Active)),
                    button(text("完了"))
                        .on_press(Message::ChangedFilterMode(FilterMode::Completed)),
                ]
                .spacing(10)
                .align_y(alignment::Vertical::Center),
                // 一括更新ボタン
                row![{
                    let has_changes = state
                        .todo_list
                        .iter()
                        .any(|item: &TodoItem| item.draft_done != item.is_done);
                    let label = if has_changes {
                        "⚠️ 変更を一括更新する"
                    } else {
                        "変更なし"
                    };

                    button(text(label)).on_press(Message::ChangedTaskState)
                }],
                // ToDo一覧表示
                column({
                    // フィルター済みリスト
                    state
                        .todo_list
                        .iter()
                        .enumerate()
                        .filter(|item| match state.filter_mode {
                            FilterMode::All => true,
                            FilterMode::Active => !item.1.is_done,
                            FilterMode::Completed => item.1.is_done,
                        })
                        .map(|(idx, item)| {
                            // アイテムが完了/未完了のステータス表示
                            let item_state = if item.is_done { "完了" } else { "未完了" };
                            // ステータスを変更したか否か
                            let item_unchanged = if item.draft_done != item.is_done {
                                "(未反映の変更あり)"
                            } else {
                                ""
                            };

                            row![
                                // チェックボックスの表示
                                checkbox(item.draft_done)
                                    .label(item.task.clone())
                                    .on_toggle(move |new_draft_done| {
                                        Message::ChangedDraftTaskState(idx, new_draft_done)
                                    }),
                                text(item_state),
                                text(item_unchanged)
                                    .color(color!(0xb78103))
                                    .font(iced::Font {
                                        style: iced::font::Style::Italic,
                                        ..Default::default()
                                    }),
                            ]
                            .spacing(10)
                            .into()
                        })
                }),
            ]
            .spacing(20),
        )
        .padding(10)
        .into()
    }
}

pub fn main() -> iced::Result {
    iced::application(|| State::default(), App::update, App::view)
        .title("ToDo List")
        .run()
}

#![windows_subsystem = "windows"]

use vizia::prelude::*;

pub struct AppData {
    count: Signal<i32>,
}

pub enum AppEvent {
    Increment,
    Decrement,
}

impl Model for AppData {
    fn event(&mut self, _cx: &mut EventContext, event: &mut Event) {
        event.map(|app_event, _meta| match app_event {
            AppEvent::Decrement => self.count -= 1,
            AppEvent::Increment => self.count += 1,
        });
    }
}

fn main() {
    let _ = Application::new(|cx| {
        let count = Signal::new(0);
        AppData { count }.build(cx);

        HStack::new(cx, |cx| {
            Button::new(cx, |cx| Label::new(cx, "Decrement"))
                .on_press(|ex| ex.emit(AppEvent::Decrement))
                .class("dec");
            Label::new(cx, count);
            Button::new(cx, |cx| Label::new(cx, "Increment"))
                .on_press(|ex| ex.emit(AppEvent::Increment))
                .class("inc");
        })
        .alignment(vizia::prelude::Alignment::Center) // Apply style and layout modifiers
        .horizontal_gap(Pixels(50.0));
    })
    .title("Counter")
    .inner_size((400, 100))
    .run();
}

#![windows_subsystem = "windows"]

use vizia::prelude::*;

#[derive(Debug, Clone, PartialEq, Default)]
struct TodoItem {
    task: String,
    is_done: bool,    // 確定された状態
    draft_done: bool, // チェックボックスの一時的な状態
}

#[derive(Debug, Clone, Copy, PartialEq)]
enum FilterMode {
    All,
    Active,
    Completed,
}

pub struct AppData {
    todo_list: Signal<Vec<TodoItem>>,
    // 新しいタスク入力用
    new_task_text: Signal<String>,
    // 表示モードのSignal
    filter_mode: Signal<FilterMode>,
}

enum AppEvent {
    AddTask,
    ChangedTaskState,
    ChangedDraftTaskState(usize),
    NewTaskText(String),
    ChangedFilterMode(FilterMode),
}

impl Model for AppData {
    fn event(&mut self, _cx: &mut EventContext, event: &mut Event) {
        event.map(|app_event, _| match app_event {
            AppEvent::ChangedDraftTaskState(index) => {
                self.todo_list.update(|list| {
                    if let Some(item) = list.get_mut(*index) {
                        item.draft_done = !item.draft_done;
                    }
                });
            }
            AppEvent::AddTask => {
                let new_task = self.new_task_text.get_untracked().trim().to_string();

                // 新しいタスクの登録
                if !new_task.is_empty() {
                    let new_task = TodoItem {
                        task: new_task,
                        is_done: false,
                        draft_done: false,
                    };
                    self.todo_list.update(|list| {
                        list.push(new_task);
                    });
                    self.new_task_text.update(|text| {
                        text.clear();
                    });
                }
            }
            AppEvent::ChangedTaskState => {
                self.todo_list.update(|list| {
                    for item in list.iter_mut() {
                        if item.is_done != item.draft_done {
                            item.is_done = item.draft_done;
                        }
                    }
                });
            }
            AppEvent::NewTaskText(new_text) => {
                self.new_task_text.update(|text| {
                    *text = new_text.clone();
                });
            }
            AppEvent::ChangedFilterMode(filter_mode) => {
                self.filter_mode.update(|mode| {
                    *mode = *filter_mode;
                });
            }
        });
    }
}

fn main() {
    let _ = Application::new(|cx| {
        // let todo_list = Signal::new(vec![
        //     TodoItem {
        //         task: "Rustの勉強をする".to_string(),
        //         is_done: true,
        //         draft_done: false,
        //     },
        //     TodoItem {
        //         task: "Rustの勉強をする".to_string(),
        //         is_done: false,
        //         draft_done: false,
        //     },
        //     TodoItem {
        //         task: "Rustの勉強をする".to_string(),
        //         is_done: true,
        //         draft_done: true,
        //     },
        // ]);
        let todo_list: Signal<Vec<TodoItem>> = Signal::<Vec<_>>::new(vec![]);
        let new_task_text = Signal::new("".to_string());
        let filter_mode = Signal::new(FilterMode::All);

        // フィルター済みリスト
        let filtered_todos = Memo::new(move |_| {
            todo_list
                .get()
                .into_iter()
                .enumerate()
                .filter(|item| match filter_mode.get() {
                    FilterMode::All => true,
                    FilterMode::Active => !item.1.is_done,
                    FilterMode::Completed => item.1.is_done,
                })
                .collect::<Vec<(usize, TodoItem)>>()
        });

        // ステータスを変更したか否か
        let item_unchanged = Memo::new(move |_| {
            let has_changes = todo_list
                .get()
                .iter()
                .any(|item: &TodoItem| item.draft_done != item.is_done);
            if has_changes {
                "⚠️ 変更を一括更新する"
            } else {
                "変更なし"
            }
        });

        AppData {
            todo_list,
            new_task_text,
            filter_mode,
        }
        .build(cx);

        // メイン画面
        VStack::new(cx, |cx| {
            Label::new(cx, "📌 TODOリスト").width(Stretch(1.0));

            // 入力ウィジェット
            HStack::new(cx, |cx| {
                Textbox::new(cx, new_task_text)
                    .on_edit(|cx, new_text| {
                        cx.emit(AppEvent::NewTaskText(new_text));
                    })
                    .on_submit(|cx, _text, _from_enterr| {
                        cx.emit(AppEvent::AddTask);
                    })
                    .width(Stretch(1.0));
                // 追加ボタン
                Button::new(cx, |cx| Label::new(cx, "追加")).on_press(|cx| {
                    cx.emit(AppEvent::AddTask);
                });
            })
            .gap(Pixels(10.0))
            .height(Auto);

            // フィルターボタン
            HStack::new(cx, |cx| {
                Label::new(cx, "フィルター");
                Button::new(cx, |cx| Label::new(cx, "すべて"))
                    .on_press(|ex| ex.emit(AppEvent::ChangedFilterMode(FilterMode::All)));
                Button::new(cx, |cx| Label::new(cx, "未完了"))
                    .on_press(|ex| ex.emit(AppEvent::ChangedFilterMode(FilterMode::Active)));
                Button::new(cx, |cx| Label::new(cx, "完了"))
                    .on_press(|ex| ex.emit(AppEvent::ChangedFilterMode(FilterMode::Completed)));
            })
            .alignment(Alignment::Left)
            .gap(Pixels(10.0))
            .height(Auto);

            // 一括更新ボタン
            Button::new(cx, |cx| Label::new(cx, item_unchanged))
                .on_press(|ex| ex.emit(AppEvent::ChangedTaskState));

            // ToDo一覧表示
            // let item_height= 28.0;
            // VirtualList::new(cx, filtered_todos, item_height, |cx, _index, item| {  // 安定して動作しない
            List::new(cx, filtered_todos, |cx, _, item| {
                let (index, item) = item.get();
                HStack::new(cx, |cx| {
                    // チェックボックスの表示
                    Checkbox::new(cx, item.draft_done).on_toggle(move |cx| {
                        cx.emit(AppEvent::ChangedDraftTaskState(index));
                    });
                    Label::new(cx, item.task);
                    // アイテムが完了/未完了のステータス表示
                    if item.is_done {
                        Label::new(cx, "完了").font_weight(FontWeightKeyword::Bold)
                    } else {
                        Label::new(cx, "未完了").font_weight(FontWeightKeyword::Bold)
                    };
                    // ステータスを変更したか否か
                    if item.draft_done != item.is_done {
                        Label::new(cx, "(未反映の変更あり)")
                            .font_slant(FontSlant::Oblique)
                            .color(Color::brown())
                    } else {
                        Label::new(cx, "")
                    };
                })
                .gap(Pixels(5.0))
                .height(Auto);
            });
        })
        .gap(Pixels(10.0))
        .padding(Pixels(20.0));
    })
    .title("Counter")
    .inner_size((500, 500))
    .run();
}

#![windows_subsystem = "windows"]

use winit::dpi::LogicalSize;
use winit::error::EventLoopError;
use xilem::style::Style;
use xilem::view::{Axis, CrossAxisAlignment, MainAxisAlignment, flex, label, text_button};
use xilem::{EventLoop, WidgetView, WindowOptions, Xilem};

#[derive(Default)]
struct Counter {
    value: i32,
}

fn app_logic(counter: &mut Counter) -> impl WidgetView<Counter> + use<> {
    flex(
        Axis::Horizontal,
        (
            text_button("Decrement", |counter: &mut Counter| counter.value -= 1),
            label(format!(" {} ", counter.value)),
            text_button("Increment", |counter: &mut Counter| counter.value += 1),
        ),
    )
    .cross_axis_alignment(CrossAxisAlignment::Center)
    .main_axis_alignment(MainAxisAlignment::Center)
    .padding(20.0)
}

fn main() -> Result<(), EventLoopError> {
    let app = Xilem::new_simple(
        Counter::default(),
        app_logic,
        WindowOptions::new("Counter app").with_initial_inner_size(LogicalSize::new(400, 100)),
    );
    app.run_in(EventLoop::with_user_event())?;
    Ok(())
}