在Flutter中,可以通过使用CupertinoTimerPicker和showModalBottomSheet来实现从CupertinoTimerPicker中返回数据的功能。下面是一个完整的示例代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter CupertinoTimerPicker'),
),
body: Center(
child: RaisedButton(
child: Text('Open Timer Picker'),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return Container(
height: MediaQuery.of(context).copyWith().size.height / 3,
child: CupertinoTimerPicker(
mode: CupertinoTimerPickerMode.hms,
onTimerDurationChanged: (Duration duration) {
Navigator.pop(context, duration);
},
),
);
},
);
},
),
),
);
}
}
在这个示例中,我们创建了一个HomePage,其中包含一个按钮,点击按钮后会打开一个底部弹出框,其中包含了一个CupertinoTimerPicker。当用户在CupertinoTimerPicker中选择完时间后,点击确定按钮,底部弹出框会关闭,并将选择的时间作为返回值传递回去。
要注意的是,我们使用了showModalBottomSheet来显示底部弹出框,并在CupertinoTimerPicker的onTimerDurationChanged回调中使用Navigator.pop来关闭底部弹出框并返回数据。
这是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!
领取专属 10元无门槛券
手把手带您无忧上云