Flutter-防京东商城项目-编写商品详情(2)-19

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

代码文档

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

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

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

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

效果：

1.自定义按键

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

class JdButton extends StatelessWidget {

  final Color color;
  final String text;
  final Object cb;
  JdButton({Key key,this.color=Colors.black,this.text="按钮",this.cb=null}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ScreenAdaper.init(context);
    return InkWell(
      onTap: this.cb,
      child: Container(
        margin: EdgeInsets.all(5),
        padding: EdgeInsets.all(5),
        height: ScreenAdaper.height(68),
        width: double.infinity,
        decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(10)),
        child: Center(
          child: Text(
            "${text}",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

2.在商品详情(ProductContent)引入刚刚的自定义按键

import '../widget/JdButton.dart';

.3.替换代码 把代码拉到落最底部 替换红色部分的代码

旧代码

新代码

Container(               
 decoration: BoxDecoration(
   border: Border(
     top: BorderSide(
       color: Colors.black26,
       width: 1
     )
   ),
   color: Colors.white
 ),
 child: Row(
   children: <Widget>[

     Container(
       padding: EdgeInsets.only(top:ScreenAdapter.height(10)),
       width: 100,
       height: ScreenAdapter.height(88),
       child: Column(
         children: <Widget>[
           Icon(Icons.shopping_cart),
           Text("购物车")
         ],
       ),
     ),
     Expanded(
       flex: 1,
       child: JdButton(
         color:Color.fromRGBO(253, 1, 0, 0.9),
         text: "加入购物车",
         cb: (){
           print('加入购物车');
         },
       ),
     ),
     Expanded(
       flex: 1,
       child: JdButton(
         color: Color.fromRGBO(255, 165, 0, 0.9),
         text: "立即购买",
         cb: (){
           print('立即购买');
         },
       ),
     )
   ],
 ),
),

4.详情页第一页的商品页已经写好了可以直接复制过来

详情页结构图

ProductContentFirst页面中导入

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

class _ProductContentFirstState extends State<ProductContentFirst> {
  @override
  Widget build(BuildContext context) {
    ScreenAdaper.init(context);
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 16 / 9,
            child: Image.network("https://www.itying.com/images/flutter/p1.jpg",
                fit: BoxFit.cover),
          ),
          //标题
          Container(
            padding: EdgeInsets.only(top: 10),
            child: Text("联想ThinkPad 翼480（0VCD） 英特尔酷睿i5 14英寸轻薄窄边框笔记本电脑",
                style: TextStyle(
                    color: Colors.black87, fontSize: ScreenAdaper.size(36))),
          ),
          Container(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                  "震撼首发，15.9毫米全金属外观，4.9毫米轻薄窄边框，指纹电源按钮，杜比音效，2G独显，预装正版office软件",
                  style: TextStyle(
                      color: Colors.black54,
                      fontSize: ScreenAdaper.size(28)))),
          //价格
          Container(
            padding: EdgeInsets.only(top: 10),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Row(
                    children: <Widget>[
                      Text("特价: "),
                      Text("¥28",
                          style: TextStyle(
                              color: Colors.red,
                              fontSize: ScreenAdaper.size(46))),
                    ],
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Text("原价: "),
                      Text("¥50",
                          style: TextStyle(
                              color: Colors.black38,
                              fontSize: ScreenAdaper.size(28),
                              decoration: TextDecoration.lineThrough)),
                    ],
                  ),
                )
              ],
            ),
          ),
          //筛选
          Container(
            margin: EdgeInsets.only(top: 10),
            height: ScreenAdaper.height(80),
            child: Row(
              children: <Widget>[
                Text("已选: ", style: TextStyle(fontWeight: FontWeight.bold)),
                Text("115，黑色，XL，1件")
              ],
            ),
          ),
          Divider(),
          Container(
            height: ScreenAdaper.height(80),
            child: Row(
              children: <Widget>[
                Text("运费: ", style: TextStyle(fontWeight: FontWeight.bold)),
                Text("免运费")
              ],
            ),
          ),
          Divider(),
        ],
      ),
    );
  }
}