Flutter时间条展示插件timebar_table的使用
Flutter时间条展示插件timebar_table的使用
一个用于时间数据可视化的Flutter包。通过简单的操作即可创建时间间隔内的条形图。适用于日程安排和事件时间线。
特性
- 基于时间的可视化: 轻松地在时间轴上表示数据，并可调整时间间隔。
- 自定义: 可以自定义时间条、时间间隔等，以适应您的应用风格。
- 灵活的数据呈现: 可同时显示各种数据元素，使时间线更加丰富和信息量更大。
安装
要使用此包，请将其添加到您的pubspec.yaml文件中：
dependencies:
timebar_table: ^0.0.1
然后运行flutter pub get来安装该包。
使用
import 'package:flutter/material.dart';
import 'package:timebar_table/timebar_table.dart';
final DateTime tableStartTime = DateTime(2023, 9, 30, 8, 0); // 开始时间
final DateTime tableEndTime = DateTime(2023, 9, 30, 16, 0); // 结束时间
const Duration timeInterval = Duration(minutes: 30); // 时间间隔
const double intervalWidth = 50.0; // 时间间隔宽度
// 定义数据，其中键是小部件，值是BarData列表
final Map<Widget, List<BarData?>> tableDataMap = {
const Text('Table 1'): [
BarData(
dataDuration: const Duration(minutes: 60),
dataStartTime: DateTime(2023, 9, 30, 9, 0),
dataWidget: Container(
height: double.maxFinite,
decoration: BoxDecoration(
border: Border.all(),
color: Colors.red,
),
child: const Center(
child: Text(
"9am for 60mins",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
),
BarData(
dataDuration: const Duration(minutes: 90),
dataStartTime: DateTime(2023, 9, 30, 11, 0),
dataWidget: Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.blue,
),
child: const Center(
child: Text(
"11am for 90mins",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w200,
),
),
),
),
),
],
const Text('Table 2'): [
BarData(
dataDuration: const Duration(minutes: 120),
dataStartTime: DateTime(2023, 9, 30, 10, 30),
dataWidget: Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 4,
strokeAlign: BorderSide.strokeAlignCenter,
),
borderRadius: BorderRadius.circular(4),
color: Colors.green,
),
child: const Center(
child: Text(
"10am for 120mins",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
),
),
),
),
),
],
const Text('Table 3'): [
BarData(
dataDuration: const Duration(minutes: 60),
dataStartTime: DateTime(2023, 9, 30, 8, 0),
dataWidget: Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 2,
strokeAlign: BorderSide.strokeAlignCenter,
),
borderRadius: BorderRadius.circular(32),
color: Colors.blue,
),
child: const Center(
child: Text(
"8am for 60mins",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w400,
),
),
),
),
),
BarData(
dataDuration: const Duration(minutes: 120),
dataStartTime: DateTime(2023, 9, 30, 11, 30),
dataWidget: Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 4,
strokeAlign: BorderSide.strokeAlignCenter,
),
borderRadius: BorderRadius.circular(6),
color: Colors.red,
),
child: const Center(
child: Text(
"1130am for 120mins",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
),
),
),
),
),
],
const Text('Table 5'): [
BarData(
dataDuration: const Duration(minutes: 120),
dataStartTime: DateTime(2023, 9, 30, 11, 0),
dataWidget: Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 4,
strokeAlign: BorderSide.strokeAlignCenter,
),
borderRadius: BorderRadius.circular(6),
color: Colors.yellow,
),
child: const Center(
child: Text(
"11am for 120mins",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w200,
),
),
),
),
),
BarData(
dataDuration: const Duration(minutes: 60),
dataStartTime: DateTime(2023, 9, 30, 9, 0),
dataWidget: Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 4,
strokeAlign: BorderSide.strokeAlignCenter,
),
borderRadius: BorderRadius.circular(6),
color: Colors.orange,
),
child: const Center(
child: Text(
"9am for 60mins",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w800,
),
),
),
),
),
],
// 添加更多测试数据
];
final Widget emptyDataWidget = Container(
width: intervalWidth,
decoration: BoxDecoration(
border: Border.all(),
color: Colors.red,
),
padding: const EdgeInsets.all(2),
child: Container(
color: Colors.lightGreen,
),
);
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('TimeBarTable Example'),
),
body: TimeBarTable(
tableStartTime: tableStartTime,
tableEndTime: tableEndTime,
timeInterval: timeInterval,
intervalWidth: intervalWidth,
tableDataList: tableDataMap,
emptyDataWidget: emptyDataWidget,
),
),
));
}
更多关于Flutter时间条展示插件timebar_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter时间条展示插件timebar_table的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，关于Flutter时间条展示插件timebar_table的使用，以下是一个简单的代码示例，展示了如何在Flutter应用中集成和使用该插件。请注意，这个示例假设你已经添加了timebar_table到你的pubspec.yaml文件中并运行了flutter pub get。
首先，确保你的pubspec.yaml文件包含以下依赖项：
dependencies:
flutter:
sdk: flutter
timebar_table: ^最新版本号 # 替换为实际的最新版本号
然后，你可以在你的Flutter项目中创建一个页面来使用timebar_table。以下是一个基本的示例：
import 'package:flutter/material.dart';
import 'package:timebar_table/timebar_table.dart'; // 引入timebar_table插件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TimeBar Table Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TimeBarTablePage(),
);
}
}
class TimeBarTablePage extends StatefulWidget {
@override
_TimeBarTablePageState createState() => _TimeBarTablePageState();
}
class _TimeBarTablePageState extends State<TimeBarTablePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TimeBar Table Demo'),
),
body: Center(
child: TimeBarTable(
// 设置时间条的数据源
data: _generateTimeBarData(),
// 设置时间条的配置
config: TimeBarConfig(
start: DateTime(2023, 10, 1, 0, 0), // 开始时间
end: DateTime(2023, 10, 7, 23, 59), // 结束时间
interval: Duration(hours: 1), // 时间间隔
// 其他配置项，如颜色、字体大小等，可以根据需要设置
),
// 设置时间条的样式
style: TimeBarStyle(
barColor: Colors.blue,
textColor: Colors.white,
// 其他样式设置
),
),
),
);
}
// 生成时间条数据的方法
List<TimeBarData> _generateTimeBarData() {
List<TimeBarData> data = [];
// 示例数据：每天有一个事件，从上午9点到下午5点
for (int i = 1; i <= 7; i++) {
DateTime startDate = DateTime(2023, 10, i, 9, 0);
DateTime endDate = DateTime(2023, 10, i, 17, 0);
data.add(TimeBarData(
label: 'Day $i',
start: startDate,
end: endDate,
));
}
return data;
}
}
// TimeBarData类，假设timebar_table插件需要此类作为数据源
class TimeBarData {
final String label;
final DateTime start;
final DateTime end;
TimeBarData({required this.label, required this.start, required this.end});
}
注意：
- 上面的代码示例是基于假设的
TimeBarData类，因为具体的timebar_table插件可能需要特定的数据结构。你需要参考timebar_table的官方文档来确保数据结构的正确性。 TimeBarConfig和TimeBarStyle类的属性也是基于假设，你需要根据timebar_table的实际API来调整这些属性。- 确保你已经正确导入了
timebar_table包，并且已经按照该插件的文档进行了必要的初始化工作。
由于我无法直接访问timebar_table的源代码或官方文档，上述代码可能需要根据实际情况进行调整。建议查阅timebar_table的官方文档和示例代码来获取最准确的使用方法和API信息。
