Flutter垂直标签栏插件lit_vertical_tabbar的使用

Flutter 垂直标签栏插件 lit_vertical_tabbar 的使用

lit_vertical_tabbar 是一个提供自动化的标签栏变化功能的 Flutter 插件。当 ListView 滚动时，它会自动切换标签栏。

Demo

使用

首先，确保在你的 pubspec.yaml 文件中添加 lit_vertical_tabbar 依赖项：

dependencies:
  lit_vertical_tabbar: ^1.0.0

然后，你可以使用以下代码来创建一个带有垂直标签栏的应用程序：

import 'package:flutter/material.dart';
import 'package:lit_vertical_tabbar/lit_element_model.dart';
import 'package:lit_vertical_tabbar/lit_vertical_tabbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义标签页的内容
    final children = [
      LitElementModel(
        tabName: 'My Beautiful Dark Twisted Fantasy',
        child: Image.asset('assets/mbdtf.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'Graduation',
        child: Image.asset('assets/graduation.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'The College Dropout',
        child: Image.asset('assets/colledge.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'Vultures',
        child: Image.asset('assets/vultures.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: '808s & Heardbreak',
        child: Image.asset('assets/808.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'Yeezus',
        child: Image.asset('assets/yeezus.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'The Life Of Pablo',
        child: Image.asset('assets/father.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'JESUS IS KING',
        child: Image.asset('assets/jesus.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'YE',
        child: Image.asset('assets/ye.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
      LitElementModel(
        tabName: 'Donda',
        child: Image.asset('assets/donda.png', width: 360, height: 360, fit: BoxFit.contain),
      ),
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'Kanye West - Top 10 Albums',
            style: TextStyle(color: Colors.black45, fontWeight: FontWeight.w700),
          ),
        ),
        body: LitVerticalTabBar(
          backgroundColor: Colors.black87,
          padding: const EdgeInsets.symmetric(vertical: 24),
          moveTabToLastIndexOnScrollEnd: true,
          divider: const Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Divider(),
              Text('kanye da 🐐 no 🧢', style: TextStyle(color: Colors.white)),
              Divider(),
            ],
          ),
          children: children,
        ),
      ),
    );
  }
}

更多关于Flutter垂直标签栏插件lit_vertical_tabbar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter垂直标签栏插件lit_vertical_tabbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


lit_vertical_tabbar 是一个用于 Flutter 的垂直标签栏插件，它允许你在应用程序中创建一个垂直方向的标签栏。这个插件非常适合用于需要侧边导航或垂直布局的应用程序。

安装

首先，你需要在 pubspec.yaml 文件中添加 lit_vertical_tabbar 依赖：

dependencies:
  flutter:
    sdk: flutter
  lit_vertical_tabbar: ^1.0.0  # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示了如何使用 lit_vertical_tabbar 创建一个垂直标签栏：

import 'package:flutter/material.dart';
import 'package:lit_vertical_tabbar/lit_vertical_tabbar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalTabBarExample(),
    );
  }
}

class VerticalTabBarExample extends StatefulWidget {
  @override
  _VerticalTabBarExampleState createState() => _VerticalTabBarExampleState();
}

class _VerticalTabBarExampleState extends State<VerticalTabBarExample> {
  int _selectedIndex = 0;

  final List<String> _tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          LitVerticalTabBar(
            tabs: _tabs.map((tab) => Text(tab)).toList(),
            selectedIndex: _selectedIndex,
            onTabChanged: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
          ),
          Expanded(
            child: Center(
              child: Text('Selected Tab: ${_tabs[_selectedIndex]}'),
            ),
          ),
        ],
      ),
    );
  }
}

详细说明

  1. LitVerticalTabBar: 这是 lit_vertical_tabbar 插件提供的主要组件，用于创建垂直标签栏。

  2. tabs: 这是一个 List<Widget>，用于定义标签栏中的每个标签。你可以使用 Text、Icon 或其他小部件来定义标签。

  3. selectedIndex: 这是一个 int 类型的值，表示当前选中的标签索引。

  4. onTabChanged: 这是一个回调函数，当用户点击标签时会被调用，并传递当前选中的标签索引。

  5. Expanded: 用于将标签栏与内容区域分开，确保标签栏占据固定的宽度，而内容区域可以自适应剩余空间。

自定义

你可以通过传递不同的参数来自定义 LitVerticalTabBar 的外观和行为。例如：

  • backgroundColor: 设置标签栏的背景颜色。
  • indicatorColor: 设置选中标签的指示器颜色。
  • indicatorWidth: 设置指示器的宽度。
  • labelStyle: 设置标签的文本样式。
  • unselectedLabelStyle: 设置未选中标签的文本样式。
LitVerticalTabBar(
  tabs: _tabs.map((tab) => Text(tab)).toList(),
  selectedIndex: _selectedIndex,
  onTabChanged: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  backgroundColor: Colors.blueGrey,
  indicatorColor: Colors.blue,
  indicatorWidth: 4.0,
  labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
  unselectedLabelStyle: TextStyle(fontSize: 14, color: Colors.grey),
),
回到顶部