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"]);
}
相关推荐
孤鸿玉10 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥17 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart