Flutter购物车按钮插件cart_button的使用

Flutter购物车按钮插件cart_button的使用

pub package

cart_button 是一个完全可定制的 Flutter 小部件，用于获取计数。它适用于电子商务应用，用于获取购物车中的商品数量。

该插件是从 CartStepper 派生出来的。

预览

参数

  • count: int/double, 显示的数量
  • stepper: int/double, 增加或减少的数量
  • size: double, 小部件的大小
  • axis: Axis, 布局方向
  • numberSize: double, 数字间隔，默认为2
  • onChanged: Function, 必须设置以释放计数器
  • style: CartbuttonStyle
  • elevation: double, 在此小部件周围显示阴影
  • defaultWidget: 计数器等于0时的默认小部件
  • onDefaultWidgetTapped: 当默认小部件被点击时调用的额外空函数

CartButtonStyle:

  • activeForegroundColor: Color, 计数大于0时的文本颜色
  • activeBackgroundColor: Color, 计数大于0时的背景颜色
  • foregroundColor: Color, 计数等于0时的文本颜色
  • backgroundColor: Color, 计数等于0时的背景颜色
  • shape: BoxShape,
  • radius: Radius, 此小部件的圆角，默认计算为圆角矩形
  • BoxBorder: 小部件的边框
  • shadowColor: Color
  • textStyle,
  • iconTheme: const IconThemeData(),
  • iconPlus: IconData, 自定义加号图标
  • iconMinus: IconData, 自定义减号图标
  • buttonAspectRatio: 加号和减号按钮的宽高比，默认为1，
  • elevation: 小部件的阴影高度，

使用方法

创建一个用于显示和修改数字的小部件：

Widget _buildButton() {
  return CartButtonInt(
    count: _counter,
    size: 30,
    style: CartButtonTheme.of(context).copyWith(activeForegroundColor: Colors.purple,),
    onChanged: (count) {
      setState(() {
        _counter = count;
      });
    },
  );
}

示例代码

