Flutter时间选择插件time_slot的使用

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

Flutter时间选择插件time_slot的使用

time_slot 是一个新的 Flutter 插件,用于创建具有给定时间间隔或日期时间列表的时间段,并获取时间的时段名称。该插件支持阿拉伯语(ar)和英语(en)的本地化。

安装

  1. 在你的 pubspec.yaml 文件中添加以下依赖:

    dependencies:
      time_slot: any
    
  2. 使用你的 IDE 的 GUI 或命令行运行以下命令来获取包:

    $ pub get
    
  3. 在你的应用中导入 time_slot.dart 文件:

    import 'package:time_slot/time_slot.dart';
    

功能

  • 创建具有给定时间间隔的时间段
  • 创建具有给定日期时间列表的时间段
  • 获取时间的时段名称
  • 支持多选
  • 支持不同的显示选项

使用

DayPartController

DayPartController 用于获取时间的时段名称。

DayPartController dayPartController = DayPartController();

获取时间的时段

DayParts dayPart = dayPartController.getDayPartOfTime(
  time: DateTime(2023, 1, 1, 10, 30),
); // DayParts.morning

获取时段名称

String dayPartName = dayPartController.getDayPartName(dayPart: dayPart);
// morning

TimesSlotGridViewFromInterval

用于从给定的时间间隔构建时间段网格视图。例如,从上午 10:00 到晚上 10:00 每小时一个时间段。

TimesSlotGridViewFromInterval(
  locale: "en",
  initTime: selectTime,
  crossAxisCount: 4,
  timeSlotInterval: const TimeSlotInterval(
    start: TimeOfDay(hour: 10, minute: 00),
    end: TimeOfDay(hour: 22, minute: 0),
    interval: Duration(hours: 1, minutes: 0),
  ),
  onChange: (value) {
    setState(() {
      selectTime = value;
    });
  },
)

支持阿拉伯语:

TimesSlotGridViewFromInterval(
  locale: "ar",
  initTime: selectTime,
  crossAxisCount: 4,
  timeSlotInterval: const TimeSlotInterval(
    start: TimeOfDay(hour: 10, minute: 00),
    end: TimeOfDay(hour: 22, minute: 0),
    interval: Duration(hours: 1, minutes: 0),
  ),
  onChange: (value) {
    setState(() {
      selectTime = value;
    });
  },
)

TimesSlotGridViewFromList

用于从给定的日期时间列表构建时间段网格视图。

TimesSlotGridViewFromList(
  locale: "en",
  initTime: selectTime,
  crossAxisCount: 4,
  listDates: [
    DateTime(2023, 1, 1, 10, 30),
    DateTime(2023, 1, 1, 11, 30),
    DateTime(2023, 1, 1, 12, 30),
    DateTime(2023, 1, 1, 13, 30),
    DateTime(2023, 1, 1, 14, 30),
    DateTime(2023, 1, 1, 15, 30)
  ],
  onChange: (value) {
    setState(() {
      selectTime = value;
    });
  },
)

支持阿拉伯语:

TimesSlotGridViewFromList(
  locale: "ar",
  initTime: selectTime,
  crossAxisCount: 4,
  listDates: [
    DateTime(2023, 1, 1, 10, 30),
    DateTime(2023, 1, 1, 11, 30),
    DateTime(2023, 1, 1, 12, 30),
    DateTime(2023, 1, 1, 13, 30),
    DateTime(2023, 1, 1, 14, 30),
    DateTime(2023, 1, 1, 15, 30)
  ],
  onChange: (value) {
    setState(() {
      selectTime = value;
    });
  },
)

示例代码

