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"]);
}
相关推荐
玫瑰花开一片一片4 小时前
Flutter IOS 真机 Widget 错误。Widget 安装后系统中没有
flutter·ios·widget·ios widget
hepherd5 小时前
Flutter 环境搭建 (Android)
android·flutter·visual studio code
bst@微胖子1 天前
Flutter之路由和导航
flutter
亚洲小炫风1 天前
flutter 中各种日志
前端·flutter·日志·log
louisgeek1 天前
Flutter 动画之 Implicit 隐式动画
flutter
勤劳打代码1 天前
游刃有余 —— Isolate 轻量化实战
flutter·github·dart
RichardLai881 天前
[Flutter 基础] - Flutter基础组件 - Text
android·flutter
Ya-Jun2 天前
常用第三方库精讲:cached_network_image图片加载优化
android·flutter
WDeLiang2 天前
Flutter 环境搭建
flutter·ios·visual studio code