Flutter动态标签管理插件flutter_dynamic_tabs的使用

Flutter动态标签管理插件flutter_dynamic_tabs的使用

flutter_dynamic_tabs 是一个用于在Flutter应用中管理动态标签的插件。通过该插件，你可以轻松地创建和管理可交互的标签页。

获取开始

本项目是一个Dart库模块，可以被轻松地共享到多个Flutter或Dart项目中。如果你刚开始学习Flutter，可以查看我们的在线文档，它提供了教程、示例、移动开发指南以及完整的API参考。

使用示例

以下是一个使用 flutter_dynamic_tabs 插件的完整示例。此示例展示了如何创建一个带有动态标签的页面，并演示了如何打开和关闭不同的标签页。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final DynamicTabsController dynamicTabsController = DynamicTabsController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: DynamicTabsWrapper(
        controller: dynamicTabsController,
        tabs: [
          DynamicTab(label: 'identifier', isInitiallyActive: true),
          DynamicTab(label: '1'),
          DynamicTab(label: '2'),
          DynamicTab(label: '3'),
          DynamicTab(label: '4'),
          DynamicTab(label: '5'),
          DynamicTab(label: '6'),
        ],
        tabViews: [
          DynamicTabView(
              identifier: 'identifier',
              child: Test(dynamicTabsController, 'id')),
          DynamicTabView(
              identifier: '1',
              child: InkWell(child: Test(dynamicTabsController, '1'))),
          DynamicTabView(
              identifier: '2', child: Test(dynamicTabsController, '2')),
          DynamicTabView(
              identifier: '3', child: Test(dynamicTabsController, '3')),
          DynamicTabView(
              identifier: '4', child: Test(dynamicTabsController, '4')),
          DynamicTabView(
              identifier: '5', child: Test(dynamicTabsController, '5')),
          DynamicTabView(
              identifier: '6', child: Test(dynamicTabsController, '6')),
        ],
        builder: (context, tabBar, tabView) {
          return Scaffold(
              appBar: AppBar(
                title: const Text('Dynamic Tabs Example'),
                bottom: tabBar,
              ),
              body: tabView);
        },
      ),
    );
  }
}

class Test extends StatefulWidget {
  const Test(this.controller, this.id, {Key? key}) : super(key: key);
  final DynamicTabsController controller;
  final String id;

  [@override](/user/override)
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> with AutomaticKeepAliveClientMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('Tab ${widget.id}'),
        ),
        TextButton(
            onPressed: () {
              widget.controller.openTab('1');
            },
            child: const Text('Open tab 1')),
        TextButton(
            onPressed: () {
              widget.controller.openTab('2');
            },
            child: const Text('Open tab 2')),
        TextButton(
            onPressed: () {
              widget.controller.openTab('3');
            },
            child: const Text('Open tab 3')),
        TextButton(
            onPressed: () {
              widget.controller.openTab('4');
            },
            child: const Text('Open tab 4')),
        TextButton(
            onPressed: () {
              widget.controller.openTab('5');
            },
            child: const Text('Open tab 5')),
        TextButton(
            onPressed: () {
              widget.controller.openTab('6');
            },
            child: const Text('Open tab 6')),
        TextButton(
            onPressed: () {
              widget.controller.closeTabs(['6', '5', '4']);
            },
            child: const Text('Close tabs 4, 5, 6')),
        TextButton(
            onPressed: () {
              widget.controller.openTabs(['6', '5', '4']);
            },
            child: const Text('Open tabs 4, 5, 6')),
      ],
    );
  }

  [@override](/user/override)
  bool get wantKeepAlive => true;
}