面试题：Flutter中StatefulWidget与StatelessWidget在复杂业务场景下的应用对比

Question

假设要开发一个具有实时聊天功能和用户动态展示的社交应用，分析在哪些具体模块（如聊天消息显示、用户动态列表等）适合使用StatefulWidget，哪些适合使用StatelessWidget，并详细说明原因及实现思路。

Answer 1

适合使用StatelessWidget的模块及原因和实现思路

1. 聊天消息的单个显示组件

   • 原因：每个聊天消息的显示内容通常是固定的，一旦创建后不需要改变其状态。例如，消息的文本内容、发送者昵称、发送时间等，这些信息在显示时不会发生变化，符合StatelessWidget无状态的特性。
   • 实现思路：创建一个继承自StatelessWidget的类，在其build方法中根据传入的消息数据（如Message对象，包含文本、发送者等属性）构建消息的UI，如使用Column和Text组件来展示消息文本、发送者和时间。

2. 用户动态列表项

   • 原因：类似于聊天消息，每个用户动态项的展示内容相对固定，如动态文本、发布者信息、点赞数等，一旦展示后基本不会自行改变状态，适合用StatelessWidget来构建。
   • 实现思路：创建一个继承自StatelessWidget的类，在build方法中根据传入的动态数据（如Dynamic对象，包含内容、发布者、点赞数等属性）使用合适的布局组件（如Row、Column等）来展示动态的各个部分。

适合使用StatefulWidget的模块及原因和实现思路

1. 聊天消息显示整体模块

   • 原因：聊天过程中不断有新消息进来，需要更新消息列表的显示状态。例如滚动到最新消息、新消息提醒等功能，这些都涉及到状态的改变，因此适合使用StatefulWidget。
   • 实现思路：创建一个继承自StatefulWidget的类，在其内部创建一个继承自State的类。在State类中定义消息列表数据（如List<Message>）和控制滚动位置等状态变量。在initState方法中初始化数据或设置监听。在收到新消息时，通过setState方法更新消息列表数据，触发UI重绘以显示新消息。同时可以在State类中实现滚动到最新消息等逻辑。

2. 用户动态点赞功能模块

   • 原因：点赞状态是动态变化的，用户点击点赞按钮后，点赞数需要实时更新，点赞按钮的样式也可能改变（如从未点赞到已点赞图标变化），这涉及到状态的改变，所以适合StatefulWidget。
   • 实现思路：创建一个继承自StatefulWidget的类及对应的State类。在State类中定义点赞数和点赞状态（如bool isLiked）等状态变量。在build方法中根据点赞状态显示不同样式的点赞按钮。当用户点击点赞按钮时，通过setState方法更新点赞数和点赞状态，UI会相应地更新显示。