Flutter---CupertinoPicker滚动选择器

效果图

概念：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});

  @override
  State<StatefulWidget> createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {



  @override
  Widget build(BuildContext context) {
    return Scaffold(

      //2.构建UI
      body: 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('确定'),
            ),
          ],
        );
      },
    );
  }

}