面试题：Flutter中Widget树结构与渲染机制之Widget分类

Question

在Flutter的Widget树结构中，StatefulWidget和StatelessWidget有什么主要区别？请举例说明在哪些场景下会分别使用它们。

Answer 1

主要区别

1. 状态管理：
   • StatelessWidget：无状态，一旦创建，其属性（final修饰）不可变。Widget树重建时，该Widget不会保留之前的状态信息。
   • StatefulWidget：有状态，状态由与之关联的State对象管理。State对象可以在Widget生命周期内改变，从而触发Widget重建并更新UI。
2. 性能表现：
   • StatelessWidget：由于不需要管理状态变化，性能开销相对较小，适用于简单、无状态变化的UI元素。
   • StatefulWidget：因需要管理状态和处理状态变化，性能开销相对较大，适用于状态会动态改变的UI元素。
3. 生命周期：
   • StatelessWidget：只有build方法，每次父Widget重建，该Widget都会重建。
   • StatefulWidget：有完整的生命周期方法，如initState（创建时调用一次）、didUpdateWidget（父Widget传递新属性时调用）、dispose（销毁时调用）等。

使用场景举例

1. StatelessWidget场景：
   • 文本显示：比如显示固定的标题、描述等文本内容。例如一个简单的应用标题Text('My App')，这个标题不会在应用运行过程中发生变化，使用StatelessWidget最合适。
   • 简单图标：像一个固定的应用图标，无论应用处于何种状态，图标都保持不变，例如Icon(Icons.home)。
2. StatefulWidget场景：
   • 按钮点击计数：有一个按钮，点击后数字会增加并显示。每次点击按钮会改变状态（计数增加），这就需要使用StatefulWidget来管理点击次数的状态并更新UI。
   • 表单输入：用户在输入框中输入内容，输入框的状态（文本内容）会随着用户输入而改变，适合用StatefulWidget管理输入状态。