面试题：Flutter中Container构建自定义组件时如何合理设置边距与内边距

Question

在Flutter使用Container构建自定义组件，要求实现一个有10像素外边距和5像素内边距，背景色为蓝色的矩形组件，请写出关键代码，并解释边距与内边距设置的原理。

Answer 1

关键代码

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(5),
  color: Colors.blue,
)

边距与内边距设置原理

• 外边距（margin）：外边距是组件与其他组件之间的距离。EdgeInsets.all(10) 表示在组件的上、下、左、右四个方向都设置了10像素的外边距，使该 Container 与周围组件保持10像素的间隔。
• 内边距（padding）：内边距是组件内部内容与组件边框之间的距离。EdgeInsets.all(5) 表示在组件内部的上、下、左、右四个方向都设置了5像素的内边距，使得组件内部的内容（若有）与组件边框之间保持5像素的间隔，同时这个内边距会影响到组件的实际绘制区域，在这个例子中，蓝色背景会绘制在包含内边距的区域内。