一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

本章结果:
请添加图片描述

CheckOut 页面的代码

import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';

class CheckOutPage extends StatefulWidget {
  CheckOutPage({Key key}) : super(key: key);

  _CheckOutPageState createState() => _CheckOutPageState();
}

class _CheckOutPageState extends State<CheckOutPage> {
  Widget _checkOutItem() {
    return Row(
      children: <Widget>[
        Container(
          width: ScreenAdaper.width(160),
          child: Image.network(
              "https://www.itying.com/images/flutter/list2.jpg",
              fit: BoxFit.cover),
        ),
        Expanded(
            flex: 1,
            child: Container(
              padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text("Flutter仿京东商城项目实战视频教程", maxLines: 2),
                  Text("白色,175", maxLines: 2),
                  Stack(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.centerLeft,
                        child:
                        Text("¥111", style: TextStyle(color: Colors.red)),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: Text("x2"),
                      )
                    ],
                  )
                ],
              ),
            ))
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("结算"),
      ),
      body: Stack(
        children: <Widget>[
          ListView(
            children: <Widget>[
              Container(
                color: Colors.white,
                child: Column(
                  children: <Widget>[
                    // ListTile(
                    //   leading: Icon(Icons.add_location),
                    //   title: Center(
                    //     child: Text("请添加收货地址"),
                    //   ),
                    //   trailing: Icon(Icons.navigate_next),
                    // )
                    SizedBox(height: 10),
                    ListTile(
                      title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("张三  15201681234"),
                          SizedBox(height: 10),
                          Text("北京市海淀区西二旗"),
                        ],
                      ),
                      trailing: Icon(Icons.navigate_next),
                    ),
                    SizedBox(height: 10),


                  ],
                ),
              ),
              SizedBox(height: 20),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(ScreenAdaper.width(20)),
                child: Column(
                  children: <Widget>[
                    _checkOutItem(),
                    Divider(),
                    _checkOutItem(),
                    Divider(),
                    _checkOutItem()
                  ],
                ),
              ),
              SizedBox(height: 20),
              Container(
                color: Colors.white,
                padding: EdgeInsets.all(ScreenAdaper.width(20)),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("商品总金额:¥100"),
                    Divider(),
                    Text("立减:¥5"),
                    Divider(),
                    Text("运费:¥0"),
                  ],
                ),
              )
            ],
          ),
          Positioned(
            bottom: 0,
            width: ScreenAdaper.width(750),
            height: ScreenAdaper.height(100),
            child: Container(
              width: ScreenAdaper.width(750),
              height: ScreenAdaper.height(100),
              decoration: BoxDecoration(

                  color: Colors.white,
                  border: Border(
                      top: BorderSide(
                          width: 1,
                          color: Colors.black26
                      )
                  )
              ),

              child: Stack(
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text("总价:¥140", style: TextStyle(color: Colors.red)),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: RaisedButton(
                      child:
                      Text('立即下单', style: TextStyle(color: Colors.white)),
                      color: Colors.red,
                      onPressed: (){

                      },
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

回到routers页面

在这里插入图片描述

import '../pages/CheckOut.dart';

'/checkOut': (context) => CheckOutPage(),

回到Cart 购物车页面

在这里插入图片描述

创建结算方法

  //去结算
  doCheckOut(){
    //判断用户有没有登录    保存购物车选中的数据
    Navigator.pushNamed(context, '/checkOut');
  }

调用结算方法
在这里插入图片描述

doCheckOut
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