Flutter数字选择器插件flutter_number_picker的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter数字选择器插件flutter_number_picker的使用

Flutter Number Picker 是一个用于通过加减按钮选择整数或小数的自定义控件。本文将详细介绍如何在你的Flutter项目中集成和使用这个插件。

开始使用

步骤 1: 添加依赖

首先,你需要在项目的 pubspec.yaml 文件中添加 flutter_number_picker 的依赖。你可以选择从 pub.dev 获取最新版本,或者直接从GitHub仓库获取:

选项一:

dependencies:
  flutter:
    sdk: flutter
  flutter_number_picker: <latest_version>

选项二:

dependencies:
  flutter:
    sdk: flutter
  flutter_number_picker:
      git: https://github.com/phuongtinhbien/flutter_number_picker.git

请确保替换 <latest_version> 为实际的最新版本号。

步骤 2: 获取包

运行以下命令来安装新添加的包:

flutter packages get

步骤 3: 导入包

在你的Dart文件顶部导入 flutter_number_picker 包:

import 'package:flutter_number_picker/flutter_number_picker.dart';

现在你已经准备好开始使用 flutter_number_picker 了!

创建 FlutterNumberPicker 小部件

下面是一个简单的示例,展示如何创建并使用 CustomNumberPicker 小部件:

CustomNumberPicker(
    initialValue: 10000,
    maxValue: 1000000,
    minValue: 0,
    step: 10000,
    onValue: (value) {
        print(value.toString());
    },
)

属性说明

  • minValue: [必需] 按钮选择器的最小值。
  • maxValue: [必需] 按钮选择器的最大值。
  • initialValue: [必需] 加载时显示的值。
  • onValue: [必需] 返回当前选中的值。
  • step: 定义每次点击增加或减少的数值,默认值为1。
  • valueTextStyle: 值的文本样式。
  • shape: 选择器的形状边框。
  • customAddButton: 自定义增加按钮的小部件。
  • customMinusButton: 自定义减少按钮的小部件(原文重复了customAddButton)。

使用示例

独立小部件示例

这里提供了一个完整的应用示例,展示了如何作为一个独立小部件使用 CustomNumberPicker

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Number Picker 示例'),
        ),
        body: Center(
          child: Container(
            child: CustomNumberPicker(
              initialValue: 10000,
              maxValue: 1000000,
              minValue: 0,
              step: 10000,
              enable: true,
              onValue: (value) {
                print(value.toString());
              },
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter数字选择器插件flutter_number_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter数字选择器插件flutter_number_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 flutter_number_picker 插件的示例代码。这个插件允许你在 Flutter 应用中实现一个数字选择器。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_number_picker 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_number_picker: ^2.0.0  # 请检查最新版本号

然后运行 flutter pub get 来获取依赖。

接下来,在你的 Dart 文件中,你可以按照以下方式使用 flutter_number_picker

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Number Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NumberPickerDemo(),
    );
  }
}

class NumberPickerDemo extends StatefulWidget {
  @override
  _NumberPickerDemoState createState() => _NumberPickerDemoState();
}

class _NumberPickerDemoState extends State<NumberPickerDemo> {
  int _selectedNumber = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Number Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Number: $_selectedNumber',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 打开数字选择器对话框
                showNumberPickerDialog(context,
                    initialNumber: _selectedNumber,
                    minValue: 0,
                    maxValue: 100,
                    title: 'Select a Number')
                    .then((value) {
                  if (value != null) {
                    setState(() {
                      _selectedNumber = value;
                    });
                  }
                });
              },
              child: Text('Pick a Number'),
            ),
          ],
        ),
      ),
    );
  }
}

// 显示数字选择器对话框的函数
Future<int?> showNumberPickerDialog(
    BuildContext context, {
      required int initialValue,
      required int minValue,
      required int maxValue,
      required String title,
    }) async {
  return showDialog<int>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text(title),
        content: NumberPicker(
          value: initialValue,
          minValue: minValue,
          maxValue: maxValue,
          onChanged: (value) {},
        ),
        actions: <Widget>[
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('Cancel'),
          ),
          TextButton(
            onPressed: () {
              final NumberPickerState? pickerState =
                  context.findAncestorStateOfType<NumberPickerState>();
              if (pickerState != null) {
                Navigator.of(context).pop(pickerState.value);
              }
            },
            child: Text('OK'),
          ),
        ],
      );
    },
  );
}

在这个示例中,我们创建了一个简单的 Flutter 应用,其中包含一个文本显示当前选中的数字和一个按钮用于打开数字选择器对话框。数字选择器对话框使用了 flutter_number_picker 插件,并允许用户选择一个在 0 到 100 之间的数字。

注意:

  1. NumberPicker 小部件本身并不直接提供对话框功能,所以我们使用 showDialog 方法来创建一个自定义对话框。
  2. showNumberPickerDialog 函数封装了对话框的创建逻辑,并返回用户选择的数字。
  3. NumberPickerStateNumberPicker 的状态类,用于访问当前选中的值。

希望这个示例能帮助你理解如何在 Flutter 应用中使用 flutter_number_picker 插件。

回到顶部