Flutter中如何使用CupertinoPicker组件

在Flutter中，我想使用CupertinoPicker组件来实现iOS风格的滚动选择器，但不太清楚具体该如何实现。能否详细说明一下CupertinoPicker的基本用法，包括如何设置选项列表、处理选中事件以及自定义样式？另外，这个组件和普通的Picker有什么区别，在什么场景下更适合使用CupertinoPicker呢？

2 回复

在Flutter中使用CupertinoPicker组件，首先导入cupertino.dart包。然后使用CupertinoPicker构造函数，设置itemExtent（每项高度）和onSelectedItemChanged回调。通过children属性添加选项，例如Text组件。示例：

CupertinoPicker(
  itemExtent: 32,
  onSelectedItemChanged: (index) {},
  children: [Text('选项1'), Text('选项2')],
)

更多关于Flutter中如何使用CupertinoPicker组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用CupertinoPicker组件可以创建iOS风格的滚轮选择器。以下是基本用法和代码示例：

基本用法：

import 'package:flutter/cupertino.dart';

// 在StatefulWidget中使用
int selectedIndex = 0;
List<String> items = ['选项1', '选项2', '选项3'];

CupertinoPicker(
  itemExtent: 32.0, // 每个选项的高度
  onSelectedItemChanged: (int index) {
    setState(() {
      selectedIndex = index;
    });
  },
  children: items.map((item) => Text(item)).toList(),
)

完整示例：

import 'package:flutter/cupertino.dart';

class MyPicker extends StatefulWidget {
  @override
  _MyPickerState createState() => _MyPickerState();
}

class _MyPickerState extends State<MyPicker> {
  int _selectedIndex = 0;
  final List<String> _items = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];

  @override
  Widget build(BuildContext context) {
    return CupertinoPicker(
      backgroundColor: CupertinoColors.white,
      itemExtent: 40.0,
      scrollController: FixedExtentScrollController(initialItem: _selectedIndex),
      onSelectedItemChanged: (int index) {
        setState(() {
          _selectedIndex = index;
        });
      },
      children: _items.map((item) => Text(item)).toList(),
    );
  }
}

主要属性说明：

  • itemExtent：每个选项的高度（必须设置）
  • onSelectedItemChanged：选择变化回调
  • children：选项子组件列表
  • scrollController：控制初始选中项

注意事项：

  1. 通常需要在CupertinoPageScaffold或CupertinoApp中使用
  2. 建议设置固定高度（如200）
  3. 可配合showCupertinoModalPopup实现底部弹窗选择器

这样就能创建出符合iOS设计规范的滚轮选择器了。

回到顶部