Flutter周标签页管理插件weekly_tab_pager的使用

Flutter周标签页管理插件weekly_tab_pager的使用

Weekly Tab Pager

可定制的TabBar组件，集成了TabView，显示一周中的工作日，并允许按周无限滚动。

此组件在实际应用Homework Planner中使用。

如果你觉得这个库有用，请随意使用！

特性

• 连接在一起的TabBar和TabView
• 单一控制器进行导航
• 滚动期间平滑动画
• 两个方向上的无限滚动
• 标签中指定的工作日
• 选项卡/页面更改的回调

使用方法

1. 在pubspec.yaml文件中添加以下行：

dependencies:
  weekly_tab_pager: ^0.0.4

1. 在你的代码中导入包：

import 'package:weekly_tab_pager/weekly_tab_pager.dart';

1. 声明一个用于导航的控制器：

final controller = WeeklyTabController(position: DateTime.now());

1. 定义如何构建标签：

Widget _buildTab(BuildContext context, DateTime date) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(DateFormat('E').format(date).toUpperCase()), // 显示星期几的缩写并大写
      const SizedBox(height: 4),
      Text(date.day.toString()), // 显示日期
    ],
  );
}

1. 定义如何构建页面：

Widget _buildPage(BuildContext context, DateTime date) {
  return Card(
    margin: const EdgeInsets.all(24),
    child: Center(
      child: Text(
        DateFormat.yMMMMd().format(date), // 显示完整日期格式
        style: Theme.of(context).textTheme.titleLarge,
      ),
    ),
  );
}

1. 在代码中添加导航小部件：

WeeklyTabNavigator(
  controller: controller, // 控制器
  weekdays: [1, 2, 3, 4, 5], // 需要显示的工作日（周一到周五）
  weekCount: 1000, // 总共需要显示的周数
  tabBuilder: (context, date) => _buildTab(context, date), // 标签生成器
  pageBuilder: (context, date) => _buildPage(context, date), // 页面生成器
),

1. 使用控制器导航到特定日期：

controller.animateTo(DateTime.now()); // 导航到当前日期

1. 提供回调以监听导航事件：

onTabScrolled: (date) => debugPrint('onTabScrolled: $date'), // 滚动时的回调
onTabChanged: (date) => debugPrint('onTabChanged: $date'), // 切换标签时的回调
onPageChanged: (date) => debugPrint('onPageChanged: $date'), // 切换页面时的回调

完整示例Demo

import 'package:flutter/material.dart';
import 'package:intl/intl.dart'; // 日期格式化库
import 'package:weekly_tab_pager/weekly_tab_pager.dart'; // 引入weekly_tab_pager包

void main() => runApp(const MainApp());

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final weekdays = [2, 3, 4, 5, 6]; // 显示周二到周六
  final weekCount = 100; // 显示100周
  late DateTime startDate;
  late WeeklyTabController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    startDate = WeeklyTabNavigator.calcSafeDate(DateTime.now(), weekdays); // 计算安全起始日期
    controller = WeeklyTabController(position: startDate); // 初始化控制器
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏调试横幅
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue), // 主题颜色
      ),
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: WeeklyTabNavigator(
                  controller: controller, // 控制器
                  weekdays: weekdays, // 工作日
                  weekCount: weekCount, // 周数
                  tabBuilder: (context, date) => _buildTab(context, date), // 标签生成器
                  pageBuilder: (context, date) => _buildPage(context, date), // 页面生成器
                  onTabScrolled: (value) => debugPrint('onTabScrolled: $value'), // 滚动时的回调
                  onTabChanged: (value) => debugPrint('onTabChanged: $value'), // 切换标签时的回调
                  onPageChanged: (value) => debugPrint('onPageChanged: $value'), // 切换页面时的回调
                ),
              ),
              const SizedBox(height: 24),
              FilledButton(
                onPressed: () => controller.animateTo(startDate), // 重置位置按钮
                child: const Text('Reset Position'),
              ),
              const SizedBox(height: 200),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTab(BuildContext context, DateTime date) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(DateFormat('E').format(date).toUpperCase()), // 显示星期几的缩写并大写
        const SizedBox(height: 4),
        Text(date.day.toString()), // 显示日期
      ],
    );
  }

  Widget _buildPage(BuildContext context, DateTime date) {
    return Card(
      elevation: 8, // 设置阴影深度
      margin: const EdgeInsets.all(24),
      child: Center(
        child: Text(
          DateFormat.yMMMMd().format(date), // 显示完整日期格式
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
    );
  }
}