Flutter选择器更新插件flutter_picker_update的使用

Flutter选择器更新插件flutter_picker_update的使用

flutter_picker_update

图像

如何使用

在pubspec.yaml文件中添加依赖：

# 添加这一行到你的依赖项
dependencies:
  flutter_picker:
    git:
      url: git://github.com/yangyxd/flutter_picker.git

导入库：

import 'package:flutter_picker/flutter_picker.dart';

示例代码

以下是一些使用flutter_picker_update的示例代码。

基本选择器
void showPicker(BuildContext context) {
  Picker picker = new Picker(
    adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
    changeToFirst: true,
    textAlign: TextAlign.left,
    columnPadding: const EdgeInsets.all(8.0),
    onConfirm: (Picker picker, List value) {
      print(value.toString()); // 打印选择的值
      print(picker.getSelectedValues()); // 打印选择的值
    }
  );
  picker.show(_scaffoldKey.currentState); // 显示选择器
}
模态框选择器
void showPickerModal(BuildContext context) {
  new Picker(
    adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
    changeToFirst: true,
    hideHeader: false,
    onConfirm: (Picker picker, List value) {
      print(value.toString()); // 打印选择的值
      print(picker.adapter.text); // 打印选择的文本
    }
  ).showModal(this.context); // 显示模态框选择器
}
图标选择器
void showPickerIcons(BuildContext context) {
  new Picker(
    adapter: PickerDataAdapter(data: [
      new PickerItem(text: Icon(Icons.add), value: Icons.add, children: [
        new PickerItem(text: Icon(Icons.more)),
        new PickerItem(text: Icon(Icons.aspect_ratio)),
        new PickerItem(text: Icon(Icons.android)),
        new PickerItem(text: Icon(Icons.menu)),
      ]),
      new PickerItem(text: Icon(Icons.title), value: Icons.title, children: [
        new PickerItem(text: Icon(Icons.more_vert)),
        new PickerItem(text: Icon(Icons.ac_unit)),
        new PickerItem(text: Icon(Icons.access_alarm)),
        new PickerItem(text: Icon(Icons.account_balance)),
      ]),
      new PickerItem(text: Icon(Icons.face), value: Icons.face, children: [
        new PickerItem(text: Icon(Icons.add_circle_outline)),
        new PickerItem(text: Icon(Icons.add_a_photo)),
        new PickerItem(text: Icon(Icons.access_time)),
        new PickerItem(text: Icon(Icons.adjust)),
      ]),
      new PickerItem(text: Icon(Icons.linear_scale), value: Icons.linear_scale, children: [
        new PickerItem(text: Icon(Icons.assistant_photo)),
        new PickerItem(text: Icon(Icons.account_balance)),
        new PickerItem(text: Icon(Icons.airline_seat_legroom_extra)),
        new PickerItem(text: Icon(Icons.airport_shuttle)),
        new PickerItem(text: Icon(Icons.settings_bluetooth)),
      ]),
      new PickerItem(text: Icon(Icons.close), value: Icons.close),
    ]),
    title: new Text("Select Icon"), // 设置标题
    onConfirm: (Picker picker, List value) {
      print(value.toString()); // 打印选择的值
      print(picker.getSelectedValues()); // 打印选择的值
    }
  ).show(_scaffoldKey.currentState); // 显示选择器
}
对话框选择器
void showPickerDialog(BuildContext context) {
  new Picker(
    adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
    hideHeader: true,
    title: new Text("Select Data"), // 设置标题
    onConfirm: (Picker picker, List value) {
      print(value.toString()); // 打印选择的值
      print(picker.getSelectedValues()); // 打印选择的值
    }
  ).showDialog(context); // 显示对话框选择器
}
数组选择器
const PickerData2 = '''
[
    [
        1,
        2,
        3,
        4
    ],
    [
        11,
        22,
        33,
        44
    ],
    [
        "aaa",
        "bbb",
        "ccc"
    ]
]
''';

void showPickerArray(BuildContext context) {
  new Picker(
    adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData2), isArray: true),
    hideHeader: true,
    title: new Text("Please Select"), // 设置标题
    onConfirm: (Picker picker, List value) {
      print(value.toString()); // 打印选择的值
      print(picker.getSelectedValues()); // 打印选择的值
    }
  ).showDialog(context); // 显示对话框选择器
}
数字选择器
void showPickerNumber(BuildContext context) {
  new Picker(
    adapter: NumberPickerAdapter(data: [
      NumberPickerColumn(begin: 0, end: 999),
      NumberPickerColumn(begin: 100, end: 200),
    ]),
    delimiter: [
      PickerDelimiter(child: Container(
        width: 30.0,
        alignment: Alignment.center,
        child: Icon(Icons.more_vert),
      ))
    ],
    hideHeader: true,
    title: new Text("Please Select"), // 设置标题
    onConfirm: (Picker picker, List value) {
      print(value.toString()); // 打印选择的值
      print(picker.getSelectedValues()); // 打印选择的值
    }
  ).showDialog(context); // 显示对话框选择器
}

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

1 回复

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


flutter_picker_update 是一个用于在 Flutter 应用中实现选择器（Picker）功能的插件。它允许用户从预定义的选项中进行选择，并且支持自定义样式和选项。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_picker_update: ^1.0.0  # 请根据最新版本号进行替换

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

使用插件

以下是一个简单的示例，展示了如何使用 flutter_picker_update 插件来创建一个选择器并在用户选择某个选项时更新 UI。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PickerExample(),
    );
  }
}

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

class _PickerExampleState extends State<PickerExample> {
  String selectedValue = 'Option 1';

  List<String> options = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
    'Option 5',
  ];

  void _showPicker() {
    Picker(
      adapter: PickerDataAdapter<String>(pickerdata: options),
      hideHeader: false,
      title: Text('Select an option'),
      onConfirm: (Picker picker, List value) {
        setState(() {
          selectedValue = options[value[0]];
        });
      },
    ).showDialog(context);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Selected: $selectedValue'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showPicker,
              child: Text('Show Picker'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部