面试题：Flutter中实现响应式布局的常用Widget有哪些

Question

在Flutter响应式布局的最佳实践里，列举至少三种常用于实现响应式布局的Widget，并简要说明它们各自的特点和适用场景。

Answer 1

• MediaQuery：
  • 特点：通过它可以获取设备的屏幕尺寸、方向、像素密度等信息，基于这些信息进行条件判断来实现不同布局。
  • 适用场景：根据屏幕宽度决定展示单列还是多列布局，比如在手机上展示单列列表，在平板上展示双列列表。
• LayoutBuilder：
  • 特点：可以在其builder回调中获取父Widget传递的约束信息，根据这些约束动态构建自身布局。
  • 适用场景：当Widget需要根据父Widget提供的空间大小来调整自身布局时，如根据可用宽度决定文本字体大小或图片的排列方式。
• Flexible 和 Expanded：
  • 特点：Flexible用于在Row、Column或Flex等弹性布局中控制子Widget的弹性，Expanded继承自Flexible且默认flex为1，会尽可能地占据剩余空间。
  • 适用场景：在水平或垂直排列的Widget中，按比例分配剩余空间，例如在一个Row中有两个按钮，一个按钮固定宽度，另一个按钮通过Expanded占据剩余空间。
• GridView：
  • 特点：可以在二维滚动网格中排列子Widget，通过SliverGridDelegate等参数控制子Widget的大小和排列方式。
  • 适用场景：展示图片列表、商品卡片列表等场景，能自适应不同屏幕宽度以合理排列子项。