Flutter 中的 CupertinoPicker 小部件：全面指南

作者：System 时间：2024年08月23日分类：所有,flutter 字数：1178

这篇文章距离上次修改已过225天，其中的内容可能已经有所变动。

在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 属性用于设置一个回调函数，当用户滚动选择器并选择一个新的条目时，该回调会被调用。

Flutter 中的 CupertinoPicker 小部件：全面指南

评论已关闭

推荐阅读