flutter如何实现垂直方向的tab布局

在Flutter中如何实现垂直方向的Tab布局？目前使用DefaultTabController和TabBar只能实现水平方向的Tab，想要让Tab标签垂直排列在左侧，内容区域在右侧。尝试过RotatedBox旋转组件但效果不理想，是否有更合适的方案？需要支持滑动切换和动态增减Tab页的功能。

2 回复

使用TabBar和TabBarView配合RotatedBox或VerticalDirection实现垂直Tab布局。将TabBar的isScrollable设为true，并设置direction为垂直方向。

更多关于flutter如何实现垂直方向的tab布局的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过 TabBar 和 TabBarView 结合 RotatedBox 或自定义布局实现垂直方向的 Tab 布局。以下是两种实现方法：

方法一：使用 RotatedBox 旋转组件

通过旋转 TabBar 和 TabBarView 实现垂直布局：

import 'package:flutter/material.dart';

class VerticalTabs extends StatefulWidget {
  @override
  _VerticalTabsState createState() => _VerticalTabsState();
}

class _VerticalTabsState extends State<VerticalTabs> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 垂直 TabBar（旋转90度）
        RotatedBox(
          quarterTurns: 3, // 逆时针旋转270度（等效垂直从上到下）
          child: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: '标签1'),
              Tab(text: '标签2'),
              Tab(text: '标签3'),
            ],
          ),
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              Center(child: Text('内容1')),
              Center(child: Text('内容2')),
              Center(child: Text('内容3')),
            ],
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}

方法二：使用 ListView + PageView 自定义

更灵活的自定义实现方式：

class CustomVerticalTabs extends StatefulWidget {
  @override
  _CustomVerticalTabsState createState() => _CustomVerticalTabsState();
}

class _CustomVerticalTabsState extends State<CustomVerticalTabs> {
  int _selectedIndex = 0;
  final PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        // 左侧标签栏
        Container(
          width: 100,
          child: ListView(
            children: [
              _buildTabItem('标签1', 0),
              _buildTabItem('标签2', 1),
              _buildTabItem('标签3', 2),
            ],
          ),
        ),
        // 右侧内容区
        Expanded(
          child: PageView(
            controller: _pageController,
            onPageChanged: (index) {
              setState(() => _selectedIndex = index);
            },
            children: [
              Center(child: Text('内容1')),
              Center(child: Text('内容2')),
              Center(child: Text('内容3')),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildTabItem(String text, int index) {
    return GestureDetector(
      onTap: () {
        _pageController.animateToPage(
          index,
          duration: Duration(milliseconds: 300),
          curve: Curves.ease,
        );
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 16),
        color: _selectedIndex == index ? Colors.blue[100] : null,
        child: RotatedBox(
          quarterTurns: 3, // 文字旋转为垂直
          child: Text(text),
        ),
      ),
    );
  }
}

使用方式

在页面中直接调用：

Scaffold(
  appBar: AppBar(title: Text('垂直标签页')),
  body: VerticalTabs(), // 或 CustomVerticalTabs()
)

注意事项：

  1. 旋转方案可能需要调整内边距和对齐方式
  2. 自定义方案更灵活，可以完全控制样式和交互
  3. 如果标签文字较长，建议使用自定义方案

选择哪种方案取决于具体需求，旋转方案代码简洁，自定义方案控制粒度更细。

回到顶部