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"]);
}
相关推荐
帅次8 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡9 小时前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉11 小时前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian12311 小时前
FlutterView 源码解析
flutter
Zender Han14 小时前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter
nc_kai18 小时前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
littlegnal19 小时前
Flutter Add-to-app profiling
flutter
0wioiw01 天前
Flutter基础(FFI)
flutter
Georgewu10 天前
【HarmonyOS 5】鸿蒙跨平台开发方案详解(一)
flutter·harmonyos