Flutter高度选择器插件cupertino_height_picker的使用

cupertino_height_picker 是一个无缝的Cupertino风格的高度选择器小部件，支持Flutter应用程序中以厘米（公制）和英尺/英寸（英制）进行高度选择。它为用户提供了灵活性和精度。

特性

• 自动单位转换：在厘米和英尺/英寸之间轻松切换，并实现自动转换。
• 十进制值精度：允许更精确的高度测量。
• Cupertino风格数字选择器：与iOS设计一致的干净直观界面。
• 浅色和深色主题：内置支持浅色和深色主题，适应用户的主题设置。

开始使用

1. 添加依赖

将以下内容添加到您的 pubspec.yaml 文件中：

dependencies:
  cupertino_height_picker: ^1.0.1

2. 安装依赖

通过命令行安装包：

$ flutter pub get

3. 导入库

现在可以在您的 Dart 代码中使用：

import 'package:cupertino_height_picker/cupertino_height_picker.dart';

使用示例

以下是完整的示例代码，演示如何在应用中使用 cupertino_height_picker 插件：

import 'package:cupertino_height_picker/cupertino_height_picker.dart';
import 'package:flutter/cupertino.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: "Cupertino Height Picker Example",
      home: Home(),
    );
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double heightInCm = 150;
  HeightUnit selectedHeightUnit = HeightUnit.cm;
  bool canConvertUnit = true;
  bool showSeparationText = true;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text("Cupertino Height Picker Example"),
      ),
      child: Center(
        child: SizedBox(
          width: 500,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Height: ${heightInCm.toStringAsFixed(1)} cm",
                style: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle,
              ),
              const SizedBox(height: 20),
              CupertinoFormSection(
                children: [
                  CupertinoFormRow(
                    prefix: const Text("Unit Convertible"),
                    child: CupertinoSwitch(
                      onChanged: (val) {
                        setState(() {
                          canConvertUnit = val;
                        });
                      },
                      value: canConvertUnit,
                    ),
                  ),
                  CupertinoFormRow(
                    prefix: const Text("Show Separation Text"),
                    child: CupertinoSwitch(
                      onChanged: (val) {
                        setState(() {
                          showSeparationText = val;
                        });
                      },
                      value: showSeparationText,
                    ),
                  ),
                  CupertinoFormRow(
                    prefix: const Text("Selected Unit"),
                    child: CupertinoSlidingSegmentedControl<HeightUnit>(
                      groupValue: selectedHeightUnit,
                      children: const {
                        HeightUnit.inches: Padding(
                          padding: EdgeInsets.all(8),
                          child: Text("Feet/Inches"),
                        ),
                        HeightUnit.cm: Padding(
                          padding: EdgeInsets.all(8),
                          child: Text("Centimeters"),
                        ),
                      },
                      onValueChanged: (val) {
                        setState(() {
                          selectedHeightUnit = val!;
                        });
                      },
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              CupertinoButton.filled(
                child: const Text("Pick height"),
                onPressed: () async {
                  await showCupertinoHeightPicker(
                    context: context,
                    initialHeight: heightInCm,
                    initialSelectedHeightUnit: selectedHeightUnit,
                    canConvertUnit: canConvertUnit,
                    showSeparationText: showSeparationText,
                    onHeightChanged: (val) {
                      setState(() {
                        heightInCm = val;
                      });
                    },
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

此示例展示了如何创建一个包含高度选择器的应用程序，并允许用户配置是否可以转换单位、是否显示分隔文本以及选择初始单位。点击按钮后，将弹出高度选择器，用户可以选择所需的高度，选择后的高度会更新到界面上。

参数说明

• context：必需参数，用于渲染高度选择器的 BuildContext 对象。
• onHeightChanged：必需参数，当用户滚动选择不同高度时调用的回调函数，返回值为厘米。
• initialHeight：设置打开选择器时的初始高度，默认为 150.0 厘米。
• initialSelectedHeightUnit：指定打开选择器时的默认高度单位，默认为 HeightUnit.inches。
• canConvertUnit：是否允许在公制和英制系统之间转换，默认为 true。
• showSeparationText：是否显示分隔文本，默认为 true。
• modalHeight：模态框的高度，默认为 216.0。
• maxModalWidth：模态框的最大宽度，默认为 null，即全屏宽度。
• modalBackgroundColor：模态框的背景颜色，默认为 null。
• barrierColor：模态框背后的遮罩颜色，默认为 kCupertinoModalBarrierColor。

希望这个指南能帮助您快速上手并使用 cupertino_height_picker 插件！如果有任何问题或需要进一步的帮助，请随时提问。