Flutter选择器插件uipickers的使用

Flutter选择器插件uipickers的使用

uipickers 是一个插件库，提供了平台特定的日期、时间和选择器弹窗。它在iOS上使用原生的iOS 14 UIDatePicker 和类似SwiftUI的Picker，而在其他平台上则使用相应的材料选择器。

使用

首先，在您的Dart代码中导入该库：

import 'package:uipickers/uipickers.dart';

然后选择以下其中一个组件：

• AdaptiveDatePicker - 允许选择日期或时间，并在小部件中显示所选日期。根据当前平台自动选择底层弹出窗口。
• AdaptivePicker - 允许从字符串列表中选择一个项目。根据当前平台自动选择底层弹出窗口。
• UIDatePicker - 允许选择日期、时间或日期加时间，并使用原生的iOS 14风格的UIDatePicker组件。
• UIPicker - 允许从字符串列表中选择一个项目。使用iOS原生组件（UIButton + UIMenu）来呈现类似SwiftUI的选择器弹窗。
• MaterialDatePicker - 允许选择日期、时间或日期加时间，并使用内置的材料对话框。
• MaterialPicker - 允许从字符串列表中选择一个项目。使用内置的DropDownButton。

AdaptiveDatePicker

AdaptiveDatePicker 用于选择日期或时间。它在其小部件中显示当前选定的日期/时间。在iOS上，它将使用原生的iOS 14风格的UIDatePicker。initialDate 属性设置当前选定的日期，firstDate 是最早允许的日期，lastDate 是最晚允许的日期。onChanged 事件处理程序在用户从弹窗中选择一个项时被调用：

DateTime selectedDate = DateTime.now();
//...
AdaptiveDatePicker(
    initialDate: selectedDate,
    firstDate: DateTime.now(), 
    lastDate: DateTime.now().add(Duration(days: 10)),
    onChanged: (date) { setState(() => selectedDate = date); },
)

警告： 该小部件的大小应该被约束。例如，可以将其包裹在一个SizedBox中：

SizedBox(width: 150, height: 34,
    child: AdaptiveDatePicker(
        //...
    )
)

为了显式地使用原生版本，只需将type属性设置为cupertino，或者替换AdaptiveDatePicker为UIDatePicker：

AdaptiveDatePicker(
    type: AdaptiveDatePickerType.cupertino,
    //...
)

tintColor 属性仅适用于UIDatePicker。它可以更改高亮文本的颜色：

UIDatePicker(
    tintColor: UIColors.red,
    //...
)

还可以通过多种属性进行自定义，例如backgroundColor、cornerRadius、borderColor等：

AdaptiveDatePicker(
    backgroundColor: Colors.blue[50]!,
    borderColor: Colors.blue[800]!,
    borderWidth: 3,
    cornerRadius: 4,
    items: items, 
    value: selectedItem, 
    onChanged: (value) { setState(() => selectedItem = value); },
);

AdaptivePicker

AdaptivePicker 小部件允许根据操作系统自动选择底层实现。在iOS上，它将使用基于UIButton + UIMenu的SwiftUI风格的选择器。value属性设置当前选定的项目索引，onChanged事件处理程序在用户从弹窗中选择一个项时被调用：

int selectedItem = 1;
var items = [ 'one', 'two', 'three' ];
//...
AdaptivePicker(
    items: items, 
    value: selectedItem, 
    onChanged: (value) { setState(() => selectedItem = value); }
)

警告： 该小部件的大小应该被约束。例如，可以将其包裹在一个SizedBox中：

SizedBox(width: 150, height: 34,
    child: AdaptiveDatePicker(
        //...
    )
)

为了显式地使用原生版本，只需将type属性设置为cupertino，或者替换AdaptivePicker为UIPicker：

AdaptivePicker(
    type: AdaptivePickerType.cupertino,
    //...
)

还可以通过多种属性进行自定义，例如backgroundColor、cornerRadius、borderColor等：

UIPicker(
    backgroundColor: Colors.blue[50]!,
    borderColor: Colors.blue[800]!,
    borderWidth: 3,
    cornerRadius: 4,
    items: items, 
    value: selectedItem, 
    onChanged: (value) { setState(() => selectedItem = value); },
);

完整示例

以下是完整的示例代码，展示了如何在Flutter应用中使用AdaptiveDatePicker和AdaptivePicker。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int selectedItem = 0;
  DateTime selectedDate = DateTime.now();
  final key1 = GlobalKey();
  final key2 = GlobalKey();
  final items = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.fromLTRB(100, 140, 20, 20),
          child: Column(
            children: [
              SizedBox(
                width: 150,
                height: 34,
                child: AdaptivePicker(
                  key: key1,
                  type: AdaptivePickerType.material,
                  items: items,
                  value: selectedItem,
                  dropDownItemTextColor: Colors.green,
                  onChanged: (val) {
                    setState(() {
                      selectedItem = val ?? 0;
                      selectedDate = DateTime.now()
                          .add(Duration(days: selectedItem));
                    });
                  },
                ),
              ),
              const SizedBox(height: 12),
              SizedBox(
                width: 150,
                height: 34,
                child: AdaptiveDatePicker(
                  key: key2,
                  type: AdaptiveDatePickerType.material,
                  initialDate: selectedDate,
                  firstDate: DateTime.now(),
                  lastDate: DateTime.now().add(const Duration(days: 10)),
                  onChanged: (date) {
                    setState(() {
                      selectedDate = date;
                      selectedItem =
                          daysBetween(DateTime.now(), selectedDate);
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  int daysBetween(DateTime from, DateTime to) {
    var fromD = DateTime(from.year, from.month, from.day);
    var toD = DateTime(to.year, to.month, to.day);
    return (toD.difference(fromD).inHours / 24).round();
  }
}