ProductContent.dart

  1. import 'package:flutter/material.dart';
  2. import '../services/ScreenAdaper.dart';
  3. import 'ProductContent/ProductContentFirst.dart';
  4. import 'ProductContent/ProductContentSecond.dart';
  5. import 'ProductContent/ProductContentThird.dart';
  6.  
  7. class ProductContentPage extends StatefulWidget {
  8. final Map arguments;
  9. ProductContentPage({Key key, this.arguments}) : super(key: key);
  10.  
  11. _ProductContentPageState createState() => _ProductContentPageState();
  12. }
  13.  
  14. class _ProductContentPageState extends State<ProductContentPage> {
  15. @override
  16. Widget build(BuildContext context) {
  17. return DefaultTabController(
  18. length: ,
  19. child: Scaffold(
  20. appBar: AppBar(
  21. title: Row(
  22. mainAxisAlignment: MainAxisAlignment.center,
  23. children: <Widget>[
  24. Container(
  25. width: ScreenAdaper.width(),
  26. child: TabBar(
  27. indicatorColor: Colors.red,
  28. indicatorSize: TabBarIndicatorSize.label,
  29. tabs: <Widget>[
  30. Tab(
  31. child: Text('商品'),
  32. ),
  33. Tab(
  34. child: Text('详情'),
  35. ),
  36. Tab(
  37. child: Text('评价'),
  38. )
  39. ],
  40. ),
  41. )
  42. ],
  43. ),
  44. actions: <Widget>[
  45. IconButton(
  46. icon: Icon(Icons.more_horiz),
  47. onPressed: () {
  48. showMenu(
  49. context: context,
  50. position: RelativeRect.fromLTRB(
  51. ScreenAdaper.width(), , , ),
  52. items: [
  53. PopupMenuItem(
  54. child: Row(
  55. children: <Widget>[Icon(Icons.home), Text('首页')],
  56. ),
  57. ),
  58. PopupMenuItem(
  59. child: Row(
  60. children: <Widget>[Icon(Icons.search), Text('搜索')],
  61. ),
  62. ),
  63. ]);
  64. },
  65. )
  66. ],
  67. ),
  68. body: Stack(
  69. children: <Widget>[
  70. TabBarView(
  71. children: <Widget>[
  72. ProductContentFirst(),
  73. ProductContentSecond(),
  74. ProductContentThird()
  75. ],
  76. ),
  77. Positioned(
  78. width: ScreenAdaper.width(),
  79. height: ScreenAdaper.height(),
  80. bottom: ,
  81. child: Container(
  82. color: Colors.red,
  83. child: Text('底部'),
  84. ),
  85. )
  86. ],
  87. ),
  88. ),
  89. );
  90. }
  91. }

ProductContentFirst.dart

  1. import 'package:flutter/material.dart';
  2. class ProductContentFirst extends StatefulWidget {
  3. ProductContentFirst({Key key}) : super(key: key);
  4.  
  5. _ProductContentFirstState createState() => _ProductContentFirstState();
  6. }
  7.  
  8. class _ProductContentFirstState extends State<ProductContentFirst> {
  9. @override
  10. Widget build(BuildContext context) {
  11. return Container(
  12. child: Text('商品'),
  13. );
  14. }
  15. }

ProductContentSecond.dart

  1. import 'package:flutter/material.dart';
  2. class ProductContentSecond extends StatefulWidget {
  3. ProductContentSecond({Key key}) : super(key: key);
  4.  
  5. _ProductContentSecondState createState() => _ProductContentSecondState();
  6. }
  7.  
  8. class _ProductContentSecondState extends State<ProductContentSecond> {
  9. @override
  10. Widget build(BuildContext context) {
  11. return Container(
  12. child: Text('商品详情'),
  13. );
  14. }
  15. }

ProductContentThird.dart

  1. import 'package:flutter/material.dart';
  2. class ProductContentThird extends StatefulWidget {
  3. ProductContentThird({Key key}) : super(key: key);
  4.  
  5. _ProductContentThirdState createState() => _ProductContentThirdState();
  6. }
  7.  
  8. class _ProductContentThirdState extends State<ProductContentThird> {
  9. @override
  10. Widget build(BuildContext context) {
  11. return Container(
  12. child: Text('商品评论'),
  13. );
  14. }
  15. }

