Flutter:进步器,数量加减简单使用

封装组件

js 复制代码
import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/cupertino.dart';

import '../index.dart';

/// 数量编辑
class QuantityWidget extends StatelessWidget {
  // 数量发送改变
  final Function(int quantity) onChange;
  // 数量
  final int quantity;

  const QuantityWidget({
    super.key,
    required this.quantity,
    required this.onChange,
  });

  @override
  Widget build(BuildContext context) {
    return <Widget>[
      // 减号
      <Widget>[
        Icon(CupertinoIcons.minus,size: 32.w,color: const Color(0xff000000),),
      ].toRow(mainAxisAlignment: MainAxisAlignment.center)
      .card(color: const Color(0xfff8f8f8),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.w)))
      .tight(width: 56.w,height: 56.w)
      .onTap(() => onChange(quantity - 1 < 0 ? 0 : quantity - 1)),

      // 数量
      TextWidget.body(
        "$quantity",
        size: 24.sp,
        weight: FontWeight.w600,
      )
      .center()
      .tight(width: 68.w,height: 56.w),

      // 加号
      <Widget>[
        Icon(CupertinoIcons.plus,size: 32.w,color: const Color(0xff000000),),
      ].toRow(mainAxisAlignment: MainAxisAlignment.center)
      .card(color: const Color(0xfff8f8f8),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.w)))
      .tight(width: 56.w,height: 56.w)
      .onTap(() => onChange(quantity + 1)),
    ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween);
  }
}

页面中使用

js 复制代码
QuantityWidget(
  quantity: controller.quantity,
    onChange: (value) {
      controller.onQuantityChange(value);
  },
),

// 数量
int quantity = 1;

// 修改数量
void onQuantityChange(int value) {
  if (value <= 0) {
    value = 1;
  }
  quantity = value;
  update(["my_cart"]);
}
相关推荐
小红星闪啊闪14 小时前
Flutter开发 -- 需要了解的Dart知识
flutter
小李A_Z15 小时前
[Flutter]介绍些flutter的弹窗
flutter
小李A_Z15 小时前
[Flutter]介绍写Flutetr的按钮
flutter
恋猫de小郭20 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
tangweiguo0305198721 小时前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
ITKEY_21 小时前
flutter日期选择国际化支持
开发语言·javascript·flutter
农夫三拳_有点甜21 小时前
Flutter SystemChrome 完整指南
flutter
葱段21 小时前
【Flutter】TextField 监听长按菜单粘贴点击事件
android·flutter·dart
2501_919749031 天前
flutter鸿蒙:使用flutter_local_notifications实现本地通知
flutter·华为·harmonyos
浮生若茶80881 天前
Flutter环境搭建全攻略之-Macos环境搭建
flutter·macos