面试题：Flutter中Container装饰与边距：复杂场景运用

Question

假设你需要创建一个卡片式布局，卡片具有阴影效果，背景色根据用户主题设置（浅色或深色）动态变化，卡片内部有一些子组件且卡片上下边距为30像素，左右边距自适应屏幕宽度的10%。请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 布局设置：使用合适的布局容器（如div）来创建卡片结构。利用CSS的盒模型属性设置上下边距为30像素，左右边距自适应屏幕宽度的10%。
2. 阴影效果：通过CSS的box-shadow属性为卡片添加阴影。
3. 动态背景色：利用JavaScript获取用户主题设置（可通过本地存储、系统主题检测等方式），根据主题动态修改卡片的背景色。
4. 子组件放置：在卡片容器内添加相应的子组件。

关键代码片段

1. HTML结构

<div class="card">
  <!-- 子组件内容 -->
  <p>这是卡片内的子组件内容</p>
</div>

2. CSS样式

.card {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 10%;
  margin-right: 10%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 浅色主题背景色 */
  background-color: #f9f9f9; 
  /* 深色主题背景色可通过JavaScript动态修改 */
}

3. JavaScript动态修改背景色（示例）

// 假设通过本地存储获取主题设置，'light' 为浅色主题，'dark' 为深色主题
const theme = localStorage.getItem('theme');
const card = document.querySelector('.card');
if (theme === 'dark') {
  card.style.backgroundColor = '#333';
}