Flutter：封装一个自用的bottom_picker选择器

效果图：单列选择器

使用bottom_picker: ^2.9.0实现，单列选择器，官方文档

pubspec.yaml

js 复制代码

# 底部选择
bottom_picker: ^2.9.0

picker_utils.dart

haskell 复制代码

AppTheme：自定义的颜色
TextWidget.body = Text()
<Widget>[].toRow = Row()

下边代码中用到了一些扩展，需要自行替换这些内容

js 复制代码

import 'package:bottom_picker/bottom_picker.dart';
import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:xiaoshukeji/common/index.dart';

class PickerUtils {
  /// 底部单列选择器
  /// [context] 上下文
  /// [title] 选择器标题
  /// [items] 数据列表 [{'id': 1, 'name': '选项1'}]
  /// [onConfirm] 确认回调 返回选中项
  static void showPicker({
    required BuildContext context,
    required String title,
    required List<Map<String, dynamic>> items,
    required Function(Map<String, dynamic>) onConfirm,
  }) {
    BottomPicker(
      pickerTitle: TextWidget.body(
        title,
        weight: FontWeight.w600,
        size: 30.sp,
      ),
      items: items.map((item) => 
        Center(
          child: TextWidget.body(
            item['name'].toString(),
            size: 28.sp,
          ),
        ),
      ).toList(),
      buttonPadding: 0,
      buttonWidth: 690.w,
      titleAlignment: Alignment.center,
      backgroundColor: AppTheme.blockBgColor,
      pickerTextStyle: TextStyle(
        fontSize: 28.sp,
        color: AppTheme.textColorfff,
      ),
      closeIconColor: AppTheme.textColorfff,
      buttonAlignment: MainAxisAlignment.center,
      displaySubmitButton: true,
      buttonContent: <Widget>[
        TextWidget.body(
          '确定',
          weight: FontWeight.w600,
          size: 26.sp,
        ),
      ].toRow(
        mainAxisAlignment: MainAxisAlignment.center
      ).card(
        color: AppTheme.primaryYellow
      ).tight(
        height: 80.w,
      ),
      buttonStyle: BoxDecoration(
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(44.w),
      ),
      onSubmit: (index) {
        onConfirm(items[index]);
      },
    ).show(context);
  }
}

使用

js 复制代码

// 记得import  PickerUtils 文件

// 模型列表数据,默认接口返回了id和name字段
final List<Map<String, dynamic>> modelList = [
  {'id': 1, 'name': '模型1'},
  {'id': 2, 'name': '模型2'},
  {'id': 3, 'name': '模型3'},
];

// 选择
void showModelPicker(BuildContext context) {
  PickerUtils.showPicker(
    context: context,
    title: '选择模型',
    items: modelList,
    onConfirm: (selected) {
      modelController.text = selected['name'];
      update(['strategy_add']);
    },
  );
}

// 页面中调用
onTap((){
  controller.showPairPicker(context);
}),