Home.dart

  1. import 'package:flutter/material.dart';
  2. import '../../services/SearchServices.dart';
  3.  
  4. //热门推荐:
  5. import '../../model/ProductModel.dart';
  6. import 'package:flutter_swiper/flutter_swiper.dart';
  7. // import 'dart:convert';
  8. import '../../services/ScreenAdaper.dart';
  9. import '../../config/Config.dart';
  10. import 'package:dio/dio.dart';
  11. //轮播图类模型:
  12. import '../../model/FocusModel.dart';
  13.  
  14. class HomePage extends StatefulWidget {
  15. HomePage({Key key}) : super(key: key);
  16.  
  17. _HomePageState createState() => _HomePageState();
  18. }
  19.  
  20. class _HomePageState extends State<HomePage>
  21. with AutomaticKeepAliveClientMixin {
  22. //轮播图:
  23. //flutter run -d all 链接多个设备的命令:
  24. List _focusData = [];
  25. List _hotProductList = [];
  26. List _bestProductList = [];
  27. @override
  28. // TODO: implement wantKeepAlive
  29. bool get wantKeepAlive => true;
  30. void initState() {
  31. super.initState();
  32. _getFocusData();
  33. _getHotProductData();
  34. _getBestProductData();
  35.  
  36. SearchServices.setHistoryData('aaa');
  37. }
  38.  
  39. //获取轮播图数据:
  40. _getFocusData() async {
  41. var api = '${Config.domain}api/focus';
  42. var result = await Dio().get(api);
  43. var focusList = FocusModel.fromJson(result.data);
  44. focusList.result.forEach((value) {
  45. print(value.title);
  46. print(value.pic);
  47. });
  48. setState(() {
  49. this._focusData = focusList.result;
  50. });
  51. }
  52.  
  53. //获取猜你喜欢的数据:
  54. _getHotProductData() async {
  55. var api = '${Config.domain}api/plist?is_hot=1';
  56. var result = await Dio().get(api);
  57. var hotProductList = ProductModel.fromJson(result.data);
  58. setState(() {
  59. this._hotProductList = hotProductList.result;
  60. });
  61. }
  62.  
  63. //获取热门推荐的数据:
  64. _getBestProductData() async {
  65. var api = '${Config.domain}api/plist?is_best=1';
  66. var result = await Dio().get(api);
  67. var bestProductList = ProductModel.fromJson(result.data);
  68. setState(() {
  69. this._bestProductList = bestProductList.result;
  70. });
  71. }
  72.  
  73. Widget _swiperWidget() {
  74. // List<Map> imgList = [
  75. // {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
  76. // {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
  77. // {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
  78. // ];
  79. if (this._focusData.length > ) {
  80. return Container(
  81. child: AspectRatio(
  82. aspectRatio: / ,
  83. child: Swiper(
  84. itemBuilder: (BuildContext context, int index) {
  85. String pic = this._focusData[index].pic;
  86. pic = Config.domain + pic.replaceAll('\\', '/');
  87. return new Image.network(
  88. "${pic}",
  89. fit: BoxFit.fill,
  90. );
  91. },
  92. itemCount: this._focusData.length,
  93. pagination: new SwiperPagination(),
  94. control: new SwiperControl(),
  95. autoplay: true,
  96. ),
  97. ),
  98. );
  99. } else {
  100. return Text('加载中~');
  101. }
  102. }
  103.  
  104. //标题:
  105. Widget _titleWidget(value) {
  106. return Container(
  107. height: ScreenAdaper.height(),
  108. margin: EdgeInsets.only(left: ScreenAdaper.width()),
  109. padding: EdgeInsets.only(left: ScreenAdaper.width()),
  110. decoration: BoxDecoration(
  111. border: Border(
  112. left: BorderSide(
  113. color: Colors.red, width: ScreenAdaper.width()))),
  114. child: Text(value, style: TextStyle(color: Colors.black54)),
  115. );
  116. }
  117.  
  118. //热门商品:
  119. Widget _hotProductListWidget() {
  120. if (this._hotProductList.length > ) {
  121. return Container(
  122. height: ScreenAdaper.height(),
  123. padding: EdgeInsets.all(ScreenAdaper.width()),
  124. // width: double.infinity, //寬度自適應
  125. child: ListView.builder(
  126. scrollDirection: Axis.horizontal,
  127. itemBuilder: (contxt, index) {
  128. String sPic = this._hotProductList[index].sPic;
  129. sPic = Config.domain + sPic.replaceAll('\\', '/');
  130. return Column(
  131. children: <Widget>[
  132. Container(
  133. height: ScreenAdaper.height(),
  134. width: ScreenAdaper.width(),
  135. margin: EdgeInsets.only(right: ScreenAdaper.width()),
  136. child: Image.network("${sPic}", fit: BoxFit.cover),
  137. ),
  138. Container(
  139. padding: EdgeInsets.only(top: ScreenAdaper.height()),
  140. height: ScreenAdaper.height(),
  141. child: Text(
  142. "¥${this._hotProductList[index].price}",
  143. style: TextStyle(color: Colors.red),
  144. ),
  145. )
  146. ],
  147. );
  148. },
  149. itemCount: this._hotProductList.length,
  150. ),
  151. );
  152. } else {
  153. return Text('暂无热门推荐数据');
  154. }
  155. }
  156.  
  157. Widget _recProductListWidget() {
  158. var itemWidth = (ScreenAdaper.getScreenWidth() - ) / ;
  159. return Container(
  160. padding: EdgeInsets.all(),
  161. child: Wrap(
  162. runSpacing: ,
  163. spacing: ,
  164. children: this._bestProductList.map((value) {
  165. //图片:
  166. var sPic = value.sPic;
  167. sPic = Config.domain + sPic.replaceAll('\\', '/');
  168.  
  169. return InkWell(
  170. onTap: (){
  171. Navigator.pushNamed(context, '/productContent',arguments: {
  172. "id":value.sId
  173. });
  174. },
  175. child: Container(
  176. padding: EdgeInsets.all(ScreenAdaper.width()),
  177. width: itemWidth,
  178. decoration: BoxDecoration(
  179. border: Border.all(color: Colors.black12, width: )),
  180. child: Column(
  181. children: <Widget>[
  182. Container(
  183. width: double.infinity,
  184. child: AspectRatio(
  185. aspectRatio: / ,
  186. child: Image.network("${sPic}", fit: BoxFit.cover),
  187. ),
  188. ),
  189. Padding(
  190. padding: EdgeInsets.only(top: ScreenAdaper.height()),
  191. child: Text(
  192. "${value.title}",
  193. maxLines: ,
  194. overflow: TextOverflow.ellipsis,
  195. style: TextStyle(color: Colors.black54),
  196. ),
  197. ),
  198. Padding(
  199. padding: EdgeInsets.only(top: ScreenAdaper.height()),
  200. child: Stack(
  201. children: <Widget>[
  202. Align(
  203. alignment: Alignment.centerLeft,
  204. child: Text(
  205. "${value.price}",
  206. style: TextStyle(color: Colors.red, fontSize: ),
  207. ),
  208. ),
  209. Align(
  210. alignment: Alignment.centerRight,
  211. child: Text(
  212. "¥${value.oldPrice}",
  213. style: TextStyle(
  214. color: Colors.black54,
  215. fontSize: ,
  216. decoration: TextDecoration.lineThrough),
  217. ),
  218. )
  219. ],
  220. ),
  221. )
  222. ],
  223. ),
  224. ),
  225. );
  226. }).toList(),
  227. ),
  228. );
  229. }
  230.  
  231. @override
  232. Widget build(BuildContext context) {
  233. ScreenAdaper.init(context);
  234. return ListView(
  235. children: <Widget>[
  236. _swiperWidget(),
  237. SizedBox(height: ScreenAdaper.height()),
  238. _titleWidget("猜你喜欢"),
  239. _hotProductListWidget(),
  240. SizedBox(height: ScreenAdaper.height()),
  241. _titleWidget("热门推荐"),
  242. _recProductListWidget()
  243. ],
  244. );
  245. }
  246. }

