app 购物车页面

import 'package:flutter/material.dart';
import 'package:flutterdemo/app/services/screenAdapter.dart';

import 'package:get/get.dart';

import '../controllers/cart_controller.dart';

class CartView extends GetView<CartController> {
  const CartView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: const Text('购物车'),
        centerTitle: true,
        actions: [
          TextButton(onPressed: (){}, child: const Text("编辑"))
        ],

      ),
      body: Stack(
        children: [

          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              padding: EdgeInsets.only(right: ScreenAdapter.width(20)),
              width: ScreenAdapter.width(1080),
              height: ScreenAdapter.height(190),
              decoration: BoxDecoration(
                border: Border(top: BorderSide(color: Color.fromARGB(178, 240, 236, 236),width: ScreenAdapter.height(2))),
                color: Colors.white
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Checkbox(value: true, onChanged: (value){
                        print(value);
                      }),
                      const Text("全选")
                    ],
                  ),
                  Row(
                    children: [
                      Text("合计："),
                      Text("¥98.9",style: TextStyle(
                        fontSize: ScreenAdapter.fontSize(58),
                        color: Colors.red
                      ),
                      ),
                      SizedBox(width: ScreenAdapter.width(20)),
                      ElevatedButton(
                       style: ButtonStyle(
                        // TODO
                        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: (){}, 
                        child: Text("结算")
                        )
                    ],
                  )
                ],
              ),

            )
            )
        ],
      ),
    );
  }
}

列表商品组件

import 'package:flutter/material.dart';

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



class CartItemView extends GetView {
  const CartItemView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(ScreenAdapter.height(20)),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(          
                    color: Color.fromARGB(178, 240, 236, 236),
                    width: ScreenAdapter.height(2))),
          ),
      child: Row(
        children: [
          SizedBox(
            width: ScreenAdapter.width(100),
            child: Checkbox(
                activeColor: Colors.red, value: false, onChanged: (value) {}),
          ),
          Container(
            width: ScreenAdapter.width(260),
            padding: EdgeInsets.all(ScreenAdapter.height(24)),
            margin: EdgeInsets.only(right: ScreenAdapter.width(20)),
            child: Image.network("https://www.itying.com/images/shouji.png",
                fit: BoxFit.fitHeight),
          ),
          Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "小米11",
                style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(36),
                    fontWeight: FontWeight.bold),
              ),
              SizedBox(height: ScreenAdapter.height(20)),
              Row(
                children: const [Chip(label: Text("黑色"))],
              ),
              SizedBox(height: ScreenAdapter.height(20)),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("¥98.9",
                      style: TextStyle(
                          fontSize: ScreenAdapter.fontSize(38),
                          color: Colors.red)),
                  const CartItemNumView()
                ],
              )
            ],
          ))
        ],
      ),
    );
  }
}

加减组件

import 'package:flutter/material.dart';
import 'package:flutterdemo/app/services/screenAdapter.dart';

import 'package:get/get.dart';


class CartItemNumView extends GetView {
  const CartItemNumView({Key? key}) : super(key: key);

  Widget _left(){
      return Container(
            alignment: Alignment.center,
            width:ScreenAdapter.width(80) ,
            height: ScreenAdapter.height(64),
            child: const Text("-"),
          );
  }
    Widget _center(){
      return 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(64),
            child: const Text("0"),
          );
  }
    Widget _right(){
      return Container(
            alignment: Alignment.center,
            width:ScreenAdapter.width(80) ,
             height: ScreenAdapter.height(64),
            child: const Text("+"),
          );
  }

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

        ],
      ),
    );
  }
}