Flutter无状态组件中如何一次性完成大量初始化计算？

我有JavaScript开发背景，在将TS逻辑转换为Flutter组件时，遇到了Dart构造函数的使用问题。

TypeScript/JavaScript中的实现逻辑 #

import {availableMeals} from "MealService";

type MealFilter={isGlutenFree:boolean};
type Meal=unknown; //简化写法

class GridPage{

    _filteredMeal: Meal[]
    constructor(public filter?: MealFilter ){
        
        this._filteredMeal= availableMeals.filter(x=> {
            if (filter==null){
                return true;
            }
            
            if(filter.isGlutenFree && !x.isGlutenFree){
                return false;
            }
            return true;
        });
        // 其他大量计算逻辑
    }
}

我的Flutter尝试与错误 #

第一次尝试

class GridPage extends StatelessWidget {
  const GridPage({super.key, this.filter = const []}){
    filteredFoods = availableMeals.where((meal) {
      if (filter == null) {
        return true;
      }
      return false;
    }).toList();;
  }

  final List<FilterModel>? filter;
  final List<Meal> filteredFoods;
}

错误：Const构造函数不能有函数体，请移除const关键字或函数体。

移除const后

class GridPage extends StatelessWidget {
  GridPage({super.key, this.filter = const []}){
    filteredFoods = availableMeals.where((meal) {
      if (filter == null) {
        return true;
      }
      return false;
    }).toList();;
  }

  final List<FilterModel>? filter;
  final List<Meal> filteredFoods;
}

错误：'filteredFoods'无法作为 setter 使用，因为它是final类型。请尝试寻找其他setter，或将'filteredFoods'改为非final类型。

移除final后

class GridPage extends StatelessWidget {
  GridPage({super.key, this.filter = const []}){
    filteredFoods = availableMeals.where((meal) {
      if (filter == null) {
        return true;
      }
      return false;
    }).toList();;
  }

  final List<FilterModel>? filter;
  List<Meal> filteredFoods;
}

错误：该类（或其继承的类）标记为'@immutable'，但一个或多个实例字段并非final类型：GridPage.filteredFoods

保留final和const的写法

class GridPage extends StatelessWidget {
  const GridPage({super.key, this.filter = const []});

  final List<FilterModel>? filter;
  final List<Meal> filteredFoods= availableMeals.where((meal) {
      if (filter == null) {
        return true;
      }
      return false;
    }).toList();;
}

错误：无法在初始化器中访问实例成员'filter'。请尝试用其他表达式替换对实例成员的引用。

使用初始化列表的尝试

class GridPage extends StatelessWidget {
  const GridPage({super.key, this.filter = const []})
      : filteredFoods= availableMeals.where((meal) {
           if (filter == null) {
              return true;
           }
           return false;
        }).toList();

  final List<FilterModel>? filter;
  final List<Meal> filteredFoods;
}

这时候能运行，但不确定如何扩展到大量计算逻辑。尝试封装到函数时又出错：

class GridPage extends StatelessWidget {
  GridPage({super.key, this.filter = const []})
      : init(filter);
}

错误：字段名后应跟赋值语句。请使用'name = value'语法初始化字段。

核心问题 #

我需要在构造阶段一次性完成大量计算，不想切换到StatefulWidget，也不想把计算移到build方法（避免filter不变时重复计算）。有没有办法用StatelessWidget一次性完成所有计算？

解决方案 #

1. 初始化列表+静态工具函数（推荐）

把复杂计算逻辑封装到静态函数中，在初始化列表里调用这些函数给final字段赋值，既满足不可变性要求，又能处理复杂逻辑：

class GridPage extends StatelessWidget {
  GridPage({super.key, this.filter = const []})
      : filteredFoods = _filterMeals(filter),
        // 其他需要计算的字段也在这里通过静态函数初始化
        mealCount = _calculateMealCount(filter);

  final List<FilterModel>? filter;
  final List<Meal> filteredFoods;
  final int mealCount;

  // 封装过滤逻辑的静态函数
  static List<Meal> _filterMeals(List<FilterModel>? filter) {
    if (filter == null || filter.isEmpty) {
      return List.from(availableMeals);
    }
    // 这里可以写任意复杂逻辑：循环、多条件判断都支持
    return availableMeals.where((meal) {
      bool passesAllFilters = true;
      for (final f in filter) {
        if (f.isGlutenFree && !meal.isGlutenFree) {
          passesAllFilters = false;
          break;
        }
        // 添加其他过滤规则...
      }
      return passesAllFilters;
    }).toList();
  }

  // 封装其他计算逻辑的静态函数
  static int _calculateMealCount(List<FilterModel>? filter) {
    // 根据filter执行复杂计算
    return _filterMeals(filter).length;
  }

  @override
  Widget build(BuildContext context) {
    // 使用预计算好的字段构建UI
    return GridView.builder(
      itemCount: filteredFoods.length,
      itemBuilder: (context, index) => MealItem(meal: filteredFoods[index]),
    );
  }
}

优势：

• 静态函数不依赖实例成员，可在初始化列表中调用
• 所有计算仅在实例构造时执行一次，filter不变时不会重复计算
• 完全符合StatelessWidget的不可变性设计原则

2. 使用late final延迟初始化（不推荐）

虽然可以用late final在构造函数体中赋值，但会破坏StatelessWidget的不可变性原则，IDE会触发警告，仅作参考：

class GridPage extends StatelessWidget {
  GridPage({super.key, this.filter = const []}) {
    filteredFoods = _filterMeals(filter);
    // 其他计算逻辑
  }

  final List<FilterModel>? filter;
  late final List<Meal> filteredFoods;

  static List<Meal> _filterMeals(List<FilterModel>? filter) {
    // 过滤逻辑实现
  }

  @override
  Widget build(BuildContext context) { ... }
}

内容的提问来源于stack exchange，提问作者Mohammad Hossein Amri