Flutter如何实现滑动选择器

在Flutter中，如何实现类似iOS的滑动选择器（Picker）效果？需要支持水平滑动选择数值或选项，并能自定义样式（如文字大小、颜色等）。目前试过CupertinoPicker但只能垂直滑动，是否有现成的插件或自定义实现方案？最好能提供简单的代码示例或实现思路。

2 回复

Flutter中可通过CupertinoPicker或ListWheelScrollView实现滑动选择器。前者提供iOS风格，后者为Material风格。需设置itemExtent和onSelectedItemChanged回调处理选择事件。

更多关于Flutter如何实现滑动选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下方式实现滑动选择器：

1. 使用第三方库（推荐）

最常用的是flutter_cupertino_date_picker和flutter_picker：

dependencies:
  flutter_picker: ^2.1.1

import 'package:flutter_picker/flutter_picker.dart';

// 基础选择器
Picker(
  adapter: PickerDataAdapter<String>(pickerdata: [
    ['选项1', '选项2', '选项3', '选项4']
  ]),
  title: Text("请选择"),
  selectedTextStyle: TextStyle(color: Colors.blue),
  onConfirm: (Picker picker, List<int> value) {
    print(value.toString());
    print(picker.getSelectedValues());
  },
).showDialog(context);

2. 使用CupertinoPicker（iOS风格）

import 'package:flutter/cupertino.dart';

CupertinoPicker(
  itemExtent: 32.0,
  onSelectedItemChanged: (int index) {
    print('选中了第$index项');
  },
  children: List<Widget>.generate(10, (int index) {
    return Center(
      child: Text('选项 $index'),
    );
  }),
)

3. 使用ListWheelScrollView

ListWheelScrollView(
  itemExtent: 50,
  children: List<Widget>.generate(20, (index) {
    return Container(
      alignment: Alignment.center,
      child: Text('项目 $index'),
    );
  }),
  onSelectedItemChanged: (index) {
    print('选中: $index');
  },
)

4. 自定义滑动选择器

class CustomPicker extends StatefulWidget {
  @override
  _CustomPickerState createState() => _CustomPickerState();
}

class _CustomPickerState extends State<CustomPicker> {
  final FixedExtentScrollController _controller = FixedExtentScrollController();
  int _selectedIndex = 0;
  List<String> items = ['选项A', '选项B', '选项C', '选项D', '选项E'];

  @override
  Widget build(BuildContext context) {
    return ListWheelScrollView.useDelegate(
      controller: _controller,
      itemExtent: 50,
      perspective: 0.005,
      diameterRatio: 1.5,
      onSelectedItemChanged: (index) {
        setState(() {
          _selectedIndex = index;
        });
      },
      childDelegate: ListWheelChildBuilderDelegate(
        builder: (context, index) {
          return Container(
            alignment: Alignment.center,
            child: Text(
              items[index],
              style: TextStyle(
                fontSize: 20,
                color: index == _selectedIndex ? Colors.blue : Colors.grey,
              ),
            ),
          );
        },
        childCount: items.length,
      ),
    );
  }
}

主要参数说明：

  • itemExtent: 每个项目的高度
  • diameterRatio: 选择器直径与视口高度的比例
  • perspective: 3D透视效果
  • onSelectedItemChanged: 选择变化回调

选择哪种方式取决于你的需求：第三方库功能最全，CupertinoPicker适合iOS风格，ListWheelScrollView适合自定义需求。

回到顶部