Flutter如何实现带边框内箭头指示器的登录注册切换导航栏

实现特性 #

• 无任何第三方依赖，纯原生HTML/CSS/JS实现，压缩后体积不足1KB，足够轻量
• 导航栏下边框内置三角箭头作为选中状态标识，切换时带平滑过渡动画
• 点击导航项可同步切换对应登录、注册表单的显示状态
• 样式独立命名，不会和页面现有样式产生冲突，可直接复用

完整代码 #

HTML结构 #

<!-- 导航栏组件 -->
<div class="auth-tab-nav">
  <div class="tab-item active" data-pane="login">登录</div>
  <div class="tab-item" data-pane="register">注册</div>
  <div class="tab-indicator"></div>
</div>

<!-- 表单内容区 -->
<div class="auth-tab-content">
  <div class="tab-pane active" id="login">登录表单区域</div>
  <div class="tab-pane" id="register">注册表单区域</div>
</div>

CSS样式 #

.auth-tab-nav {
  position: relative;
  display: flex;
  width: 320px;
  margin: 24px auto;
  border-bottom: 1px solid #e2e8f0;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
  font-size: 16px;
  color: #64748b;
  transition: color .2s ease;
}
.tab-item.active {
  color: #2563eb;
  font-weight: 500;
}
/* 选中态箭头标识 */
.tab-indicator {
  position: absolute;
  bottom: -7px;
  left: 25%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  transform: rotate(45deg);
  transition: left .25s ease;
}
/* 注册项选中时箭头偏移 */
.auth-tab-nav.tab-register .tab-indicator {
  left: 75%;
}
.auth-tab-content {
  width: 320px;
  margin: 0 auto;
  padding: 20px 0;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

交互JS #

const tabItems = document.querySelectorAll('.tab-item')
const tabNav = document.querySelector('.auth-tab-nav')
const tabPanes = document.querySelectorAll('.tab-pane')

tabItems.forEach(item => {
  item.addEventListener('click', () => {
    // 重置所有选中状态
    tabItems.forEach(i => i.classList.remove('active'))
    tabPanes.forEach(p => p.classList.remove('active'))
    // 设置当前选中项
    item.classList.add('active')
    const targetPane = item.dataset.pane
    document.getElementById(targetPane).classList.add('active')
    // 切换箭头位置
    targetPane === 'register' 
      ? tabNav.classList.add('tab-register')
      : tabNav.classList.remove('tab-register')
  })
})

自定义调整说明 #

• 可修改width属性调整导航栏整体宽度，修改left百分比适配不同宽度下的箭头居中位置
• 箭头大小、颜色可通过修改.tab-indicator的宽高、边框色值自定义
• 不需要动画效果直接删除代码里的transition属性即可实现无动画硬切换

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