Flutter日期选择器插件dh_picker的使用

Flutter日期选择器插件dh_picker的使用

dh_picker 是一个功能强大的选择器控件库，支持数字选择、字符串选择和日期选择等功能。在您的项目中添加以下依赖：

dependencies:
  dh_picker: ^1.0.0

数字选择器 (num_picker)

数字选择器允许用户从一组数字中进行选择。

NumberPicker(
  max: 21,
  min: 1,
  interval: 2,
  indexFormat: (value) => "$value+",
  itemExtent: 40,
  onSelectedItemChanged: (value) {
    print('selected value: $value');
  },
  labelAlignment: Alignment.center,
  label: Text("℃"),
  labelPadding: EdgeInsets.only(left: 50, bottom: 16),
)

字符串选择器 (string_picker)

字符串选择器允许用户从一组字符串中进行选择。

StringPicker(
  itemExtent: 40,
  data: ['Apple', 'Bob', 'Cat'],
  onSelectedItemChanged: (String value) {
    print('selected value: $value');
  },
)

日期选择器 (date_picker)

日期选择器允许用户从一个日期范围内进行选择。以下是使用 DateTimePickerWidget 的示例代码。

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectTime;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 20),
          Container(
            height: 150,
            child: NumberPicker(
              max: 21,
              min: 1,
              interval: 2,
              indexFormat: (value) => "$value+",
              itemExtent: 40,
              onSelectedItemChanged: (value) {
                print('selected value: $value');
              },
              labelAlignment: Alignment.center,
              label: Text("℃"),
              labelPadding: EdgeInsets.only(left: 50, bottom: 16),
            ),
          ),
          DateTimePicker(
            pickerModel: DatePickerModel(
              maxTime: DateTime(2028, 12, 1, 5, 6),
              minTime: DateTime(2012, 11, 2, 3, 4),
              weights: [1, 1, 1],
              labels: [true, true, true],
              formats: ['yyyy', 'M', 'dd'],
            ),
            onDateTimeChanged: (DateTime value) {
              print('date time: $value');
            },
            theme: PickerTheme(
              padding: EdgeInsets.symmetric(horizontal: 20),
            ),
          ),
          TextButton(
            onPressed: () {
              showPicker(context, builder: (BuildContext context) {
                return DateTimePickerWidget(
                  onConfirm: (DateTime dateTime) {
                    selectTime = dateTime;
                    print('date time: $dateTime');
                  },
                  title: "选择日期",
                  titleActionTheme: TitleActionTheme(
                    decoration: ShapeDecoration(
                        color: Colors.white,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(10.0),
                                topRight: Radius.circular(10.0)))),
                  ),
                  onCancel: () {
                    print('取消了');
                  },
                  pickerTheme: PickerTheme(
                    height: 180.0,
                    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                  ),
                  pickerModel: DateTimePickerModel(
                    maxTime: DateTime(2022, 12, 1, 5, 6, 7),
                    minTime: DateTime(2020, 11, 2, 3, 4, 5),
                    currentTime: selectTime,
                    dividers: ['', '/', '', ':', ''],
                  ),
                  pickerOverlay: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      SizedBox(width: 18),
                      Expanded(flex: 2, child: DefaultSelectionOverlay(borderColor: Colors.red)),
                      SizedBox(width: 18),
                      Expanded(flex: 3, child: DefaultSelectionOverlay(borderColor: Colors.red)),
                      SizedBox(width: 18),
                      Expanded(flex: 3, child: DefaultSelectionOverlay(borderColor: Colors.red)),
                      SizedBox(width: 18),
                    ],
                  ),
                  selectionOverlayBuilder: (int index) => null,
                );
              });
            },
            child: Text("显示日期选择器"),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用dh_picker日期选择器插件的一个示例。这个插件允许你以简单的方式在应用中集成日期选择器。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  dh_picker: ^最新版本号  # 请替换为实际发布的最新版本号

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

2. 导入插件

在你的Dart文件中导入dh_picker：

import 'package:dh_picker/dh_picker.dart';

3. 使用日期选择器

下面是一个完整的示例，展示如何在Flutter应用中使用dh_picker日期选择器：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Date Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected'
                  : 'Selected Date: ${selectedDate!.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final DateTime? pickedDate = await showDatePicker(
                  context: context,
                  initialDate: selectedDate ?? DateTime.now(),
                  firstDate: DateTime(1900),
                  lastDate: DateTime(2101),
                  builder: (BuildContext context, Widget? child) {
                    return Theme(
                      data: ThemeData.light().copyWith(
                        colorScheme: ColorScheme.fromSwatch(
                          primarySwatch: Colors.blue,
                        ),
                      ),
                      child: child!,
                    );
                  },
                );
                if (pickedDate != null && pickedDate != selectedDate) {
                  setState(() {
                    selectedDate = pickedDate;
                  });
                }
              },
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

注意：上面的代码示例实际上使用的是Flutter自带的showDatePicker方法，而不是dh_picker插件的特定功能。dh_picker插件可能有其特定的API和方法，但由于该插件的具体实现和API可能会随着版本更新而变化，并且没有提供详细的官方文档链接，以下是一个假设性的使用示例，假设dh_picker提供了一个类似的日期选择器方法：

// 假设的dh_picker使用示例
ElevatedButton(
  onPressed: () async {
    final DateTime? pickedDate = await DhPicker.showDatePicker(
      context: context,
      initialDate: selectedDate ?? DateTime.now(),
      // 可能还有其他参数，如firstDate, lastDate等，根据插件文档调整
    );
    if (pickedDate != null && pickedDate != selectedDate) {
      setState(() {
        selectedDate = pickedDate;
      });
    }
  },
  child: Text('Select Date with dh_picker'),
),

重要提示：由于dh_picker插件的具体API和方法可能有所不同，强烈建议查阅该插件的官方文档或GitHub仓库以获取最新和最准确的用法信息。如果插件提供了示例代码或文档，请务必参考那些资源来获取正确的实现方式。

回到顶部