router.dart

  1. import 'package:flutter/material.dart';
  2. import '../pages/tabs/Tabs.dart';
  3. import '../pages/Search.dart';
  4. import '../pages/ProductList.dart';
  5. import '../pages/ProductContent.dart';
  6. //配置路由的地方:
  7. final routes = {
  8. '/': (context) => Tabs(),
  9. '/search': (context) => SearchPage(),
  10. '/productList': (context,{arguments}) => ProductListPage(arguments:arguments),
  11. '/productContent': (context,{arguments}) => ProductContentPage(arguments:arguments)
  12. };
  13. //固定写法:
  14. var onGenerateRoute = (RouteSettings settings) {
  15. // 统一处理
  16. final String name = settings.name;
  17. final Function pageContentBuilder = routes[name];
  18. if (pageContentBuilder != null) {
  19. if (settings.arguments != null) {
  20. final Route route = MaterialPageRoute(
  21. builder: (context) =>
  22. pageContentBuilder(context, arguments: settings.arguments));
  23. return route;
  24. } else {
  25. final Route route =
  26. MaterialPageRoute(builder: (context) => pageContentBuilder(context));
  27. return route;
  28. }
  29. }
  30. };

18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航的更多相关文章

  1. 19 Flutter仿京东商城项目 商品详情 底部浮动导航布局 商品页面布局

    效果: widget/JdButton.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.da ...

  2. 20 Flutter仿京东商城项目 商品详情 底部弹出筛选属性 以及筛选属性页面布局

    ProductContentFirst.dart import 'package:flutter/material.dart'; import '../../widget/JdButton.dart' ...

  3. 21 Flutter仿京东商城项目 商品详情 请求接口渲染数据 商品属性数据渲染

    加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展.   cupertino_icons: ^0.1.2   flutter ...

  4. 13 Flutter仿京东商城项目 商品列表筛选以及上拉分页加载更多

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  5. 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  6. 11 Flutter仿京东商城项目 商品列表页面二级筛选导航布局

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  7. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  8. 42 Flutter仿京东商城项目 修改默认收货地址 显示默认收货地址

    CheckOut.dart import 'package:flutter/material.dart'; import '../services/ScreenAdapter.dart'; impor ...

  9. 41 Flutter 仿京东商城项目签名验证 增加收货地址、显示收货地址 事件广播

    加群452892873 下载对应41课文件,运行方法,建好项目,直接替换lib目录 AddressAdd.dart import 'package:dio/dio.dart'; import 'pac ...

