Flutter滑动标签切换插件swipe_tab_controller的使用

Flutter滑动标签切换插件swipe_tab_controller的使用

Swipe Tab Controller 是一个简单的滑动控制器，用于 TabBarView，它可以根据滑动方向更新标签控制器的索引，并且具有较少的延迟。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 swipe_tab_controller 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Swipe Tab Controller',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Swipe Tab Controller'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;

  bool isLoading = false;

  void changeLoading(bool value) {
    setState(() => isLoading = value);
  }

  void changeTab(int index) async {
    changeLoading(true);
    setState(() => selectedIndex = index);
    await Future.delayed(const Duration(milliseconds: 1300));
    changeLoading(false);
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: SwipeTabController(
        onTabChanged: changeTab,
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            bottom: TabBar(
              labelStyle: Theme.of(context).textTheme.titleLarge,
              indicatorColor: Theme.of(context).colorScheme.primary,
              indicatorWeight: 4,
              indicatorSize: TabBarIndicatorSize.tab,
              onTap: changeTab,
              tabs: const [
                Text('Tab1'),
                Text('Tab2'),
                Text('Tab3'),
              ],
            ),
          ),
          body: TabBarView(children: [
            Center(
              child: isLoading
                  ? const CircularProgressIndicator()
                  : Text(
                      'Tab 1',
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
            ),
            Center(
              child: isLoading
                  ? const CircularProgressIndicator()
                  : Text(
                      'Tab 2',
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
            ),
            Center(
              child: isLoading
                  ? const CircularProgressIndicator()
                  : Text(
                      'Tab 3',
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
            ),
          ]),
        ),
      ),
    );
  }
}

代码解释

• 导入库:

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

• 主应用:

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

  这里定义了主函数并运行 MyApp。

• MyApp类:

  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Swipe Tab Controller',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Swipe Tab Controller'),
      );
    }
  }
  

  定义了应用程序的主题和主页。

• MyHomePage类:

  class MyHomePage extends StatefulWidget {
    const MyHomePage({super.key, required this.title});
  
    final String title;
  
    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }
  

  定义了带有标题的主页。

• _MyHomePageState类:

  class _MyHomePageState extends State<MyHomePage> {
    int selectedIndex = 0;
    bool isLoading = false;
  
    void changeLoading(bool value) {
      setState(() => isLoading = value);
    }
  
    void changeTab(int index) async {
      changeLoading(true);
      setState(() => selectedIndex = index);
      await Future.delayed(const Duration(milliseconds: 1300));
      changeLoading(false);
    }
  
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 3,
        child: SwipeTabController(
          onTabChanged: changeTab,
          child: Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
              bottom: TabBar(
                labelStyle: Theme.of(context).textTheme.titleLarge,
                indicatorColor: Theme.of(context).colorScheme.primary,
                indicatorWeight: 4,
                indicatorSize: TabBarIndicatorSize.tab,
                onTap: changeTab,
                tabs: const [
                  Text('Tab1'),
                  Text('Tab2'),
                  Text('Tab3'),
                ],
              ),
            ),
            body: TabBarView(children: [
              Center(
                child: isLoading
                    ? const CircularProgressIndicator()
                    : Text(
                        'Tab 1',
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
              ),
              Center(
                child: isLoading
                    ? const CircularProgressIndicator()
                    : Text(
                        'Tab 2',
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
              ),
              Center(
                child: isLoading
                    ? const CircularProgressIndicator()
                    : Text(
                        'Tab 3',
                        style: Theme.of(context).textTheme.headlineSmall,
                      ),
              ),
            ]),
          )),
      );
    }
  }