前言文档参考https://docs.rs/xilem/latest/xilem/view/fn.button.html版本Xilem 0.4一、button基础概念button 是通用可自定义内容按钮组件按钮内部可以放置任意非交互式视图label、flex、sized_box、z_stack等布局组合都可以作为按钮内容。text_button button(label(文本), 回调) 的简写只能放纯文本。button 自由度更高支持图标文字、多行、复杂排版的按钮。交互鼠标左键点击触发回调获得键盘焦点后按 Space空格 / Enter回车 同样触发点击键盘无障碍支持内置不可修改快捷键。如果需要监听鼠标中键、右键、触摸事件请使用 button_any_pointer 。重要限制button内部禁止嵌套另一个button、text_button这类交互式控件会产生鼠标焦点抢占、交互异常问题内部只能放纯展示布局原语和label。引入头usexilem::view::{button,text_button,label,flex_col,flex_row,sized_box};usexilem::{FontWeight,palette};二、函数签名pubfnbuttonState,Action,V:WidgetViewState,Action(child:V,callback:implFn(mutState)-ActionSendstatic,)-ButtonimplFn(mutState,OptionPointerButton)-MessageResultActionSendstatic,Vchild按钮内部子视图只能是非交互视图label / flex / sized_boxcallback点击回调接收 mut State 修改应用状态。基础最简示例// 普通自定义按钮内部加粗文本letcontentlabel(增加计数).weight(FontWeight::BOLD);button(content,|state:mutAppState|{state.count1;})复杂内容flex_row组合文字符号letinnerflex_row((label(),label(点赞).weight(FontWeight::BOLD),));button(inner,|_state:mutAppState|{})三、button、text_button、button_any_pointer三者对比button(child, callback)通用按钮内部可嵌套布局左键、空格、回车触发不区分鼠标按键。text_button(text, callback)简写等价 button(label(text), callback) 只能放纯文本写法简洁。button_any_pointer(child, callback)可以拿到鼠标按键信息左键/中键/右键回调参数携带 Option 适合需要区分不同鼠标按键的场景。四、按钮样式的两种方式方式1button自带链式样式button实例自带 .background_color() 、 .corner_radius() 、 .border_color() 、 .hovered_border_color() 直接修改按钮本身外观。button(label(蓝色按钮),|s:mutAppState|s.count1).background_color(palette::css::DODGER_BLUE).corner_radius(10.0).border_color(palette::css::TRANSPARENT);方式2外层包sized_box修改尺寸button本身会跟随内部内容大小想要固定宽高、整行铺满外层套 sized_box 。sized_box(button(label(整行大按钮),|_|{})).expand_width()注意sized_box 控制尺寸button链式方法控制按钮背景、圆角不要混淆两者职责。五、完整可运行示例Cargo.toml[package] name xilem_lesson28 version 0.1.0 edition 2021 [dependencies] xilem 0.4.0 winit 0.30src/main.rsusexilem::palette;usexilem::winit::error::EventLoopError;usexilem::view::{button,flex_row,label,sized_box,text_button};usexilem::{EventLoop,FontWeight,WidgetView,WindowOptions,Xilem};#[derive(Default)]structAppState{count:i32}fnapp_logic(state:mutAppState)-implWidgetViewAppStateuse{flex_row((// text_button简写纯文本按钮text_button(-1,|s:mutAppState|s.count-1),// 通用button内部加粗labelbutton(label(format!(计数{},state.count)).weight(FontWeight::BOLD),|_|{}).background_color(palette::css::LIGHT_GRAY).corner_radius(6.0),// button内部放flex_row实现符号文字button(flex_row((label(➕),label(1))),|s:mutAppState|s.count1).background_color(palette::css::SKY_BLUE).corner_radius(8.0),// sized_box包裹固定尺寸按钮sized_box(button(label(归零),|s:mutAppState|s.count0).background_color(palette::css::ORANGE_RED).corner_radius(8.0)).width(80.px()).height(36.px()),))}fnmain()-Result(),EventLoopError{letappXilem::new_simple(AppState::default(),app_logic);app.run(EventLoop::with_user_event(),WindowOptions::default())}六、高频踩坑清单button内部不能嵌套button/text_button会交互错乱内部只能是label、flex、sized_box这类纯展示视图。button 本身大小跟随内部子视图想要固定宽高、expand铺满必须外层套 sized_box 。键盘触发条件按钮需要获得焦点Tab切换焦点后按Space/Enter触发快捷键不可自定义。text_button 只是简写适合简单文本复杂排版图标文字、多行必须使用 button 。button的 .background_color() 、 .corner_radius() 属于button的链式方法不是sized_box的不要写在label上。如果需要监听鼠标右键、中键请使用 button_any_pointer 普通button回调拿不到鼠标按键信息。不要把交互业务逻辑写在子视图闭包点击修改状态全部写在button的callback闭包。七、课后练习题仅使用本课 button 搭配label、flex_row、sized_box禁止嵌套button。练习1基础创建一个button内部flex_row包含 label(“”) 和加粗 label(“提醒”) 设置按钮背景色 palette::css::GOLD 圆角半径6点击回调修改state.count1。参考答案button(flex_row((label(),label(提醒).weight(FontWeight::BOLD))),|s:mutAppState|s.count1).background_color(palette::css::GOLD).corner_radius(6.0)练习2进阶外层flex_row横向布局左侧练习1自定义button中间 text_button(“重置”,|_|{}) 右侧用sized_box包裹buttonexpand_width占满剩余空间内部label文本 填充按钮 。参考答案flex_row((button(flex_row((label(),label(提醒).weight(FontWeight::BOLD))),|s:mutAppState|s.count1).background_color(palette::css::GOLD).corner_radius(6.0),text_button(重置,|s:mutAppState|s.count0),sized_box(button(label(填充按钮),|_|{}).background_color(palette::css::LIGHT_BLUE)).expand_width()))练习3拓展flex_col纵向布局顶部sized_box.expand_width放一个button按钮内部使用z_stack叠加两层label点击按钮让count自增。参考答案片段flex_col((sized_box(button(z_stack((label(底层文字),label(上层叠加文字).weight(FontWeight::BOLD))),|s:mutAppState|s.count1).background_color(palette::css::ALICE_BLUE).corner_radius(10.0)).expand_width()))八、知识点总结button(child, callback) 通用按钮内部支持任意非交互视图 text_button 是纯文本简写。鼠标左键、键盘Space/Enter获得焦点都会触发button回调监听多鼠标按键用 button_any_pointer 。button内部严禁嵌套另外的交互式按钮会导致焦点抢占交互异常。button自带 .background_color() 、 .corner_radius() 等链式样式尺寸控制交给外层 sized_box 。复杂按钮图标文字、叠加文字把flex_row/z_stack/sized_box作为button的child参数传入。点击业务逻辑写在第二个回调闭包修改AppState状态框架自动重渲染UI。
前言文档参考https://docs.rs/xilem/latest/xilem/view/fn.button.html版本Xilem 0.4一、button基础概念button 是通用可自定义内容按钮组件按钮内部可以放置任意非交互式视图label、flex、sized_box、z_stack等布局组合都可以作为按钮内容。text_button button(label(文本), 回调) 的简写只能放纯文本。button 自由度更高支持图标文字、多行、复杂排版的按钮。交互鼠标左键点击触发回调获得键盘焦点后按 Space空格 / Enter回车 同样触发点击键盘无障碍支持内置不可修改快捷键。如果需要监听鼠标中键、右键、触摸事件请使用 button_any_pointer 。重要限制button内部禁止嵌套另一个button、text_button这类交互式控件会产生鼠标焦点抢占、交互异常问题内部只能放纯展示布局原语和label。引入头usexilem::view::{button,text_button,label,flex_col,flex_row,sized_box};usexilem::{FontWeight,palette};二、函数签名pubfnbuttonState,Action,V:WidgetViewState,Action(child:V,callback:implFn(mutState)-ActionSendstatic,)-ButtonimplFn(mutState,OptionPointerButton)-MessageResultActionSendstatic,Vchild按钮内部子视图只能是非交互视图label / flex / sized_boxcallback点击回调接收 mut State 修改应用状态。基础最简示例// 普通自定义按钮内部加粗文本letcontentlabel(增加计数).weight(FontWeight::BOLD);button(content,|state:mutAppState|{state.count1;})复杂内容flex_row组合文字符号letinnerflex_row((label(),label(点赞).weight(FontWeight::BOLD),));button(inner,|_state:mutAppState|{})三、button、text_button、button_any_pointer三者对比button(child, callback)通用按钮内部可嵌套布局左键、空格、回车触发不区分鼠标按键。text_button(text, callback)简写等价 button(label(text), callback) 只能放纯文本写法简洁。button_any_pointer(child, callback)可以拿到鼠标按键信息左键/中键/右键回调参数携带 Option 适合需要区分不同鼠标按键的场景。四、按钮样式的两种方式方式1button自带链式样式button实例自带 .background_color() 、 .corner_radius() 、 .border_color() 、 .hovered_border_color() 直接修改按钮本身外观。button(label(蓝色按钮),|s:mutAppState|s.count1).background_color(palette::css::DODGER_BLUE).corner_radius(10.0).border_color(palette::css::TRANSPARENT);方式2外层包sized_box修改尺寸button本身会跟随内部内容大小想要固定宽高、整行铺满外层套 sized_box 。sized_box(button(label(整行大按钮),|_|{})).expand_width()注意sized_box 控制尺寸button链式方法控制按钮背景、圆角不要混淆两者职责。五、完整可运行示例Cargo.toml[package] name xilem_lesson28 version 0.1.0 edition 2021 [dependencies] xilem 0.4.0 winit 0.30src/main.rsusexilem::palette;usexilem::winit::error::EventLoopError;usexilem::view::{button,flex_row,label,sized_box,text_button};usexilem::{EventLoop,FontWeight,WidgetView,WindowOptions,Xilem};#[derive(Default)]structAppState{count:i32}fnapp_logic(state:mutAppState)-implWidgetViewAppStateuse{flex_row((// text_button简写纯文本按钮text_button(-1,|s:mutAppState|s.count-1),// 通用button内部加粗labelbutton(label(format!(计数{},state.count)).weight(FontWeight::BOLD),|_|{}).background_color(palette::css::LIGHT_GRAY).corner_radius(6.0),// button内部放flex_row实现符号文字button(flex_row((label(➕),label(1))),|s:mutAppState|s.count1).background_color(palette::css::SKY_BLUE).corner_radius(8.0),// sized_box包裹固定尺寸按钮sized_box(button(label(归零),|s:mutAppState|s.count0).background_color(palette::css::ORANGE_RED).corner_radius(8.0)).width(80.px()).height(36.px()),))}fnmain()-Result(),EventLoopError{letappXilem::new_simple(AppState::default(),app_logic);app.run(EventLoop::with_user_event(),WindowOptions::default())}六、高频踩坑清单button内部不能嵌套button/text_button会交互错乱内部只能是label、flex、sized_box这类纯展示视图。button 本身大小跟随内部子视图想要固定宽高、expand铺满必须外层套 sized_box 。键盘触发条件按钮需要获得焦点Tab切换焦点后按Space/Enter触发快捷键不可自定义。text_button 只是简写适合简单文本复杂排版图标文字、多行必须使用 button 。button的 .background_color() 、 .corner_radius() 属于button的链式方法不是sized_box的不要写在label上。如果需要监听鼠标右键、中键请使用 button_any_pointer 普通button回调拿不到鼠标按键信息。不要把交互业务逻辑写在子视图闭包点击修改状态全部写在button的callback闭包。七、课后练习题仅使用本课 button 搭配label、flex_row、sized_box禁止嵌套button。练习1基础创建一个button内部flex_row包含 label(“”) 和加粗 label(“提醒”) 设置按钮背景色 palette::css::GOLD 圆角半径6点击回调修改state.count1。参考答案button(flex_row((label(),label(提醒).weight(FontWeight::BOLD))),|s:mutAppState|s.count1).background_color(palette::css::GOLD).corner_radius(6.0)练习2进阶外层flex_row横向布局左侧练习1自定义button中间 text_button(“重置”,|_|{}) 右侧用sized_box包裹buttonexpand_width占满剩余空间内部label文本 填充按钮 。参考答案flex_row((button(flex_row((label(),label(提醒).weight(FontWeight::BOLD))),|s:mutAppState|s.count1).background_color(palette::css::GOLD).corner_radius(6.0),text_button(重置,|s:mutAppState|s.count0),sized_box(button(label(填充按钮),|_|{}).background_color(palette::css::LIGHT_BLUE)).expand_width()))练习3拓展flex_col纵向布局顶部sized_box.expand_width放一个button按钮内部使用z_stack叠加两层label点击按钮让count自增。参考答案片段flex_col((sized_box(button(z_stack((label(底层文字),label(上层叠加文字).weight(FontWeight::BOLD))),|s:mutAppState|s.count1).background_color(palette::css::ALICE_BLUE).corner_radius(10.0)).expand_width()))八、知识点总结button(child, callback) 通用按钮内部支持任意非交互视图 text_button 是纯文本简写。鼠标左键、键盘Space/Enter获得焦点都会触发button回调监听多鼠标按键用 button_any_pointer 。button内部严禁嵌套另外的交互式按钮会导致焦点抢占交互异常。button自带 .background_color() 、 .corner_radius() 等链式样式尺寸控制交给外层 sized_box 。复杂按钮图标文字、叠加文字把flex_row/z_stack/sized_box作为button的child参数传入。点击业务逻辑写在第二个回调闭包修改AppState状态框架自动重渲染UI。
