在Flutter中自定义水平时间选择器可以通过自定义Widget和使用Flutter提供的相应组件来实现。以下是一种可能的实现方法:
以下是一个简单的示例代码:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class CustomTimePicker extends StatefulWidget {
final DateTime initialTime;
final ValueChanged<DateTime> onTimeChanged;
CustomTimePicker({this.initialTime, this.onTimeChanged});
@override
_CustomTimePickerState createState() => _CustomTimePickerState();
}
class _CustomTimePickerState extends State<CustomTimePicker> {
DateTime selectedTime;
@override
void initState() {
super.initState();
selectedTime = widget.initialTime ?? DateTime.now();
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_left),
onPressed: () {
setState(() {
selectedTime = selectedTime.subtract(Duration(hours: 1));
widget.onTimeChanged(selectedTime);
});
},
),
Text(
selectedTime.hour.toString().padLeft(2, '0') +
":" +
selectedTime.minute.toString().padLeft(2, '0'),
style: TextStyle(fontSize: 20),
),
IconButton(
icon: Icon(Icons.arrow_right),
onPressed: () {
setState(() {
selectedTime = selectedTime.add(Duration(hours: 1));
widget.onTimeChanged(selectedTime);
});
},
),
],
);
}
}
// 使用示例
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom Time Picker'),
),
body: Center(
child: CustomTimePicker(
initialTime: DateTime.now(),
onTimeChanged: (time) {
print(time);
// 在这里可以处理选择的时间
},
),
),
),
);
}
}
void main() {
runApp(MyApp());
}
以上代码中创建了一个名为CustomTimePicker的自定义时间选择器Widget,使用Row将左右箭头按钮和显示时间的Text组合在一起。用户点击箭头按钮时,通过setState更新时间并回调给使用者。
在使用该自定义时间选择器的地方,可以根据需要自定义样式、时间范围和回调处理选择的时间。这只是一个简单示例,你可以根据自己的需求来进行进一步的定制和优化。
请注意,上述示例代码仅供参考,实际实现可能会有所不同,具体取决于你的需求和设计。
领取专属 10元无门槛券
手把手带您无忧上云