如何在Flutter中实现菜单抽屉指定UI设计？重点实现Alerts项下方垂直长线

方案一：利用父元素伪元素实现完整垂直线 #

假设你的菜单是父项包含子菜单的嵌套结构，可通过给父菜单项添加伪元素，定位后覆盖从父项到所有子项的高度：

HTML结构示例

<div class="menu-drawer">
  <div class="menu-item parent-item">
    Alerts
    <div class="submenu">
      <div class="submenu-item">系统通知</div>
      <div class="submenu-item">告警提醒</div>
      <div class="submenu-item">消息推送</div>
    </div>
  </div>
</div>

CSS实现

/* 父菜单项设为相对定位，作为伪元素的定位基准 */
.parent-item {
  position: relative;
  padding: 10px 20px;
}

/* 生成贯穿子菜单的垂直长线 */
.parent-item::before {
  content: '';
  position: absolute;
  /* 调整left值，和子菜单短横线位置对齐 */
  left: 18px;
  /* 从父菜单项底部下方开始 */
  top: 100%;
  width: 1px;
  background-color: #999;
  /* 高度设为100%，自动覆盖父元素包含的所有子菜单高度 */
  height: 100%;
}

/* 子菜单缩进，避免和垂直线重叠 */
.submenu {
  margin-left: 35px;
  padding: 5px 0;
}

/* 子菜单项的短水平线（你已实现的部分，可参考） */
.submenu-item {
  position: relative;
  padding: 8px 0;
}
.submenu-item::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background-color: #999;
}

方案二：子菜单边框+伪元素补全顶部连接 #

如果子菜单是独立容器，可通过给子菜单添加左侧边框，再用伪元素把边框向上延伸连接到父菜单项下方：

CSS实现

.parent-item {
  padding: 10px 20px;
}

.submenu {
  /* 子菜单左侧边框作为垂直线主体 */
  border-left: 1px solid #999;
  margin-left: 18px;
  padding-left: 17px;
  position: relative;
}

/* 伪元素补全顶部短截线，连接到父菜单项下方 */
.submenu::before {
  content: '';
  position: absolute;
  left: -1px; /* 和左侧边框对齐 */
  top: -8px; /* 向上延伸到父项底部 */
  width: 1px;
  height: 8px;
  background-color: #999;
}

/* 子菜单项短水平线 */
.submenu-item {
  position: relative;
  padding: 8px 0;
}
.submenu-item::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background-color: #999;
}

注意事项 #

• 调整left、top等值时，需根据菜单实际排版间距微调，保证垂直线和子菜单短横线对齐。
• 若菜单有展开/收起功能，给父菜单项添加active类，控制伪元素或子菜单边框的显示/隐藏即可。
• 若使用ul/li结构，只需把上述类名替换为对应的li、ul选择器，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Shehan DMG