弹框加入购物车

55 阅读1分钟

image.png

void showBottomAttr(int action){
    // todo bottomSheet更新流数据需要 GetBuilder 来渲染数据
    // action 1 点击的是筛选属性  2 点击是加入购物车 3 表示点击的是立即购买
    Get.bottomSheet(
      GetBuilder<ContentController>(
        init: controller,
        builder: (controller){
      return Container(
        color: Colors.white,
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        width: double.infinity,
        height: ScreenAdapter.height(1200),
        child: Stack(
          children: [
            ListView(
                children:[
                  // todo
                   ...controller.pcontent.value.attr!.map((v){
                  return Wrap(
                    children: [
                      Container(
                        padding: EdgeInsets.only(
                        top: ScreenAdapter.height(20),
                        left: ScreenAdapter.width(20),
                    ),
                    width: ScreenAdapter.width(1040),
                    child: Text("${v.cate}",
                    style: TextStyle(fontWeight: FontWeight.bold)),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                        top: ScreenAdapter.height(20),
                        left: ScreenAdapter.width(20),
                      ),
                      width: ScreenAdapter.width(1040),
                      child: Wrap(
                        children: v.attrList!.map((value) {
                          print("list"+value["title"]);
                          return InkWell(
                            onTap: () {
                              controller.changeAttr(v.cate, value["title"]);
                            },
                            child: Container(
                              margin: EdgeInsets.all(ScreenAdapter.width(20)),
                              child: Chip(
                                  padding: EdgeInsets.only(
                                      left: ScreenAdapter.width(20),
                                      right: ScreenAdapter.width(20)),
                                  backgroundColor: value["checked"] == true
                                      ? Colors.red
                                      : const Color.fromARGB(31, 223, 213, 213),
                                  label: Text(value["title"])
                                  ),
                            ),
                          );
                        }).toList(),
                      ),
                    )
                  ],

                  );
                }).toList(),
                // 数量
                Padding(
                  padding: EdgeInsets.all(ScreenAdapter.height(20)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const Text("数量",style: TextStyle(fontWeight: FontWeight.bold)),
                      CartItemNumView(),
                    ],
                  ),
                  
                  )

              ]
          
          ),

          Positioned(
            right: 2,
            top: 0,
            child: IconButton(
              onPressed: (){
                Get.back();
              }, 
              icon: const Icon(Icons.close),
              )
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: action == 1 ?
               Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: ScreenAdapter.height(120),
                      margin: EdgeInsets.only(
                        right: ScreenAdapter.width(20),
                      ),
                      child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor:
                           MaterialStateProperty.all(const Color.fromRGBO(255, 165, 0, 0.9)),
                           foregroundColor: MaterialStateProperty.all(Colors.white),
                           shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10)
                            )
                           )
                        ),
                        onPressed: (){
                          _addCard();
                        }, 
                        child: Text("加入购物车")
                        ),

                    )
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: ScreenAdapter.height(120),
                        margin: EdgeInsets.only(
                          right: ScreenAdapter.width(20),
                        ),
                        child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor:
                           MaterialStateProperty.all(const Color.fromRGBO(253, 1, 0, 0.9)),
                           foregroundColor: MaterialStateProperty.all(Colors.white),
                           shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10)
                            )
                           )
                        ),
                        onPressed: (){
                          _buy();
                        }, 
                        child: Text("立即购买")
                        ),
                      )
                      )
                ],
               )
               : Row(
                children: [
                  Expanded(
                      flex: 1,
                      child: Container(
                        height: ScreenAdapter.height(120),
                        margin: EdgeInsets.only(
                          right: ScreenAdapter.width(20),
                        ),
                        child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor:
                           MaterialStateProperty.all(const Color.fromRGBO(253, 1, 0, 0.9)),
                           foregroundColor: MaterialStateProperty.all(Colors.white),
                           shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10)
                            )
                           )
                        ),
                        onPressed: (){
                          if(action == 2){
                            _addCard();
                          }else{
                            _buy();
                          }
                        }, 
                        child: Text("确定")
                        ),
                      )
                      )
                ],
               )
              )
          ],
        ),
        
      );
      }
    )
    );
  }

数量组件

import 'package:flutter/material.dart';
import 'package:flutterdemo/app/modules/content/controllers/content_controller.dart';

import 'package:get/get.dart';
import '../../../services/screenAdapter.dart';


class CartItemNumView extends GetView {
  @override
  final ContentController controller = Get.find();
  CartItemNumView({Key? key}) : super(key: key);

  Widget _left() {
    return InkWell(
      onTap: () {
        controller.decBuyNum();
      },
      child: Container(
        alignment: Alignment.center,
        width: ScreenAdapter.width(80),
        height: ScreenAdapter.height(80),
        child: const Text("-"),
      ),
    );
  }

  Widget _center() {
    return Obx(()=>Container(
      decoration: BoxDecoration(
          border: Border(
        left: BorderSide(width: ScreenAdapter.width(2), color: Colors.black12),
        right: BorderSide(width: ScreenAdapter.width(2), color: Colors.black12),
      )),
      alignment: Alignment.center,
      width: ScreenAdapter.width(80),
      height: ScreenAdapter.height(80),
      child: Text("${controller.buyNum.value}"),
    ));
  }

  Widget _right() {
    return InkWell(
      onTap: (){
        controller.incBuyNum();
      },
      child: Container(
      alignment: Alignment.center,
      width: ScreenAdapter.width(80),
      height: ScreenAdapter.height(80),
      child: const Text("+"),
    ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenAdapter.width(244),
      height: ScreenAdapter.height(80),
      decoration: BoxDecoration(
          border:
              Border.all(width: ScreenAdapter.width(2), color: Colors.black12)),
      child: Row(
        children: [_left(), _center(), _right()],
      ),
    );
  }
}