flutter实现ios滚轴滚动效果(滚轮选择器)的控件CupertinoPicker

原创已于 2025-05-23 13:04:36 修改 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2025-05-23 13:02:00 首次发布

在这里插入图片描述

import 'package:flutter/cupertino.dart';

class TestPicker extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TestPickerState();
  }

}

class _TestPickerState extends State<TestPicker>{
  int selectedItem = 0;

  final List<String> items = ['苹果', '香蕉', '橙子', '草莓','苹果', '香蕉', '橙子', '草莓','苹果', '香蕉', '橙子', '草莓','苹果', '香蕉', '橙子', '草莓','苹果', '香蕉', '橙子', '草莓','苹果', '香蕉', '橙子', '草莓'];

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('CupertinoPicker 示例'),
      ),
      child: Center(
        child: CupertinoPicker(
          itemExtent: 32.0,
          onSelectedItemChanged: (int index) {
            setState(() {
              selectedItem = index;
            });
          },
          children: items.map((item) => Text(item)).toList(),
        ),
      ),
    );
  }
}