vertical_picker

vertical_picker 是一个 flutter 包，你可以将其用作项目选择器。用户可以使用此包在像带滚动的列这样的垂直列表中选择项目。

入门

首先，你需要像这样导入它

import 'package:vertical_picker/vertical_picker.dart';

用法

你可以像其他小部件一样使用 VerticalPicker 作为小部件。例如，你可以将此小部件作为 SizedBox 或其他小部件的子项。（我建议将其用作 SizedBox、Container… 等小部件的子项）

SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: VerticalPicker(
          // give height for eacch item
          itemHeight: MediaQuery.of(context).size.height / 15,

          // create list of text for items
          items: List.generate(
              10,
              (index) => Center(
                    child: Text(index.toString()),
                  )),

          // empty void for item selected
          onSelectedChanged: (indexSelected) {},
        ),
      ),

可选参数

如果使用带有默认可选参数的 VerticalPicker，你可能会得到类似这样的一个小部件

左边距和右边距

你可以使用这两个参数来控制边框的大小

// margin for border
leftMargin: 150,
rightMargin: 150,

这将为你提供一个类似这样的垂直选择器（边框颜色已更改）

边框颜色

你可以指定边框颜色

// give color to border
borderColor: Colors.red,

这将为你提供一个类似这样的垂直选择器

循环

你可以通过将 loop 设置为 true 来循环垂直选择器

loop = true;

如果将 loop 设置为 true，你将看到类似这样的垂直选择器

为 vertical picker 的项目使用其他小部件

使用小部件作为项目没有限制。你可以使用 Text、Icon、Image 等。

// create list of text for items
items: List.generate( 10,(index) => Icon(Icons.flutter_dash)),

一些重要提示

? 你必须将 itemHeight 参数设置得比你的项目长一点，以便项目能够最佳对齐

? 如果将 Text 用作项目，最好将 Text 放在 Center 的子项中，这样 Text 就会位于垂直选择器中可选择项的中心

GitHub

查看 Github