Flutter 中的 CupertinoPicker 小部件:全面指南
在Flutter中,CupertinoPicker 是一个用于创建iOS风格的滚轮选择器的小部件。以下是如何使用它的基本指南和示例代码:
- 导入
cupertino_picker
包。 - 创建一个数据源,通常是一个
List
。 - 使用
CupertinoPicker
小部件并设置数据源。
示例代码:
import 'package:flutter/cupertino.dart';
class CupertinoPickerExample extends StatefulWidget {
@override
_CupertinoPickerExampleState createState() => _CupertinoPickerExampleState();
}
class _CupertinoPickerExampleState extends State<CupertinoPickerExample> {
// 数据源
List<String> _items = ['Item 0', 'Item 1', 'Item 2', 'Item 3'];
int _selectedIndex = 0; // 当前选中的索引
// 当选中项改变时调用的回调函数
void _onSelectedItemChanged(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return CupertinoPicker(
itemExtent: 32.0, // 每个条目的高度
onSelectedItemChanged: _onSelectedItemChanged, // 选中项改变时的回调
children: _items.map((String item) {
return Center(
child: Text(item),
);
}).toList(),
);
}
}
在这个例子中,我们创建了一个简单的iOS风格的滚轮选择器,它有四个条目,并在选中的条目改变时更新 _selectedIndex
。itemExtent
属性用于设置每个条目的高度,onSelectedItemChanged
属性用于设置一个回调函数,当用户滚动选择器并选择一个新的条目时,该回调会被调用。
评论已关闭