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