1.楼层标题组件 该组件非常简单,只接收一个图片地址,然后显示即可: class FloorTitle extends StatelessWidget {  final String picture_address;  FloorTitle({this.picture_address});   @override  Widget build(BuildContext context) {    return Container(      padding: EdgeInsets.all(8.0)…

15.首页_商品推荐模块编写 商品推荐,我们做成可以横向滚动的 分析: 上面是标题,下面是ListView,里面是一个Column, column分三层,第一是图片,第二是价格,第三是市场价格 小细节就是上面有个间距 解决一个之前留下的坑.超过屏幕出现黄色的警示黄条 解决方法加加一个SingleChildScrollView,让它单独滚动 最终效果: stlessW快捷键生成商品推荐的代码 因为是列表,所以接收List参数recommentList..然后传递给构造函数,这样我们就接收了一个li…

1.楼层标题组件 该组件非常简单,只接收一个图片地址,然后显示即可: class FloorTitle extends StatelessWidget { final String picture_address; FloorTitle({this.picture_address}); @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(8.0), child: Imag…

1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸,根据不同屏幕进行缩放,能满足大部分屏幕场景. github:https://github.com/OpenFlutter/flutter_ScreenUtil 这个轮子功能还不是很完善,但是也在一点点的进步,这也算是国内现在最好的Flutter屏幕适配插件了,又不足的地方你可以自己下载源码进行修改…

1.获取接口的方法 在service/service_method.dart里制作方法.我们先不接收参数,先把接口调通. Future getHomePageBeloConten() async{   try{    print('开始获取下拉列表数据.................');    Response response;    Dio dio = new Dio();    dio.options.contentType=ContentType.parse("application…

17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个String类型的参数 标题的各个边上有内边距我们先设置一下 这样我们的标题组件就写完了 楼层商品内容 然后再学些每个楼层的商品.接收一个List数组 里面的每个子项拆分成item,这里我们先写个内部方法,接收一个Map类型的goods的商品子项 这样我们的子组件就写完了 商品我们分成两行,我们先写第一…

嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:   架构图.png 好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图.gif 为了能够更好的表达出来,首页准备分成两次写完. 第一部分先实现如下的功能   Hi.World-home_top.gif 划分模块 大家都知道电商平台一般分为首页.商品分类.购物车和个人中心4个核心模块,那么我们先在app.j…

09.首页_项目结构建立和获取数据 在config下创建service_url.dart 用来配置我们后端接口的配置文件 一个变量存 接口地址,一个接口方法地址 所有后天请求数据的方法都放在这个文件夹下/lib/service文件夹 再创建serevice_method.dart文件 首先引入dio的包,再引入异步的包,再引入io的包. 最后引入service_url配置的文件 然后开始写获取首页主题内容的代码 home_page.dart页面重写 我们把请求的数据直接放在Text里面显示了.…

11.首页_屏幕适配方案讲解 国人写的屏幕适配插件: https://github.com/OpenFlutter/flutter_screenutil 最新版本是0.5.1 在pubspec.yaml文件内配置包: 引入这个包: import 'package:flutter_screenutil/flutter_screenutil.dart'; 初始化我们的设计尺寸:这里为什么尺寸是750*1334呢,因为技术胖的老板当时用的是iphone6 为了老板审图方便,就用的这个尺寸.所以我们这里…

13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 这个组件我们需要准备下数据 预览效果 最终代码 import 'package:flutter/material.dart'; import '../service/service_method.dart'; import 'package:flutter_swiper/flutter_swiper…