【xilem0.4基础语法学与练】第48课 lists组件官方示例代码深度解析

前言

源码来源：xilem/examples/lists.rs

适配版本：Xilem 0.4 / Masonry 0.4

一、官方完整源码

rust 复制代码

  
// Copyright 2024 the Xilem Authors
// SPDX-License-Identifier: Apache-2.0

//! Displaying a variable length list is achieved using a [Vec] `FlexSequence`.

use winit::error::EventLoopError;
use xilem::view::{MainAxisAlignment, flex_col, prose, text_button};
use xilem::{EventLoop, WidgetView, WindowOptions, Xilem};

#[derive(Default)]
struct AppState {
    count: usize,
}

fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
    // A vector (Vec) of views can be used as part of a `flex`'s children, allowing collections of dynamic length to be displayed.
    let list = (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: &mut AppState| appstate.count += 1),
        list,
    ))
    // We can control alignment of the elements in the flexbox
    .main_axis_alignment(MainAxisAlignment::Start) // Aligned to the left
}

fn main() -> Result<(), EventLoopError> {
    let app = Xilem::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 状态结构体

rust 复制代码

  
#[derive(Default)]
struct AppState {
    count: usize,
}

count: usize ：记录列表条目总数，无符号自然数，初始默认值为0
# $derive(Default)$ ：自动实现 Default trait，初始化时 count=0

2. 动态列表生成

rust 复制代码

  
let list = (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 混合子元素（重点）

rust 复制代码

  
flex_col((
    text_button("more", |appstate: &mut AppState| appstate.count += 1),
    list,
))

关键知识点：

flex 的子元素元组可以混合普通组件 + Vec视图数组

元组第一项：普通组件 text_button （固定存在的按钮）
元组第二项： Vec 动态视图集合（条目数量随状态改变）
Xilem 内部自动把 Vec 转为 FlexSequence，支持动态增减条目

rust 复制代码

  
.main_axis_alignment(MainAxisAlignment::Start)

flex_col 垂直布局，主轴为垂直方向
MainAxisAlignment::Start ：子元素靠顶部对齐

4. app_logic 与更新机制

app_logic 是视图构建函数，每次状态变更都会重新执行

用户点击按钮 → count +=1
状态更新，再次运行 app_logic
重新生成新的 list（条目数量+1）
Xilem diff 新旧视图树，只增量新增对应的 item 视图

注意：

这个基础示例没有做虚拟滚动，条目极多的时候性能会下降。大量长列表需要搭配 portal（滚动容器）。

5. main 入口

rust 复制代码

 
let app = Xilem::new_simple(AppState::default(), app_logic, WindowOptions::new("Lists"));
app.run_in(EventLoop::with_user_event())?;

new_simple ：快速创建简单应用，传入初始状态、视图逻辑、窗口配置
窗口标题： Lists

四、生产级拓展代码

拓展1：增加减少按钮，支持删减列表项

rust 复制代码

 
fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
   let list = (0..state.count)
       .map(|n| prose(format!("item #{n}")))
       .collect::<Vec<_>>();

   flex_col((
       flex_row((
           text_button("more", |appstate: &mut AppState| appstate.count += 1),
           text_button("less", |appstate: &mut AppState| {
               if appstate.count > 0 {
                   appstate.count -= 1;
               }
           }),
       )),
       list,
   ))
   .main_axis_alignment(MainAxisAlignment::Start)
}

拓展2：套入 portal，实现长列表滚动

rust 复制代码

 
fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
   let list = (0..state.count)
       .map(|n| prose(format!("item #{n}")))
       .collect::<Vec<_>>();

   let content = flex_col((
       text_button("more", |appstate: &mut AppState| appstate.count += 1),
       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
展示段落文本
count
portal

练习2 判断

flex_col 的子元组，可以同时放置普通组件和Vec视图数组。（✅正确）
本示例自带虚拟滚动，支持上万条数据无性能损耗。（❌错误）
每次点击more按钮，状态更新后app_logic会重新执行。（✅正确）
MainAxisAlignment::Start 在 flex_col 代表子元素靠顶部对齐。（✅正确）

练习3 简答

题目：FlexSequence 动态列表的实现原理是什么？

简答题参考答案

将迭代生成的多个视图收集为 Vec ，放入flex布局的子元素元组，Xilem自动识别为FlexSequence；状态变更时app_logic重新生成新Vec，框架对比新旧视图树，增量更新列表条目，实现动态增减列表。

【xilem0.4基础语法学与练】第48课 lists组件官方示例代码深度解析

前言

一、官方完整源码

二、程序核心功能

本示例演示 动态变长列表（FlexSequence）：

核心概念：FlexSequence

三、逐模块深度解析

1. AppState 状态结构体

2. 动态列表生成

3. flex_col 混合子元素（重点）

关键知识点：

4. app_logic 与更新机制

app_logic 是视图构建函数，每次状态变更都会重新执行

注意：

5. main 入口

四、生产级拓展代码

拓展1：增加减少按钮，支持删减列表项

拓展2：套入 portal，实现长列表滚动

五、本课核心知识点总结

六、课后习题

练习1 填空

练习2 判断

练习3 简答

本示例演示动态变长列表（FlexSequence）：