解决 Flutter 嵌套过深，是选择函数还是自定义类组件？

前言

初学 Flutter 的时候，一个很大的感受就是组件嵌套层级很深，写下来的代码找对应的括号都找不到。比如下面这种情况，从最外层的 Scaffold 到最里层的 Image.asset，一共有7层组件嵌套。这还不算多的，最夸张是见过一个表单页面写了10多层，代码的阅读体验非常糟糕，而且如果不小心删除了一个括号要找半天才对应得上。当然，通过 VSCode 彩虹括号（Rainbow Brackets）这个插件能够一定程度上解决括号对称查找得问题，但是代码的可维护性、阅读体验还是很差。自然而然，大家会想到拆分。拆分有两种方式，一种是使用返回Widget 的函数，另一种是使用 StatelessWidget，那这两种该如何选择呢？

拆分原则

在关于这个问题的讨论上，2年前 StackOverflow 有一个经典的回答：使用函数和使用类来构建可复用得组件有什么区别？其中提到得一个关键因素是 Flutter 框架能够检测组件树的类对象，从而提高复用性。而对于私有的方法来说 Flutter 在更新的时候并不知道该如何处理。

答主也对比了使用类和函数的优劣势。使用类构建的方式：