Flutter中实现Netflix编号式带阴影卡片UI的技术求助

直接用纯HTML+CSS就能搞定，核心是通过定位做编号、多层阴影模拟立体效果，下面是具体实现代码：

HTML 结构 #

<div class="card-container">
  <div class="card">
    <span class="card-number">1</span>
    <div class="card-content">
      <!-- 替换成你的图片或内容 -->
      <img src="your-image.jpg" alt="卡片内容">
    </div>
  </div>
  <div class="card">
    <span class="card-number">2</span>
    <div class="card-content">
      <img src="your-image.jpg" alt="卡片内容">
    </div>
  </div>
  <!-- 更多卡片复制上面的结构即可 -->
</div>

CSS 样式 #

/* 卡片容器，用flex做横向排列，可按需改成网格布局 */
.card-container {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}

/* 卡片主体样式 */
.card {
  position: relative;
  width: 280px;
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
  /* 多层阴影叠加出柔和的立体效果，参数可根据视觉需求调整 */
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.08),
    0 15px 30px rgba(0, 0, 0, 0.06);
  /* 可选：hover时的上浮动画 */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 6px 8px rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.1),
    0 18px 36px rgba(0, 0, 0, 0.08);
}

/* 左上角编号样式 */
.card-number {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ff4757; /* 颜色可自定义 */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  z-index: 10; /* 确保编号在内容上方 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 编号的小阴影增强层次感 */
}

/* 卡片内容容器 */
.card-content {
  width: 100%;
  height: 100%;
}

.card-content img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片填充容器不变形 */
}

额外调整建议 #

• 阴影参数：如果觉得阴影太淡/太深，修改box-shadow里的rgba透明度和模糊半径即可，比如把最后一层的0.06改成0.09加深阴影。
• 编号样式：如果不想用圆形，把border-radius改成8px就能变成圆角矩形，颜色也可以换成品牌色。
• 响应式：加个媒体查询，在小屏幕下把card-container的flex-direction改成column，或者调整卡片宽度为100%。
• 内容扩展：如果卡片里要加文字描述，直接在card-content里添加<div class="card-text">...</div>，用绝对定位放在图片上方即可。

内容的提问来源于stack exchange，提问作者FTF Studio