前言源码来源xilem/examples/lists.rs适配版本Xilem 0.4 / Masonry 0.4一、官方完整源码// Copyright 2024 the Xilem Authors// SPDX-License-Identifier: Apache-2.0//! Displaying a variable length list is achieved using a [Vec] FlexSequence.usewinit::error::EventLoopError;usexilem::view::{MainAxisAlignment,flex_col,prose,text_button};usexilem::{EventLoop,WidgetView,WindowOptions,Xilem};#[derive(Default)]structAppState{count:usize,}fnapp_logic(state:mutAppState)-implWidgetViewAppStateuse{// A vector (Vec) of views can be used as part of a flexs children, allowing collections of dynamic length to be displayed.letlist(0..state.count).map(|n|prose(format!(item #{n}))).collect::Vec_();flex_col((// Even when a Vec is used for the children, other widgets can be included by putting them in a// tuple of children alongside the vector.text_button(more,|appstate:mutAppState|appstate.count1),list,))// We can control alignment of the elements in the flexbox.main_axis_alignment(MainAxisAlignment::Start)// Aligned to the left}fnmain()-Result(),EventLoopError{letappXilem::new_simple(AppState::default(),app_logic,WindowOptions::new(Lists));app.run_in(EventLoop::with_user_event())?;Ok(())}二、程序核心功能本示例演示 动态变长列表FlexSequence点击 more 按钮count 计数 1根据 count 动态生成列表条目 item #0 、 item #1 ……核心特性 flex_col 支持将 Vec 视图集合直接作为子元素实现动态数量视图渲染不需要循环组件、不需要宏纯链式 Builder 写法核心概念FlexSequence在 Xilem0.4 中当把 Vec 放入 flex 的子元组会自动识别为 FlexSequence 用于渲染长度会变化的视图序列。三、逐模块深度解析1. AppState 状态结构体#[derive(Default)]structAppState{count:usize,}count: usize 记录列表条目总数无符号自然数初始默认值为0#[derive(Default)] 自动实现 Default trait初始化时 count02. 动态列表生成letlist(0..state.count).map(|n|prose(format!(item #{n}))).collect::Vec_();(0…state.count) Rust 标准区间迭代器生成 0,1,2,…,count-1.map(|n| prose(…)) 每一个序号生成一段文本视图 prose.collect::Vec_() 收集所有视图打包成 Vec 视图数组prose() Xilem 的文本组件用于展示普通段落文字3. flex_col 混合子元素重点flex_col((text_button(more,|appstate:mutAppState|appstate.count1),list,))关键知识点flex 的子元素元组可以混合普通组件 Vec视图数组元组第一项普通组件 text_button 固定存在的按钮元组第二项 Vec 动态视图集合条目数量随状态改变Xilem 内部自动把 Vec 转为 FlexSequence支持动态增减条目.main_axis_alignment(MainAxisAlignment::Start)flex_col 垂直布局主轴为垂直方向MainAxisAlignment::Start 子元素靠顶部对齐4. app_logic 与更新机制app_logic 是视图构建函数每次状态变更都会重新执行用户点击按钮 → count 1状态更新再次运行 app_logic重新生成新的 list条目数量1Xilem diff 新旧视图树只增量新增对应的 item 视图注意这个基础示例没有做虚拟滚动条目极多的时候性能会下降。大量长列表需要搭配 portal滚动容器。5. main 入口letappXilem::new_simple(AppState::default(),app_logic,WindowOptions::new(Lists));app.run_in(EventLoop::with_user_event())?;new_simple 快速创建简单应用传入初始状态、视图逻辑、窗口配置窗口标题 Lists四、生产级拓展代码拓展1增加减少按钮支持删减列表项fnapp_logic(state:mutAppState)-implWidgetViewAppStateuse{letlist(0..state.count).map(|n|prose(format!(item #{n}))).collect::Vec_();flex_col((flex_row((text_button(more,|appstate:mutAppState|appstate.count1),text_button(less,|appstate:mutAppState|{ifappstate.count0{appstate.count-1;}}),)),list,)).main_axis_alignment(MainAxisAlignment::Start)}拓展2套入 portal实现长列表滚动fnapp_logic(state:mutAppState)-implWidgetViewAppStateuse{letlist(0..state.count).map(|n|prose(format!(item #{n}))).collect::Vec_();letcontentflex_col((text_button(more,|appstate:mutAppState|appstate.count1),list,)).main_axis_alignment(MainAxisAlignment::Start);portal(content)}五、本课核心知识点总结Xilem 0.4 的 flex 布局支持元组内混合普通组件 Vec动态视图序列FlexSequence用来实现动态列表。prose 是基础文本组件用于展示段落文本。状态变化会重新执行 app_logic 重新生成 Vec 列表框架自动 diff 视图做增量更新。基础动态列表无虚拟滚动数据量大时需要配合 portal 滚动容器。flex_col 的 MainAxisAlignment::Start 代表主轴起始位置对齐垂直列表默认置顶。六、课后习题练习1 填空Xilem0.4 中把视图集合存入Vec放入flex子元组会自动识别为 ________。prose 组件的作用是 ________。本示例列表条目数量保存在状态字段 ________。长列表需要滚动要使用 ________ 组件包裹内容。填空题参考答案FlexSequence展示段落文本countportal练习2 判断flex_col 的子元组可以同时放置普通组件和Vec视图数组。✅正确本示例自带虚拟滚动支持上万条数据无性能损耗。❌错误每次点击more按钮状态更新后app_logic会重新执行。✅正确MainAxisAlignment::Start 在 flex_col 代表子元素靠顶部对齐。✅正确练习3 简答题目FlexSequence 动态列表的实现原理是什么简答题参考答案将迭代生成的多个视图收集为 Vec 放入flex布局的子元素元组Xilem自动识别为FlexSequence状态变更时app_logic重新生成新Vec框架对比新旧视图树增量更新列表条目实现动态增减列表。