随机推荐

  1. word生成目录的pdf

    在很多情况下,需要将Word转换为带目录书签的PDF,方便pdf阅读,所以可以使用word自带的pdf转换,在转换时设置相关即可 注意:待转换Word中应该有目录,可以用Word中的标题来自动生成目录 ...

  2. centos7防火墙相关

    selinux(保护文件安全) 安全增强型 Linux(Security-Enhanced Linux)简称 SELinux,它是一个 Linux 内核模块,也是 Linux 的一个安全子系统. SE ...

  3. 【ecfinal2019热身赛】B题

    原题: 给你一个长度为1e5的序列ai,问你它的所有子序列的最大值与最小值之差的1000次方的和是多少 即∑_{p是a的子序列}(max{p}-min{p})^1000 这题难点在于(max-min) ...

  4. C# 操作文件夹、文件

    Form namespace FileProperties { public partial class Form1 : Form { private string currentFolderPath ...

  5. Tslib配置文件ts.conf介绍

    Tslib 的配置文件ts.conf 是个十分重要的部分, module_raw inputmodule pthres pmin=1module variance delta=30module dej ...

  6. JavsScript 一些技巧方法

    直接定义一个匿名函数,并立即调用: (function(){     //TODO: }()); 说明:function之前的左圆括号是必需的,如果不写这个,JavaScript解析器会试图将关键字f ...

  7. Codeforces Round #429 (Div. 2/Div. 1) [ A/_. Generous Kefa ] [ B/_. Godsend ] [ C/A. Leha and Function ] [ D/B. Leha and another game about graph ] [ E/C. On the Bench ] [ _/D. Destiny ]

    PROBLEM A/_ - Generous Kefa 题 OvO http://codeforces.com/contest/841/problem/A cf 841a 解 只要不存在某个字母,它的 ...

  8. MySQL 中索引的长度的限制

    单列索引的长度的限制 (5.6里面默认不能超过767bytes,5.7不超过3072bytes): 起因是256×3-1=767.这个3是字符最大占用空间(utf8).但是在5.5以后,开始支持4个字 ...

  9. 安装YII

    吸收了其它php网站的搭建经验,没想到安装yii的时候还是状况频出 yii2 安装 http://www.yiichina.com/tutorial/324 1.下载了个yii2 advance的版本 ...

  10. [POI2010]MOT-Monotonicity 2

    洛谷题目链接 动态规划$+$线段树 题目链接(洛谷) 首先,先要明确一点,当我们填了第$i$位时,自然下一位的符号也就出来了 那么我们可以分情况讨论: $1.$当下一位是$>$时:我们可以建一棵 ...