以下是一个完整的示例代码,展示了如何在 Flutter 应用中使用 time_slot 插件:

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:intl/intl.dart';
import 'package:time_slot/time_slot.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  initializeDateFormatting('ar', '').then((value) => null);
  initializeDateFormatting('en', '').then((value) => null);

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Time Slot Package'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<DateTime> selectTime = [];

  DayPartController dayPartController = DayPartController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ListTile(
                title: const Text("DayPart of Time"),
                subtitle: Text(
                  DateFormat.jm().format(
                    DateTime(2023, 1, 1, 10, 30),
                  ),
                ),
                trailing: Text(dayPartController.getDayPartName(
                  dayPart: dayPartController.getDayPartOfTime(
                    time: DateTime(2023, 1, 1, 10, 30),
                  )!,
                )),
              ),
              ListTile(
                title: const Text("DayPart of Time"),
                subtitle: Text(
                  DateFormat.jm().format(
                    DateTime(2023, 1, 1, 13, 30),
                  ),
                ),
                trailing: Text(
                  dayPartController.getDayPartName(
                    dayPart: dayPartController.getDayPartOfTime(
                      time: DateTime(2023, 1, 1, 13, 30),
                    )!,
                  ),
                ),
              ),
              ListTile(
                title: const Text("DayPart of Time"),
                subtitle: Text(
                  DateFormat.jm().format(
                    DateTime(2023, 1, 1, 18, 30),
                  ),
                ),
                trailing: Text(
                  dayPartController.getDayPartName(
                    dayPart: dayPartController.getDayPartOfTime(
                      time: DateTime(2023, 1, 1, 18, 30),
                    )!,
                  ),
                ),
              ),
              ListTile(
                title: const Text("DayPart of Time"),
                subtitle: Text(
                  DateFormat.jm().format(
                    DateTime(2023, 1, 1, 23, 30),
                  ),
                ),
                trailing: Text(
                  dayPartController.getDayPartName(
                    dayPart: dayPartController.getDayPartOfTime(
                      time: DateTime(2023, 1, 1, 23, 30),
                    )!,
                  ),
                ),
              ),
              const Divider(),
              const Text(
                  "times slot from interval (10:00 AM to 10:00 PM) every hour"),
              const Divider(),
              const Text("-------------- EN --------------"),
              TimesSlotGridViewFromInterval(
                locale: "en",
                initTime: selectTime,
                crossAxisCount: 4,
                multiSelection: true,
                mainAxisSpacing: 10,
                borderRadius: BorderRadius.circular(12),
                timeSlotInterval: const TimeSlotInterval(
                  start: TimeOfDay(hour: 10, minute: 00),
                  end: TimeOfDay(hour: 22, minute: 0),
                  interval: Duration(hours: 1, minutes: 0),
                ),
                displayType: DisplayType.groupingWitoutDisplayDayPart,
                disabledTimeSlots: [
                  DateTime(DateTime.now().year, DateTime.now().month,
                      DateTime.now().day, 14)
                ],
                onChange: (value) {
                  setState(() {
                    selectTime = value;
                  });
                },
              ),
              const Text("-------------- AR --------------"),
              TimesSlotGridViewFromInterval(
                locale: "ar",
                initTime: selectTime,
                crossAxisCount: 4,
                timeSlotInterval: const TimeSlotInterval(
                  start: TimeOfDay(hour: 10, minute: 00),
                  end: TimeOfDay(hour: 22, minute: 0),
                  interval: Duration(hours: 1, minutes: 0),
                ),
                onChange: (value) {
                  setState(() {
                    selectTime = value;
                  });
                },
              ),
              const Divider(),
              const Text("times slot from list"),
              const Divider(),
              const Text("-------------- EN --------------"),
              TimesSlotGridViewFromList(
                locale: "en",
                initTime: selectTime,
                crossAxisCount: 4,
                listDates: [
                  DateTime(2023, 1, 1, 10, 30),
                  DateTime(2023, 1, 1, 11, 30),
                  DateTime(2023, 1, 1, 12, 30),
                  DateTime(2023, 1, 1, 13, 30),
                  DateTime(2023, 1, 1, 14, 30),
                  DateTime(2023, 1, 1, 15, 30)
                ],
                onChange: (value) {
                  setState(() {
                    selectTime = value;
                  });
                },
              ),
              const Text("-------------- AR --------------"),
              TimesSlotGridViewFromList(
                locale: "ar",
                initTime: selectTime,
                crossAxisCount: 4,
                listDates: [
                  DateTime(2023, 1, 1, 10, 30),
                  DateTime(2023, 1, 1, 11, 30),
                  DateTime(2023, 1, 1, 12, 30),
                  DateTime(2023, 1, 1, 13, 30),
                  DateTime(2023, 1, 1, 14, 30),
                  DateTime(2023, 1, 1, 15, 30)
                ],
                onChange: (value) {
                  setState(() {
                    selectTime = value;
                  });
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

通过以上代码,你可以看到如何使用 time_slot 插件来创建时间段选择器,并获取时间的时段名称。希望这些信息对你有帮助!


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

1 回复

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


当然,关于Flutter中的time_slot插件(假设这里指的是一个用于选择时间段的插件,尽管这不是Flutter官方库中的一个标准组件,但许多社区插件提供了类似功能),下面是一个基本的示例代码,展示如何使用一个假设的time_slot插件来选择时间段。

首先,确保你的pubspec.yaml文件中已经添加了该插件的依赖(注意,实际的插件名称可能会有所不同,这里假设为time_slot):

dependencies:
  flutter:
    sdk: flutter
  time_slot: ^x.y.z  # 替换为实际的版本号

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

接下来,在你的Flutter应用中,你可以这样使用time_slot插件:

import 'package:flutter/material.dart';
import 'package:time_slot/time_slot.dart';  // 假设这是插件的导入路径

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

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

class TimeSlotPickerScreen extends StatefulWidget {
  @override
  _TimeSlotPickerScreenState createState() => _TimeSlotPickerScreenState();
}

class _TimeSlotPickerScreenState extends State<TimeSlotPickerScreen> {
  TimeSlot? selectedTimeSlot;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Slot Picker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedTimeSlot == null
                  ? 'No time slot selected'
                  : 'Selected Time Slot: ${selectedTimeSlot!.startTime.toLocal()} - ${selectedTimeSlot!.endTime.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 打开时间选择对话框
                showModalBottomSheet<void>(
                  context: context,
                  builder: (BuildContext context) {
                    return TimeSlotPicker(
                      initialTimeSlot: selectedTimeSlot,
                      onChanged: (TimeSlot? newTimeSlot) {
                        setState(() {
                          selectedTimeSlot = newTimeSlot;
                        });
                      },
                      onSubmit: (TimeSlot? confirmedTimeSlot) {
                        setState(() {
                          selectedTimeSlot = confirmedTimeSlot;
                        });
                        Navigator.of(context).pop();
                      },
                    );
                  },
                );
              },
              child: Text('Select Time Slot'),
            ),
          ],
        ),
      ),
    );
  }
}

// 假设TimeSlot类如下(实际插件可能会有所不同)
class TimeSlot {
  DateTime startTime;
  DateTime endTime;

  TimeSlot({required this.startTime, required this.endTime});
}

注意

  1. 上述代码中的TimeSlotPickerTimeSlot类是基于假设的,实际插件可能提供不同的API和类。因此,你需要参考插件的官方文档来调整代码。
  2. showModalBottomSheet用于展示一个模态的底部表单,其中包含时间选择逻辑。在实际应用中,你可能需要自定义时间选择器的UI和行为。
  3. setState用于更新UI状态,当选择的时间段改变时刷新界面。

确保查阅你使用的具体time_slot插件的文档,因为不同的插件可能有不同的API和配置选项。上述代码提供了一个基本的框架,你可以根据需要进行调整和扩展。

回到顶部