import 'package:flutter/material.dart';
import 'package:cart_button/cart_button.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: const MyHomePage(
        title: "Cart Button",
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counterInit = 0;
  int _counter = 1;
  int _counterLimit = 1;

  double _dCounter = 0.0;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Center(
                        child: Padding(
                          padding: EdgeInsets.only(top: 8),
                          child: Text('正常用法：'),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: CartButtonInt(
                              style: CartButtonStyle.fromTheme(
                                Theme.of(context),
                                radius: Radius.zero,
                              ),
                              elevation: 7,
                              value: _counterInit,
                              onChanged: (count) {
                                setState(() {
                                  _counterInit = count;
                                });
                              },
                              defaultWidget: const Text('计数器等于0时的默认小部件。'),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: CartButtonDouble(
                              value: _dCounter,
                              stepper: 0.01,
                              onChanged: (count) {
                                setState(() {
                                  _dCounter = (count * 100).round() / 100;
                                });
                              },
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Center(
                        child: Padding(
                          padding: EdgeInsets.only(top: 25),
                          child: Text('垂直方向：'),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: CartButtonInt(
                              value: _counter,
                              axis: Axis.vertical,
                              onChanged: (count) {
                                setState(() {
                                  _counter = count;
                                });
                              },
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: CartButtonInt(
                              value: _counter,
                              axis: Axis.vertical,
                              style: CartButtonTheme.of(context).copyWith(
                                activeBackgroundColor: Colors.white,
                                activeForegroundColor: Colors.blue,
                                border: Border.all(
                                  color: Colors.blue,
                                ),
                              ),
                              onChanged: (count) {
                                setState(() {
                                  _counter = count;
                                });
                              },
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: CartButtonDouble(
                              value: _dCounter,
                              stepper: 0.01,
                              axis: Axis.vertical,
                              onChanged: (count) {
                                setState(() {
                                  _dCounter = (count * 100).round() / 100;
                                });
                              },
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const Center(
              child: Padding(
                padding: EdgeInsets.only(top: 25),
                child: Text('不同大小 / 颜色设置：'),
              ),
            ),
            Wrap(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: Center(
                    child: CartButtonInt(
                      value: _counter,
                      size: 20,
                      onChanged: (count) {
                        setState(() {
                          _counter = count;
                        });
                      },
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: Center(
                    child: CartButtonInt(
                      value: _counter,
                      size: 30,
                      style: const CartButtonStyle(
                        foregroundColor: Colors.red,
                        activeForegroundColor: Colors.white,
                        activeBackgroundColor: Colors.pinkAccent,
                        buttonAspectRatio: 1.5,
                      ),
                      onChanged: (count) {
                        setState(() {
                          _counter = count;
                        });
                      },
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: Center(
                    child: CartButtonInt(
                      value: _counter,
                      size: 30,
                      style: CartButtonStyle(
                        foregroundColor: Colors.black87,
                        activeForegroundColor: Colors.black87,
                        activeBackgroundColor: Colors.white,
                        border: Border.all(color: Colors.grey),
                        elevation: 0,
                        buttonAspectRatio: 1.5,
                      ),
                      onChanged: (count) {
                        setState(() {
                          _counter = count;
                        });
                      },
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: Center(
                    child: CartButtonInt(
                      value: _counter,
                      size: 30,
                      style: CartButtonStyle(
                        foregroundColor: Colors.black87,
                        activeForegroundColor: Colors.black87,
                        activeBackgroundColor: Colors.white,
                        border: Border.all(color: Colors.grey),
                        radius: const Radius.circular(8),
                        elevation: 0,
                        buttonAspectRatio: 1.5,
                      ),
                      onChanged: (count) {
                        setState(() {
                          _counter = count;
                        });
                      },
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: Center(
                    child: CartButtonInt(
                      value: _counter,
                      size: 30,
                      numberSize: 6,
                      style: const CartButtonStyle(
                        foregroundColor: Colors.red,
                        activeForegroundColor: Colors.white,
                        activeBackgroundColor: Colors.pinkAccent,
                        radius: Radius.zero,
                      ),
                      onChanged: (count) {
                        setState(() {
                          _counter = count;
                        });
                      },
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: Center(
                    child: CartButtonInt(
                      value: _counter,
                      size: 80,
                      onChanged: (count) {
                        setState(() {
                          _counter = count;
                        });
                      },
                    ),
                  ),
                ),
              ],
            ),
            const Center(
              child: Padding(
                padding: EdgeInsets.only(top: 25),
                child: Text('最小限制：'),
              ),
            ),
            Center(
              child: CartButtonInt(
                value: _counterLimit,
                style: CartButtonStyle.fromTheme(
                  Theme.of(context),
                  radius: const Radius.circular(3),
                ),
                size: 30,
                onChanged: (count) {
                  if (count < 1) {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                      content: Text('数量不能小于1。'),
                      backgroundColor: Colors.orangeAccent,
                    ));
                    return;
                  }
                  setState(() {
                    _counterLimit = count;
                  });
                },
              ),
            ),
            const SizedBox(height: 50),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter购物车按钮插件cart_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter购物车按钮插件cart_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用cart_button插件的一个代码示例。cart_button插件通常用于显示购物车图标及其数量，便于用户快速访问购物车页面。假设你已经将cart_button插件添加到了你的pubspec.yaml文件中。

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  cart_button: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖项。

接下来，在你的Dart文件中，你可以按照以下方式使用CartButton：

import 'package:flutter/material.dart';
import 'package:cart_button/cart_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _cartItemCount = 0;

  void _incrementCartItemCount() {
    setState(() {
      _cartItemCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Cart Button Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 添加购物车按钮
            CartButton(
              itemCount: _cartItemCount,
              onPressed: () {
                // 点击按钮时导航到购物车页面
                Navigator.pushNamed(context, '/cart');
              },
              iconData: Icons.shopping_cart,
              iconColor: Colors.black,
              labelStyle: TextStyle(color: Colors.black),
              backgroundColor: Colors.white,
            ),
            SizedBox(height: 20),
            // 添加一个按钮来增加购物车中的商品数量
            ElevatedButton(
              onPressed: _incrementCartItemCount,
              child: Text('Add to Cart'),
            ),
          ],
        ),
      ),
    );
  }
}

// 假设你有一个购物车页面
class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cart Page'),
      ),
      body: Center(
        child: Text('This is the cart page.'),
      ),
    );
  }
}

// 在你的应用中注册购物车页面的路由
class MyAppRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/cart':
        return MaterialPageRoute(builder: (_) => CartPage());
      default:
        return MaterialPageRoute(builder: (_) => MyHomePage());
    }
  }
}

void main() {
  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    onGenerateRoute: MyAppRouter.generateRoute,
    home: MyHomePage(),
  ));
}

在这个示例中：

  1. 我们创建了一个_MyHomePageState类，该类包含一个_cartItemCount变量来跟踪购物车中的商品数量。
  2. CartButton小部件被添加到页面中心，显示当前购物车中的商品数量。当用户点击按钮时，它会导航到购物车页面（/cart）。
  3. 我们还添加了一个ElevatedButton来增加购物车中的商品数量。
  4. MyAppRouter类用于处理应用中的路由，确保当用户点击购物车按钮时，可以导航到CartPage。

请注意，你可能需要根据你的应用结构调整代码，特别是路由部分。希望这个示例能帮助你理解如何在Flutter项目中使用cart_button插件。

回到顶部