当前位置：首页 > news >正文

Flutter---CupertinoPicker滚动选择器

news 2025/10/25 7:13:23

效果图

概念：CupertinoPicker 是 Flutter 框架中非常核心的一个滚动选择器组件（iOS 风格的滚动列表选择控件），广泛用于 iOS 风格的选择界面（比如选择日期、时间、选项等）。

特点：

支持滚轮滑动选择（类似 iPhone 设置里的时间/日期选择器）
样式自动带有 惯性滚动、回弹效果、居中高亮
可自定义内容（不限于文字）

它有好几个参数，可以一个一个去试试，看效果

实现代码

  void showPickerDialog() {int selectedIndex = 0;List<String> options = ['广州', '惠州', '深圳', '茂名', '东莞',"韶关"];final controller = FixedExtentScrollController(initialItem: 2);//初始选中项为深圳showDialog(context: context,builder: (context) {return AlertDialog(title: Text('请选择'),content: SizedBox(height: 200,child: CupertinoPicker(itemExtent: 40, //每个选项的高度//diameterRatio: 1.5, // 默认值 1.1，值越大透视效果越小(滑动效果)//magnification: 1, // 中间选项的放大倍数（放大选中的文字）//squeeze: 0.8, // 默认值 1.45，值越小选项间距越大//useMagnifier: true, // 是否使用放大镜效果(好像肉眼看不出什么效果)scrollController: controller,//控制初始选中项onSelectedItemChanged: (index) { //在滚动结束后触发selectedIndex = index;},children: options.map((option) {return Center(child: Text(option));}).toList(),//selectionOverlay: null,// 移除选择覆盖层),),actions: [TextButton(onPressed: () => Navigator.pop(context),child: Text('取消'),),TextButton(onPressed: () {print('选择了: ${options[selectedIndex]}');Navigator.pop(context);},child: Text('确定'),),],);},);}

代码实例

home_page.dart


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_flutter/person_information_page.dart';class HomePage extends StatefulWidget{const HomePage({super.key});@overrideState<StatefulWidget> createState() => _HomePageState();}class _HomePageState extends State<HomePage> {@overrideWidget build(BuildContext context) {return Scaffold(//2.构建UIbody: Container(height: double.infinity,//覆盖高width: double.infinity,//覆盖宽padding: const EdgeInsets.symmetric(vertical: 10,horizontal:10),//边内边距//主页背景颜色上下渐变decoration: const BoxDecoration(gradient: LinearGradient(begin: Alignment.topCenter,end: Alignment.centerRight,colors: [Colors.blue,Colors.white,],),),child: GestureDetector(onTap:showPickerDialog ,//设置按钮的点击事件child: Column(children: [SizedBox(height: 100,),//按钮Container(//按钮大小height: 50,width: 400,//按钮的样式decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20),),child: Center(child: Text("CupertinoPicker滚动选择组件"),)),SizedBox(height: 20,),],))),);}void showPickerDialog() {int selectedIndex = 0;List<String> options = ['广州', '惠州', '深圳', '茂名', '东莞',"韶关"];final controller = FixedExtentScrollController(initialItem: 2);//初始选中项为深圳showDialog(context: context,builder: (context) {return AlertDialog(title: Text('请选择'),content: SizedBox(height: 200,child: CupertinoPicker(itemExtent: 40, //每个选项的高度//diameterRatio: 1.5, // 默认值 1.1，值越大透视效果越小(滑动效果)//magnification: 1, // 中间选项的放大倍数（放大选中的文字）//squeeze: 0.8, // 默认值 1.45，值越小选项间距越大//useMagnifier: true, // 是否使用放大镜效果(好像肉眼看不出什么效果)scrollController: controller,//控制初始选中项onSelectedItemChanged: (index) { //在滚动结束后触发selectedIndex = index;},children: options.map((option) {return Center(child: Text(option));}).toList(),//selectionOverlay: null,// 移除选择覆盖层),),actions: [TextButton(onPressed: () => Navigator.pop(context),child: Text('取消'),),TextButton(onPressed: () {print('选择了: ${options[selectedIndex]}');Navigator.pop(context);},child: Text('确定'),),],);},);}}

查看全文

http://www.dtcms.com/a/523763.html