Flutter选择器插件flutter_spinner_picker的使用

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

Flutter选择器插件flutter_spinner_picker的使用

特性

此小部件允许你在Flutter应用中使用选择器来代替默认的时间选择器。该小部件支持12小时或24小时格式，并且可以自定义间隔模式。

开始使用

首先，在你的 pubspec.yaml 文件中添加最新版本的 flutter_spinner_picker 包，然后运行 flutter pub get。

dependencies:
  flutter_spinner_picker: ^latest_version

使用方法

导入包并开始使用它：

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

在你的应用中使用 FlutterSpinner 小部件：

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime selectedTime = DateTime.now();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(
            widget.title,
            textAlign: TextAlign.center,
          ),
        ),
      ),
      body: Center(
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 FlutterSpinner 小部件
              FlutterSpinner(
                color: Colors.grey,
                fontSize: 26,
                is24Hour: false, // 设置为 true 以启用 24 小时制
                selectedFontColor: Colors.white,
                unselectedFontColor: Colors.white.withOpacity(0.4),
                height: 310,
                width: 200,
                itemHeight: 10,
                itemWidth: 50,
                padding: 20,
                selectedDate: DateTime.now(), // 初始选中时间
                onTimeChange: (date) {
                  setState(() {
                    selectedTime = date;
                  });
                },
                spacing: 10,
              ),
              const SizedBox(height: 20),
              // 显示选中的时间
              Text(selectedTime.toString())
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用flutter_spinner_picker插件的示例代码。这个插件允许你创建一个类似iOS的UIPickerView或Android的Spinner的选择器。

首先，你需要在你的pubspec.yaml文件中添加flutter_spinner_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_spinner_picker: ^x.y.z  # 请将x.y.z替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示了如何使用flutter_spinner_picker来创建一个基本的日期选择器：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Spinner Picker Example'),
        ),
        body: Center(
          child: DatePickerExample(),
        ),
      ),
    );
  }
}

class DatePickerExample extends StatefulWidget {
  @override
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  Picker picker;

  @override
  void initState() {
    super.initState();
    picker = Picker(
      adapter: DatePickerAdapter(
        startYear: 1900,
        endYear: 2100,
      ),
      cols: 3,
      textStyle: TextStyle(color: Colors.black, fontSize: 18),
      onConfirm: (Picker picker, List<int> selectList) {
        // 获取选中的日期
        String year = selectList[0].toString();
        String month = (selectList[1] + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
        String day = selectList[2].toString().padStart(2, '0');
        setState(() {
          // 你可以在这里处理选中的日期，例如更新UI
          print("选中的日期: $year-$month-$day");
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Picker(
          data: picker.data,
          config: picker.config,
          onSelected: picker.onSelected,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            picker.showPicker(context);
          },
          child: Text('选择日期'),
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个DatePickerExample组件，它使用flutter_spinner_picker的Picker和DatePickerAdapter来创建一个日期选择器。当用户点击按钮时，会弹出选择器，并且当用户确认选择时，会打印出选中的日期。

注意：

  1. DatePickerAdapter是flutter_spinner_picker提供的一个适配器，用于生成日期数据。
  2. Picker组件用于显示选择器的UI，并处理用户的选择。
  3. onConfirm回调会在用户确认选择时触发，你可以在这个回调中处理选中的值。

确保你已经按照步骤正确添加了依赖，并运行应用以查看效果。

回到顶部