Flutter移动电商实战 --（44）详细页_首屏自定义Widget编写

逃离我推掉我的手 2023-06-01 06:05 4阅读 0赞

把详细页的图片、标题、编号和价格形成一个单独的widget去引用

![1090399-20190915213303908-1448763983.png][]

# 详情页的顶部单独封装个插件 #

在pages下面新建detials\_page的文件件并在里面新建页面details\_top\_area.dart文件

![1090399-20190915213332066-1136772970.png][]

添加引用，然后声明一个静态的类

![1090399-20190915213409301-210148941.png][]

# 返回顶部图片的方法 #

![1090399-20190915213447623-501649756.png][]

# 商品名称方法： #

![1090399-20190915213518032-1194011413.png][]

# 商品编号方法 #

![1090399-20190915213548299-1476500173.png][]

# 开始写Build #

最外层是一个Provide，里面model类传递的是商品详情的类

![1090399-20190915213627252-909565786.png][]

# 在主页内引用子组件 #

首先引入我们写的组件的页面文件，然后调用我们写的组件的类就可以了。

DetailsTopArea

![1090399-20190915213701329-842536177.png][]

# 效果展示 #

点击首页的轮播图就看到详情的页面了。

![1090399-20190915213734679-983099791.png][]

# 最终代码： #

import 'package:flutter/material.dart';
    import 'package:provide/provide.dart';
    import '../provide/details_info.dart';
    import './details_page/details_top_area.dart';
    
    class DetailsPage extends StatelessWidget {
      final String goodsId;
    
      DetailsPage(this.goodsId);//flutter 1.2的最新的写法 构造函数
    
      @override
      Widget build(BuildContext context) {
     
        return Scaffold(
          appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: (){
                Navigator.pop(context);//返回上一个页面
              },
            ),
            title: Text('商品详细页'),
          ),
          body: FutureBuilder(
            future: _getBackInfo(context),
            builder: (context,snapshot){
              //判断是否有数据
              if(snapshot.hasData){
                //如果有数据返回一个Container
                return Container(
                  child: Column(
                    children: <Widget>[
                      DetailsTopArea(),
                    ],
                  ),
                );
              }else{
                return Text('加载中......');//没有数据的情况
              }
            },
          ),
        );
      }
    
      Future _getBackInfo(BuildContext context) async{
        await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
        //print('加载完成...........');
        return '完成加载';
      }
    
    }

# 价格的Widget #

参考博客上的代码：

[https://jspang.com/posts/2019/03/01/flutter-shop.html\#%E7%AC%AC44%E8%8A%82%EF%BC%9A%E8%AF%A6%E7%BB%86%E9%A1%B5-%E9%A6%96%E5%B1%8F%E8%87%AA%E5%AE%9A%E4%B9%89widget%E7%BC%96%E5%86%99][https_jspang.com_posts_2019_03_01_flutter-shop.html_E7_AC_AC44_E8_8A_82_EF_BC_9A_E8_AF_A6_E7_BB_86_E9_A1_B5-_E9_A6_96_E5_B1_8F_E8_87_AA_E5_AE_9A_E4_B9_89widget_E7_BC_96_E5_86_99]

details\_top\_area.dart

import 'package:flutter/material.dart';
    import 'package:provide/provide.dart';
    import '../../provide/details_info.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    
    
    class DetailsTopArea extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Provide<DetailsInfoProvide>(
          builder: (context,child,val){
            var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;
            if(goodsInfo!=null){
              return Container(
                color: Colors.white,
                child: Column(
                  children: <Widget>[
                    _goodsImage(goodsInfo.image1),
                    _goodsName(goodsInfo.goodsName),
                    _goodsNum(goodsInfo.goodsSerialNumber),
                    _goodsPrice(goodsInfo.presentPrice,goodsInfo.oriPrice),
                  ],
                ),
              );
            }else{
              return Text('正在记载中');
            }
          },
        );
      }
      //商品图片
      Widget _goodsImage(url){
        return Image.network(
          url,
          width:ScreenUtil().setWidth(740),
        );
      }
      //商品名称
      Widget _goodsName(name){
        return Container(
          width:ScreenUtil().setWidth(740),
          padding: EdgeInsets.only(left:15.0),//左侧的边距
          child: Text(
            name,//传过来的标题
            style:TextStyle(
              fontSize: ScreenUtil().setSp(30)//设置字体的大小
            )
          ),
        );
      }
      //商品编号
      Widget _goodsNum(num){
        return Container(
          width: ScreenUtil().setWidth(730),
          padding: EdgeInsets.only(left:5.0),
          margin: EdgeInsets.only(top: 8.0),
          child: Text(
            '编号：${num}',
            style: TextStyle(
              color: Colors.black12,
            ),
          ),
        );
      }
      //商品价格
      Widget _goodsPrice(presentPrice,oriPrice){
        return Container(
          width: ScreenUtil().setWidth(730),
          padding: EdgeInsets.only(left:15.0),
          margin: EdgeInsets.only(top:8.0),
          child: Row(
            children: <Widget>[
              Text(
                '￥${presentPrice}',
                style:TextStyle(
                  color: Colors.pinkAccent,
                  fontSize: ScreenUtil().setSp(40),
                )
              ),
              Text(
                '市场价:￥${oriPrice}',
                style: TextStyle(
                  color: Colors.black26,
                  decoration: TextDecoration.lineThrough
                ),
              )
            ],
          ),
        );
      }
      
    }

效果展示：

![1090399-20190915214004947-1641463209.png][]

转载于:https://www.cnblogs.com/crazycode2/p/11515300.html

[1090399-20190915213303908-1448763983.png]: /images/20230601/1939f6265926472a9b82df87fd6e9679.png
[1090399-20190915213332066-1136772970.png]: /images/20230601/c36f33e17d844fd2a38ed583ff3f16c9.png
[1090399-20190915213409301-210148941.png]: /images/20230601/13faf4088139488195139e9c26780c92.png
[1090399-20190915213447623-501649756.png]: /images/20230601/23396345891d43bbaccd412b1ace6a61.png
[1090399-20190915213518032-1194011413.png]: /images/20230601/f75a8f2f641b4e83bd6c583d68ebe551.png
[1090399-20190915213548299-1476500173.png]: /images/20230601/d0a15b12654f44cebe4f6f97e149e747.png
[1090399-20190915213627252-909565786.png]: /images/20230601/c44606ff51264b68a7736c2d5288046f.png
[1090399-20190915213701329-842536177.png]: /images/20230601/7c5a6662ac1a4d9597845c574c4de4d6.png
[1090399-20190915213734679-983099791.png]: /images/20230601/6a455038ef0c46c1b3186447ace6b48a.png
[https_jspang.com_posts_2019_03_01_flutter-shop.html_E7_AC_AC44_E8_8A_82_EF_BC_9A_E8_AF_A6_E7_BB_86_E9_A1_B5-_E9_A6_96_E5_B1_8F_E8_87_AA_E5_AE_9A_E4_B9_89widget_E7_BC_96_E5_86_99]: https://jspang.com/posts/2019/03/01/flutter-shop.html#%E7%AC%AC44%E8%8A%82%EF%BC%9A%E8%AF%A6%E7%BB%86%E9%A1%B5-%E9%A6%96%E5%B1%8F%E8%87%AA%E5%AE%9A%E4%B9%89widget%E7%BC%96%E5%86%99
[1090399-20190915214004947-1641463209.png]: /images/20230601/c5189d71baf5486c9bb495630a54c67d.png