Flutter垂直选择器插件vertical_picker的使用

vertical_picker 是一个Flutter包，可以用于实现垂直列表项选择器。用户可以通过滚动垂直列表来选择项目。

开始使用

首先，需要在你的Flutter项目中导入这个包：

import 'package:vertical_picker/vertical_picker.dart';

使用方法

你可以像使用其他Widget一样使用 VerticalPicker。例如，你可以将其作为 SizedBox 或其他Widget的子组件（建议将其嵌套在 SizedBox、Container 等组件中）：

SizedBox(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  child: VerticalPicker(
    // 设置每个项目的高度
    itemHeight: MediaQuery.of(context).size.height / 15,

    // 创建项目列表
    items: List.generate(
      10,
      (index) => Center(
        child: Text(index.toString()),
      ),
    ),

    // 当项目被选中时的回调函数
    onSelectedChanged: (indexSelected) {},
  ),
),

可选参数

左边距和右边距

你可以通过 leftMargin 和 rightMargin 参数控制边界大小：

SizedBox(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  child: VerticalPicker(
    itemHeight: MediaQuery.of(context).size.height / 15,
    leftMargin: 150,
    rightMargin: 150,
    items: List.generate(
      10,
      (index) => Center(
        child: Text(index.toString()),
      ),
    ),
    onSelectedChanged: (indexSelected) {},
    borderColor: Colors.red,
    borderThickness: 3,
  ),
),

边框颜色

你还可以指定边框的颜色：

borderColor: Colors.red,

循环模式

设置 loop 参数为 true 来启用循环模式：

loop: true,

使用其他小部件作为项目

没有限制必须使用哪种小部件作为项目，你可以使用 Text、Icon、Image 等：

items: List.generate(
  10,
  (index) => Icon(Icons.flutter_dash),
),

一些重要提示

• 必须将 itemHeight 参数设置得比实际项目稍大一点，以确保项目的最佳对齐。
• 如果使用 Text 作为项目，最好将 Text 放在 Center 的子组件中，以便文本在可选项目中居中显示。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 VerticalPicker：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Vertical Picker"),
      ),
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: VerticalPicker(
          itemHeight: MediaQuery.of(context).size.height / 15,
          leftMargin: 150,
          rightMargin: 150,
          items: List.generate(
            10,
            (index) => Center(
              child: Text(index.toString()),
            ),
          ),
          onSelectedChanged: (indexSelected) {
            print('Selected index: $indexSelected');
          },
          borderColor: Colors.red,
          borderThickness: 3,
          loop: true,
        ),
      ),
    );
  }
}

希望这些信息能帮助你在Flutter应用中成功集成和使用 vertical_picker 插件！