2 changed files with 253 additions and 1 deletions
@ -0,0 +1,231 @@ |
|||||
|
import 'package:flutter/cupertino.dart'; |
||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
|
||||
|
class SelectTimerWidget extends StatefulWidget { |
||||
|
final String title; |
||||
|
final int time; |
||||
|
|
||||
|
const SelectTimerWidget(this.title, this.time, {super.key}); |
||||
|
|
||||
|
@override |
||||
|
State<SelectTimerWidget> createState() => _SelectTimerWidgetState(); |
||||
|
} |
||||
|
|
||||
|
class _SelectTimerWidgetState extends State<SelectTimerWidget> { |
||||
|
late FixedExtentScrollController _hourScrollController; |
||||
|
late FixedExtentScrollController _minuteScrollController; |
||||
|
|
||||
|
int _hour = 0; |
||||
|
int _minute = 0; |
||||
|
|
||||
|
@override |
||||
|
void initState() { |
||||
|
super.initState(); |
||||
|
_hour = widget.time ~/ 60; |
||||
|
_minute = widget.time % 60; |
||||
|
_hourScrollController = FixedExtentScrollController(initialItem: _hour); |
||||
|
_minuteScrollController = FixedExtentScrollController(initialItem: _minute); |
||||
|
} |
||||
|
|
||||
|
@override |
||||
|
void dispose() { |
||||
|
super.dispose(); |
||||
|
_hourScrollController.dispose(); |
||||
|
_minuteScrollController.dispose(); |
||||
|
} |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
return Padding( |
||||
|
padding: EdgeInsets.symmetric(horizontal: 12.w), |
||||
|
child: Column( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
children: [ |
||||
|
Container( |
||||
|
padding: EdgeInsets.symmetric(vertical: 10.w), |
||||
|
child: Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||
|
children: [ |
||||
|
Text( |
||||
|
widget.title, |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
color: Colors.black87, |
||||
|
fontWeight: FontWeight.bold, |
||||
|
), |
||||
|
), |
||||
|
GestureDetector( |
||||
|
onTap: () => Get.back(), |
||||
|
child: Container( |
||||
|
width: 26.w, |
||||
|
height: 26.w, |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.white, |
||||
|
borderRadius: BorderRadius.circular(26.r), |
||||
|
), |
||||
|
child: Icon( |
||||
|
Icons.close, |
||||
|
size: 18.w, |
||||
|
color: Colors.grey[400], |
||||
|
), |
||||
|
), |
||||
|
) |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
Divider( |
||||
|
height: 1, |
||||
|
color: Colors.grey[300], |
||||
|
), |
||||
|
SizedBox( |
||||
|
height: 220.w, |
||||
|
child: Row( |
||||
|
children: [ |
||||
|
Expanded( |
||||
|
child: CupertinoPicker.builder( |
||||
|
itemExtent: 40.w, |
||||
|
diameterRatio: 1.1, |
||||
|
squeeze: 1.25, |
||||
|
childCount: 24, |
||||
|
selectionOverlay: _selectionOverlayWidget( |
||||
|
isRadiusLeft: true, |
||||
|
), |
||||
|
scrollController: _hourScrollController, |
||||
|
itemBuilder: (BuildContext context, int index) { |
||||
|
return Container( |
||||
|
padding: EdgeInsets.only(right: 10.w), |
||||
|
alignment: Alignment.centerRight, |
||||
|
child: Text( |
||||
|
'$index时', |
||||
|
style: _hour == index |
||||
|
? TextStyle( |
||||
|
color: const Color(0xFFFF5561), |
||||
|
fontSize: 15.sp, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
) |
||||
|
: TextStyle( |
||||
|
color: const Color(0xFF9D9D9D), |
||||
|
fontSize: 15.sp, |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
}, |
||||
|
onSelectedItemChanged: (int index) { |
||||
|
setState(() { |
||||
|
_hour = index; |
||||
|
}); |
||||
|
}, |
||||
|
), |
||||
|
), |
||||
|
Expanded( |
||||
|
child: CupertinoPicker.builder( |
||||
|
itemExtent: 40.w, |
||||
|
diameterRatio: 1.1, |
||||
|
squeeze: 1.25, |
||||
|
childCount: 60, |
||||
|
selectionOverlay: _selectionOverlayWidget( |
||||
|
isRadiusRight: true, |
||||
|
), |
||||
|
scrollController: _minuteScrollController, |
||||
|
itemBuilder: (BuildContext context, int index) { |
||||
|
return Container( |
||||
|
padding: EdgeInsets.only(left: 10.w), |
||||
|
alignment: Alignment.centerLeft, |
||||
|
child: Text( |
||||
|
'$index分', |
||||
|
style: _minute == index |
||||
|
? TextStyle( |
||||
|
color: const Color(0xFFFF5561), |
||||
|
fontSize: 15.sp, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
) |
||||
|
: TextStyle( |
||||
|
color: const Color(0xFF9D9D9D), |
||||
|
fontSize: 15.sp, |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
}, |
||||
|
onSelectedItemChanged: (int index) { |
||||
|
setState(() { |
||||
|
_minute = index; |
||||
|
}); |
||||
|
}, |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
Padding( |
||||
|
padding: EdgeInsets.only(bottom: 20.w), |
||||
|
child: Row( |
||||
|
children: [ |
||||
|
Expanded( |
||||
|
child: GestureDetector( |
||||
|
onTap: () => Get.back(), |
||||
|
child: Container( |
||||
|
height: 48.w, |
||||
|
alignment: Alignment.center, |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.grey[300], |
||||
|
borderRadius: BorderRadius.circular(12.r), |
||||
|
), |
||||
|
child: Text( |
||||
|
'cancel'.tr, // 取消 |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
color: Colors.black, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
10.horizontalSpace, |
||||
|
Expanded( |
||||
|
child: GestureDetector( |
||||
|
onTap: () { |
||||
|
int time = _hour * 60 + _minute; |
||||
|
Get.back(result: time); |
||||
|
}, |
||||
|
child: Container( |
||||
|
height: 48.w, |
||||
|
alignment: Alignment.center, |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.black, |
||||
|
borderRadius: BorderRadius.circular(12.r), |
||||
|
), |
||||
|
child: Text( |
||||
|
'confirm'.tr, // 确认 |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
Widget _selectionOverlayWidget({ |
||||
|
bool isRadiusLeft = false, |
||||
|
bool isRadiusRight = false, |
||||
|
}) { |
||||
|
return Container( |
||||
|
decoration: BoxDecoration( |
||||
|
color: const Color.fromARGB(45, 255, 85, 97), |
||||
|
borderRadius: BorderRadius.horizontal( |
||||
|
left: isRadiusLeft ? Radius.circular(8.w) : Radius.zero, |
||||
|
right: isRadiusRight ? Radius.circular(8.w) : Radius.zero, |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue