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);
}),
相关推荐
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭2 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter