Flutter日期选择插件scroll_wheel_date_picker的使用

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

Flutter日期选择插件scroll_wheel_date_picker的使用

你是否遇到过想要使用CupertinoDatePicker但无法实现像Android TikTok那样的平滑滚动视图的情况？或者，你也尝试过使用ListWheelScrollView，但结果依然相同？

好消息！

这个包支持一种轮式日期选择器，它有两种滚动类型：CurveScrollWheel 和 FlatScrollWheel。

特性

ScrollWheelDatePicker 使用 ListWheelScrollView 实现了 CurveScrollWheel。然而，为了在 FlatScrollWheel 中实现相同的功能，但没有曲线视角，增加了一些特性和修改。

中心选中项

就像使用 CupertinoDatePicker 或 ListWheelScrollView 一样，它可以让你选择一个日期，并确保某个特定的项目始终位于视口的中心。

选择中心覆盖层

你可以选择你想要的当前选中项目的覆盖层类型。holo、highlight 和 line 是一些可以选择的覆盖层。如果你不想要任何覆盖层，可以将其设置为 none。（预计很快会添加更多的覆盖层或添加自定义覆盖层的选项…）

月份格式

它可以让你选择要显示的月份格式。可用的格式有 full（即完整的月份名称）、threeLetters 和 twoLetters（即根据常见缩写来格式化月份的字母数）。

淡出垂直边缘

它会在顶部和底部添加淡出效果，当项目超出视口时，可以创建一个平滑消失的效果。默认值为 true。

监听滚动动画完成后的项目变化

与 CupertinoDatePicker 不同，它给你一个选项，是否在滚动动画结束/完成后监听项目变化。listenAfterChanges 默认为 true，否则，将其改为 false 以恢复默认功能。

无限循环

支持项目的循环。你可以选择是否单独启用 days、months 或 years 的循环。

示例

曲线滚动轮

曲线Holo覆盖层 曲线高亮覆盖层 曲线线条覆盖层

平面滚动轮

平面Holo覆盖层 平面高亮覆盖层 平面线条覆盖层

使用

添加依赖

在 pubspec.yaml 文件中添加该包：

flutter pub add scroll_wheel_date_picker

或者

dependencies:
  scroll_wheel_date_picker: ^0.0.2+1

然后导入该包：

import 'package:scroll_wheel_date_picker/scroll_wheel_date_picker.dart';

使用

使用方法如下：

ScrollWheelDatePicker(
  theme: FlatDatePickerTheme(
    backgroundColor: Colors.white,
    overlay: ScrollWheelDatePickerOverlay.holo,
    itemTextStyle: defaultItemTextStyle.copyWith(color: Colors.black),
    overlayColor: Colors.black,
    overAndUnderCenterOpacity: 0.2,
  ),
),

完整示例

以下是完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll Wheel Date Picker',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const ScrollWheelDatePicker(),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用scroll_wheel_date_picker插件的示例代码。这个插件允许你通过滚动轮的方式选择日期。

首先，确保你已经在pubspec.yaml文件中添加了scroll_wheel_date_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  scroll_wheel_date_picker: ^x.y.z  # 请将x.y.z替换为最新版本号

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

接下来，在你的Dart文件中，你可以这样使用ScrollWheelDatePicker：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime _selectedDate = DateTime.now();

  void _onDateChanged(DateTime date) {
    setState(() {
      _selectedDate = date;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Wheel Date Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Date: ${_selectedDate.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ScrollWheelDatePicker(
              date: _selectedDate,
              onChanged: _onDateChanged,
              maxYear: DateTime.now().year + 10,
              minYear: DateTime.now().year - 10,
              yearItemCount: 20,
              monthItemCount: 3,
              dayItemCount: 6,
              locale: Localizations.localeOf(context),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

  1. 依赖导入：首先导入flutter/material.dart和scroll_wheel_date_picker/scroll_wheel_date_picker.dart。
  2. 应用入口：MyApp是应用的入口，设置主题和首页。
  3. 首页组件：MyHomePage是一个有状态的组件，用于处理日期选择逻辑。
  4. 日期选择逻辑：_onDateChanged方法会在日期选择改变时被调用，并更新选中日期。
  5. UI布局：在Scaffold的body中，使用Column布局显示选中的日期和ScrollWheelDatePicker组件。
  6. 日期选择器配置：ScrollWheelDatePicker组件配置了日期范围、显示项数量、本地化信息等参数。

这样，你就可以在你的Flutter应用中集成并使用scroll_wheel_date_picker插件进行日期选择了。希望这个示例对你有帮助！

回到顶部