面试题：Flutter中如何使用布局类Widgets构建一个卡片式列表界面

Question

假设要构建一个卡片式列表，每个卡片包含图片、标题和描述信息。请描述使用哪些布局类Widgets（如Row、Column、Container等）以及如何组合它们来实现该界面，同时简要说明这些Widgets的主要属性及作用。

Answer 1

1. 使用的布局类Widgets及组合方式：

   • Container：作为卡片的整体容器，包裹卡片内的所有内容。可以设置卡片的整体样式，如背景颜色、边框等。
   • Column：在Container内部使用Column布局，将卡片内容按垂直方向排列，依次放置图片、标题和描述信息。
   • Image：用于显示图片。可设置图片的来源（本地或网络）、尺寸等。
   • Text：用于显示标题和描述信息。可设置文本的样式，如字体大小、颜色等。

2. 主要属性及作用：

   • Container：
     • color：设置容器的背景颜色。例如color: Colors.white将背景设置为白色。
     • padding：设置容器内边距，使内容与容器边框保持一定距离。如padding: EdgeInsets.all(16.0)设置四边内边距均为16像素。
     • margin：设置容器外边距，控制容器与其他部件的间距。如margin: EdgeInsets.only(top: 8.0)设置顶部外边距为8像素。
     • decoration：用于设置容器的装饰，如边框等。例如decoration: BoxDecoration(border: Border.all(color: Colors.grey))添加灰色边框。
   • Column：
     • mainAxisAlignment：控制子部件在主轴（垂直方向）上的排列方式。如mainAxisAlignment: MainAxisAlignment.start使子部件在主轴开始位置排列。
     • crossAxisAlignment：控制子部件在交叉轴（水平方向）上的对齐方式。如crossAxisAlignment: CrossAxisAlignment.start使子部件在交叉轴开始位置对齐。
   • Image：
     • image：指定图片来源，本地图片可使用AssetImage，网络图片可使用NetworkImage。例如image: AssetImage('assets/images/sample.jpg')。
     • width和height：设置图片的宽度和高度。如width: 200.0, height: 150.0。
   • Text：
     • text：显示的文本内容。如text: '这是标题'。
     • style：设置文本样式，如style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)设置字体大小为18且加粗。