Flutter日期选择插件weekday_selector的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter日期选择插件weekday_selector的使用

weekday_selector

weekday_selector 是一个用于在Flutter应用中选择工作日的控件集合。非常适合用于重复事件或闹钟等功能。

weekday_selector

持续集成

代码覆盖率

weekday_selector

GitHub Stars Count

样式示例

重要链接

如果您喜欢使用这个包,请在pub.dev上点个赞!👍💙 让我们达到100个赞吧🚀

使用方法

示例应用

您可以在包的Github仓库/example文件夹中找到最好的示例。 在那里,您可以看到基本用法、样式定制和国际化方面的示例。

基本用法

WeekdaySelector 可以与任何状态管理解决方案一起很好地使用。以下是使用简单的状态小部件的典型用法:

class ExampleState extends State<ExampleWidget> {
  // 我们从所有天都被选中开始。
  final values = List.filled(7, true);

  @override
  Widget build(BuildContext context) {
    return WeekdaySelector(
      onChanged: (int day) {
        setState(() {
          // 使用模运算 % 7,因为星期日的数组索引为0,而DateTime.sunday的常量整数值为7。
          final index = day % 7;
          // 在此示例中,我们翻转值,但您也可以执行验证、数据库写入、HTTP调用等,
          // 然后才实际翻转值,这取决于您的应用需求。
          values[index] = !values[index];
        });
      },
      values: values,
    );
  }
}

当创建WeekdaySelector小部件时,传递一个长度为7的List<bool>作为values参数。 values[0]是星期日,values[1]是星期一,以此类推。 values列表也可以包含null,在这种情况下,该天将被禁用。

如果要处理用户交互,实现onChanged回调。 onChanged回调将被调用,其参数为与DateTime日常数相匹配的int整数:DateTime.monday == 1,…, DateTime.sunday == 7: 如果用户点击星期三,onChanged回调将被调用,参数为3

完全控制

您完全控制用户交互的方式以及您设置星期选择器的状态。

在“基本用法”中的示例中,星期选择器的工作方式类似于复选框:用户可以选择所需的天数。然而,这可能并不总是您想要的。

我们设计了小部件的界面,以便使小部件的行为易于自定义。例如,如果希望星期选择器类似于单选按钮,您只需要调整onChanged回调。

class RadioLikeWeekdaySelector extends State<ExampleWidget> {
  List<bool> values = List.filled(7, false);

  @override
  Widget build(BuildContext context) {
    return WeekdaySelector(
      onChanged: (int day) {
        setState(() {
          // 将所有值设为false,除了第“day”个元素
          values = List.filled(7, false, growable: false)..[day % 7] = true;
        });
      },
      values: values,
    );
  }
}

自定义

WeekdaySelector 类接受许多自定义选项:您可以调整填充颜色、文本样式、天数的形状、阴影等等。如果没有提供这些值中的任何一个,库会尽力根据您的材料主题找出一种样式。

要查看所有支持的参数列表,请查阅API参考

主题支持

如果您想控制多个选择器的外观,请参阅WeekdaySelectorTheme小部件。

它的工作原理与其他主题小部件完全相同:后代的星期选择器将使用主题的属性。直接传递给小部件的参数覆盖从主题继承的值。

国际化

我们的目标是为您提供一个支持所有语言的小部件。 WeekdaySelector 接受自定义按钮文本、工具提示、一周的第一天和文本方向(RTL-LTR),分别通过shortWeekdaysweekdaysfirstDayOfWeektextDirection 参数。

如果省略这些参数,将使用相应的英文(“en ISO”)翻译。

国际化的示例

intl

如果您需要支持多种语言,我们建议您查看intl包的DateSymbols类。

一周的第一天

请注意,intl包使用0值作为周一的FIRSTDAYOFWEEK值,而DateTime.monday等于1。参见dart-lang #265intl包和核心Dart库的日表示法不一致,因此我们在weekday_selector包中决定使用Dart核心库的约定。

因此,如果您使用intl库来决定一周应从哪一天开始,请不要忘记在将其传递给WeekdaySelector小部件之前向FIRSTDAYOFWEEK添加+1

WeekdaySelector(
  // intl包使用0表示周一,但DateTime使用1表示周一,
  // 所以我们需要确保值匹配
  firstDayOfWeek: dateSymbols.FIRSTDAYOFWEEK + 1,
),

更多关于Flutter日期选择插件weekday_selector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日期选择插件weekday_selector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter日期选择插件weekday_selector的使用,这里是一个简单的代码示例,展示如何在Flutter应用中使用该插件来选择特定的星期几。

首先,确保你已经在pubspec.yaml文件中添加了weekday_selector依赖:

dependencies:
  flutter:
    sdk: flutter
  weekday_selector: ^最新版本号  # 请替换为实际最新版本号

然后,运行flutter pub get来获取依赖。

接下来,在你的Flutter应用中,你可以按照以下方式使用weekday_selector

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weekday Selector Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedWeekday;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weekday Selector Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedWeekday == null
                  ? 'No weekday selected'
                  : 'Selected Weekday: ${selectedWeekday!.toLocal()}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            WeekdaySelector(
              firstDayOfWeek: DateTime.now().weekday,
              lastDayOfWeek: DateTime.now().add(Duration(days: 6)).weekday,
              selectedDate: selectedWeekday,
              onChanged: (DateTime? date) {
                setState(() {
                  selectedWeekday = date;
                });
              },
              builder: (context, date, selected) {
                return Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: selected ? Colors.blue : Colors.transparent,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  padding: EdgeInsets.all(8.0),
                  margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
                  child: Text(
                    DateFormat('EEEE').format(date),
                    style: TextStyle(
                      color: selected ? Colors.blue : Colors.black,
                      fontSize: 18,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 引入必要的包:我们引入了flutter/material.dartweekday_selector包。
  2. 设置应用:我们创建了一个简单的Flutter应用,其中包含一个MyAppMyHomePage
  3. 状态管理:在_MyHomePageState中,我们使用一个DateTime?类型的变量selectedWeekday来存储用户选择的星期几。
  4. UI构建:我们使用Column布局了两个组件:一个Text组件显示当前选择的星期几(如果没有选择,则显示“No weekday selected”),以及一个WeekdaySelector组件。
  5. WeekdaySelector配置:我们配置了WeekdaySelector,包括起始星期几、结束星期几、当前选择的日期以及日期变更时的回调函数。我们还提供了一个自定义的builder函数,用于定义每个星期几项的样式。

请注意,WeekdaySelectorfirstDayOfWeeklastDayOfWeek属性在这里被硬编码为当前日期及其后6天的星期几,这仅作为示例。在实际应用中,你可能需要根据具体需求调整这些值。

此外,DateFormat('EEEE').format(date)用于格式化日期为星期几的全称(例如,Monday, Tuesday等),这依赖于intl包,因此你可能需要在pubspec.yaml中添加intl依赖。

希望这个示例能帮你快速上手weekday_selector插件的使用!

回到顶部