Flutter系列（十二）实现购物车和提交订单页

最新推荐文章于 2024-05-02 02:00:56 发布

摸金青年v

最新推荐文章于 2024-05-02 02:00:56 发布

阅读量1.5k

点赞数

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/sinat_41144773/article/details/131353249

版权

基础工程：

Flutter系列（十一）实现商城首页和商品详情页_摸金青年v的博客-CSDN博客

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

一、前言

本文用flutter实现购物车和提交订单页，效果如下图：

二、使用组件

1. Card 卡片组件，扁平化风格

2. CheckBox 复选框组件，实现全选的功能

3. 数量加减插件 NumberControllerWidget

参考：flutter 自定义TextField，加减数量输入框 - 简书 (jianshu.com)

调整了下icon(加号和减号)的大小

三、完整代码

3.1 购物车页 cart.dart

import 'package:flutter/material.dart';
import 'package:flutter_play/NumberControllerWidget.dart';
import 'package:flutter_play/animationUtile.dart';
import 'package:flutter_play/checkout.dart';

/*购物车页*/
class CartPage extends StatefulWidget {
  @override
  State<CartPage> createState() => _CartPage();
}

class _CartPage extends State<CartPage> {

  List<bool> isChecks = [false, false, false];  //复选框状态,默认未选中
  bool isAllSelect = false;  //全选状态
  List listData = [
    {
      "store": "Apple苹果旗舰店",
      "skuName": "Apple iPhone 14 Pro (A2892) 256GB 暗紫色 支持移动联通电信5G 双卡双待手机",
      "price": "5988",
      "image": "https://img-blog.csdnimg.cn/c6dfd375abf1433fa3a42951cc186a2b.jpeg",
    },
    {
      "store": "小米旗舰店",
      "skuName": "Redmi K60 骁龙8+处理器 2K高光屏 6400万超清相机 5500mAh长续航",
      "price": "2588",
      "image": "https://img-blog.csdnimg.cn/678c0686dc694b65ad6b20693dbc35f1.jpeg",
    },
    {
      "store": "耐克品牌店",
      "skuName": "夏季新款潮流鞋",
      "price": "1299",
      "image": "https://img-blog.csdnimg.cn/63efe7acbac74e7ebce85e3801f948e3.jpeg",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('购物车', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),
        foregroundColor: Colors.black, //字体颜色
        backgroundColor: const Color(0xFFFBFBFB), //顶部背景色
      ),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  skuList(),//商品列表
                ],
              ),
            )
          ),
          bottomFix() //底部固定栏
        ],
      ),
    );
  }

  //商品列表
  Container skuList(){
    return Container(
      width: 500,
      height: 800,
      padding: const EdgeInsets.only(top: 5),
      child: ListView.builder(
        itemCount: listData.length,  //商品个数
        itemBuilder: (context, index) {
          return Container(
            height: 200,
            width: 500,
            padding: const EdgeInsets.fromLTRB(5, 5, 5, 5), //内边距
            margin: const EdgeInsets.fromLTRB(8, 5, 8, 0), //外边距
            child: Card(
              clipBehavior: Clip.hardEdge,
              elevation: 2, //卡片海拔高度设置，立体感
              child: InkWell(
                splashColor: Colors.blue.withAlpha(30), //点击卡片，有蓝色透明度响应，扁平化
                onTap: () {

                }, //卡片点击
                child: Column(
                  children: [
                    Row(
                      children: [
                        Checkbox(
                          value: isChecks[index],
                          onChanged:(value){
                            setState(() {
                              isChecks[index] = value!;