Flutter滚动选择器插件scroll_picker的使用

Flutter滚动选择器插件scroll_picker的使用

scroll_picker 是一个帮助从字符串数组或列表中选择选项的插件。它在你的视图顶部显示一个轮盘滚动视图，类似于模态窗口。当前选择项会以光标的形式显示。通过点击“确认”按钮或直接点击所需项目来选择新选项。所选项目通过回调函数返回。

特性

• 易于实现：从字符串列表中选择一个项目。
• 支持多行项目：默认为5行，也可以选择7行或9行。
• 包含一个函数：从十六进制字符串（如#F0605Ff0）返回Color.fromRGBO颜色值。
• YouTube链接：视频演示

开始使用

在pubspec.yaml文件中添加：

flutter pub add scroll_picker

导入包：

import 'package:scroll_picker/scroll_picker.dart';

使用步骤

1. 声明本地变量：

   List<String> options = ['Apple', 'Kiwi', 'Tomato', 'Pear'];
   String? currentOption;
   

2. 创建回调函数：

   void callbackString(val) {
     setState(() {
       currentOption = val;
     });
   }
   

3. 初始化当前选项：

   [@override](/user/override)
   void initState() {
     setState(() {
       currentOption = currentOption ?? options[0];
     });
     super.initState();
   }
   

4. 使用ScrollPicker组件：

   Column(
     children: [
       ScrollPicker(
         dataArray: options,
         currentSelection: currentOption!,
         fontSizeList: 20,
         fontSizeTitle: 18,
         callback: callbackString,
       ),
     ],
   )
   

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用scroll_picker插件：

import 'package:flutter/material.dart';
import 'package:scroll_picker/scroll_picker.dart';

void main() => runApp(const ScrollPickerExample());

class ScrollPickerExample extends StatelessWidget {
  const ScrollPickerExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ScrollPickerMain(),
    );
  }
}

class ScrollPickerMain extends StatefulWidget {
  const ScrollPickerMain({super.key});

  [@override](/user/override)
  State<ScrollPickerMain> createState() => _ScrollPickerMainState();
}

class _ScrollPickerMainState extends State<ScrollPickerMain> {
  // 水果选择器示例
  List<String> options = ['Apple', 'Kiwi', 'Blueberry', 'Mango', 'Orange', 'Pear'];
  String? currOption;

  void callbackOption(value) {
    setState(() {
      currOption = value;
    });
  }

  // 饮料选择器示例
  List<String> drinks = ['pick drink', 'Coke', 'Diet Coke', 'Pepsi', 'Dr Pepper', 'Sprite', 'Pear'];
  String? currentDrink;

  void callbackDrink(value) {
    setState(() {
      currentDrink = value;
    });
  }

  [@override](/user/override)
  void initState() {
    setState(() {
      currOption = currOption ?? options[0];
      currentDrink = currentDrink ?? drinks[0];
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scroll Picker, String list')),
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 50),

            // 水果选择器
            Container(
              padding: const EdgeInsets.all(5),
              child: ScrollPicker(
                dataArray: options,
                currentSelection: currOption!,
                fontSizeList: 20,
                fontSizeTitle: 18,
                callback: callbackOption,
              ),
            ),

            const SizedBox(height: 50),

            // 饮料选择器
            Container(
              decoration: BoxDecoration(
                color: stringToRGBO('#106070f0'),
                borderRadius: BorderRadius.circular(5),
              ),
              padding: const EdgeInsets.all(5),
              child: ScrollPicker(
                dataArray: drinks,
                currentSelection: currentDrink!,
                fontSizeList: 20,
                fontSizeTitle: 18,
                callback: callbackDrink,
                colorTextDisplay: '#FFFFFFff',
                scrollLines: 7,
              ),
            ),
          ],
        ),
      ),
    );
  }
}