rust druid 之 Lens使用

hello_wolrd發表於2022-08-28
RustUI

我們透過上幾章的學習，我們做一個小練習，

效果圖

實現一個效果，透過 按鈕對滑塊的操作，並且label顯示滑塊位置。

我們接下來開始實現這個小練習，我們使用的元件有 Button(按鈕)、Slider(滑塊)、Label(文字)、Flex(佈局)。

讓我們建立一個rust專案

cargo new lens_demo

讓我們新增包

[dependencies]
druid = { git = "https://github.com/linebender/druid.git"}

新增我們需要用到的引用

use druid::widget::{Button,Label,Slider,Flex};
use druid::widget::Widget;
use druid::{Env, WindowDesc, AppLauncher, Data, Lens, WidgetExt};

建立我們的Data Lens

#[derive(Data,Clone,Lens)]
struct AppState{
    current:f64,
}

建立介面和啟動程式

fn ui_builder() -> impl Widget<AppState> {

    //建立label顯示滑塊的位置數字 繫結了current
    let label = Label::new(|app_state:&AppState,_env:&Env|{ format!("{:.1}",app_state.current)});

    //建立滑塊，with_range 設定滑塊的開始位置結束位置，lens繫結了current，fix_width設定滑塊的寬度
    let slider = Slider::new().with_range(1., 100.).lens(AppState::current).fix_width(250.);

    //建立減一按鈕，fix_width 設定按鈕的寬度，on_click 繫結點選事件，
    let button_reduce = Button::new("- 1").fix_width(100.).on_click(|_,app_state: &mut AppState,_|{
        //對值進行判斷，不能小於1，修改current的值
        if app_state.current - 1. < 1. {
            app_state.current = 1.;
        }else{
            app_state.current -= 1.;
        }
    });

    let button_increase = Button::new("+ 1").fix_width(100.).on_click(|_,app_state: &mut AppState,_|{
        if app_state.current + 1. > 100. {
            app_state.current = 100.;
        }else{
            app_state.current += 1.;
        }

    });

    //建立佈局垂直排列
    Flex::column()
        .with_child(
            //水平排列
            Flex::row()
            //新增顯示位置的label
            .with_child(label)
        )
        .with_child(
            //水平排列
            Flex::row()
                //新增滑塊
                .with_child(slider)   
        )
        .with_child(
            //水平排列
            Flex::row()
                //新增按鈕
                .with_child(button_reduce)
                .with_child(button_increase).padding(10.)
        )

}

fn main() {
    let win = WindowDesc::new(ui_builder()).window_size((300.,200.)).title("rust語言程式設計");
    let _app = AppLauncher::with_window(win).launch(AppState{current:1.});
}
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章