Flutter时间表视图插件timetable_view的使用
Flutter时间表视图插件timetable_view的使用
特性
- 零安全
图像
视频录制
安装
https://pub.dev/packages/flutter_timetable_view#-installing-tab-
使用
基础用法
import 'package:flutter/material.dart';
import 'package:timetable_view/timetable_view.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: TimetableView(
laneEventsList: [
LaneEvents(
lane: Lane(
name: 'Track A',
),
events: [
TableEvent(
title: 'An event 1',
startTime: TableEventTime(hour: 10, minute: 0),
endTime: TableEventTime(hour: 11, minute: 20),
),
]
),
],
),
);
}
}
自定义
import 'package:flutter/material.dart';
import 'package:timetable_view/timetable_view.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter TimeTable View Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Timetable View Demo'),
),
body: TimetableView(
laneEventsList: _buildLaneEvents(),
onEventTap: onEventTapCallBack,
timetableStyle: TimetableStyle(),
onEmptySlotTap: onTimeSlotTappedCallBack,
),
);
}
List<LaneEvents> _buildLaneEvents() {
return [
LaneEvents(
lane: Lane(name: 'Track A', laneIndex: 1),
events: [
TableEvent(
title: 'An event 1',
eventId: 11,
startTime: TableEventTime(hour: 8, minute: 0),
endTime: TableEventTime(hour: 10, minute: 0),
laneIndex: 1,
),
TableEvent(
eventId: 12,
title: 'An event 2',
laneIndex: 1,
startTime: TableEventTime(hour: 12, minute: 0),
endTime: TableEventTime(hour: 13, minute: 20),
),
],
),
LaneEvents(
lane: Lane(name: 'Track B', laneIndex: 2),
events: [
TableEvent(
title: 'An event 3',
laneIndex: 2,
eventId: 21,
startTime: TableEventTime(hour: 10, minute: 10),
endTime: TableEventTime(hour: 11, minute: 45),
),
],
),
];
}
void onEventTapCallBack(TableEvent event) {
print(
"Event Clicked!! LaneIndex ${event.laneIndex} Title: ${event.title} StartHour: ${event.startTime.hour} EndHour: ${event.endTime.hour}");
}
void onTimeSlotTappedCallBack(
int laneIndex, TableEventTime start, TableEventTime end) {
print(
"Empty Slot Clicked !! LaneIndex: $laneIndex StartHour: ${start.hour} EndHour: ${end.hour}");
}
}
信息
使用案例可以在 这里 查看。
贡献
- Fork 项目
- 创建新分支 (
git checkout -b new_feature_branch
) - 提交更改 (
git commit -am 'Add some feature'
) - 推送到分支 (
git push origin new_feature_branch
) - 创建新的Pull Request
许可证
MIT License
Copyright (c) 2020 Kazuki Yamaguchi
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
更多关于Flutter时间表视图插件timetable_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter时间表视图插件timetable_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter中使用timetable_view
插件的一个简单示例。这个插件允许你创建一个时间表视图,非常适合用于展示课程表、会议安排等场景。
首先,确保你的Flutter项目已经添加了timetable_view
依赖。你可以在pubspec.yaml
文件中添加如下依赖:
dependencies:
flutter:
sdk: flutter
timetable_view: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get
来安装依赖。
接下来是一个简单的代码示例,展示如何使用timetable_view
插件来创建一个时间表视图:
import 'package:flutter/material.dart';
import 'package:timetable_view/timetable_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Timetable View Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 示例事件数据
final List<TimetableEvent> events = [
TimetableEvent(
id: '1',
title: '数学课',
startTime: DateTime(2023, 10, 10, 9, 0),
endTime: DateTime(2023, 10, 10, 10, 0),
color: Colors.blue,
),
TimetableEvent(
id: '2',
title: '英语课',
startTime: DateTime(2023, 10, 10, 10, 30),
endTime: DateTime(2023, 10, 10, 12, 0),
color: Colors.red,
),
// 添加更多事件...
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('时间表视图示例'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TimetableView(
events: events,
startHour: 8,
endHour: 18,
interval: 30, // 30分钟间隔
eventHeight: 50,
headerBuilder: (context, hour) {
return Text(
hour.toString().padStart(2, '0') + ':00',
style: TextStyle(fontSize: 16),
);
},
eventBuilder: (context, event) {
return Card(
color: event.color,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
event.title,
style: TextStyle(color: Colors.white),
),
),
);
},
),
),
);
}
}
// 定义事件模型
class TimetableEvent {
final String id;
final String title;
final DateTime startTime;
final DateTime endTime;
final Color color;
TimetableEvent({
required this.id,
required this.title,
required this.startTime,
required this.endTime,
required this.color,
});
}
在这个示例中,我们定义了一个TimetableEvent
类来表示时间表中的事件。然后在MyHomePage
中,我们创建了一些示例事件,并使用TimetableView
小部件来显示它们。
TimetableView
小部件的主要参数包括:
events
:事件列表。startHour
和endHour
:时间表开始和结束的小时。interval
:时间间隔(以分钟为单位)。eventHeight
:每个事件的高度。headerBuilder
:用于构建时间表头部的函数。eventBuilder
:用于构建事件的函数。
你可以根据自己的需求调整这些参数和函数,以创建符合你要求的时间表视图。