ProductContent.dart

import 'package:flutter/material.dart';
import '../services/ScreenAdaper.dart';
import 'ProductContent/ProductContentFirst.dart';
import 'ProductContent/ProductContentSecond.dart';
import 'ProductContent/ProductContentThird.dart'; class ProductContentPage extends StatefulWidget {
final Map arguments;
ProductContentPage({Key key, this.arguments}) : super(key: key); _ProductContentPageState createState() => _ProductContentPageState();
} class _ProductContentPageState extends State<ProductContentPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: ,
child: Scaffold(
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: ScreenAdaper.width(),
child: TabBar(
indicatorColor: Colors.red,
indicatorSize: TabBarIndicatorSize.label,
tabs: <Widget>[
Tab(
child: Text('商品'),
),
Tab(
child: Text('详情'),
),
Tab(
child: Text('评价'),
)
],
),
)
],
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {
showMenu(
context: context,
position: RelativeRect.fromLTRB(
ScreenAdaper.width(), , , ),
items: [
PopupMenuItem(
child: Row(
children: <Widget>[Icon(Icons.home), Text('首页')],
),
),
PopupMenuItem(
child: Row(
children: <Widget>[Icon(Icons.search), Text('搜索')],
),
),
]);
},
)
],
),
body: Stack(
children: <Widget>[
TabBarView(
children: <Widget>[
ProductContentFirst(),
ProductContentSecond(),
ProductContentThird()
],
),
Positioned(
width: ScreenAdaper.width(),
height: ScreenAdaper.height(),
bottom: ,
child: Container(
color: Colors.red,
child: Text('底部'),
),
)
],
),
),
);
}
}

ProductContentFirst.dart

import 'package:flutter/material.dart';
class ProductContentFirst extends StatefulWidget {
ProductContentFirst({Key key}) : super(key: key); _ProductContentFirstState createState() => _ProductContentFirstState();
} class _ProductContentFirstState extends State<ProductContentFirst> {
@override
Widget build(BuildContext context) {
return Container(
child: Text('商品'),
);
}
}

ProductContentSecond.dart

import 'package:flutter/material.dart';
class ProductContentSecond extends StatefulWidget {
ProductContentSecond({Key key}) : super(key: key); _ProductContentSecondState createState() => _ProductContentSecondState();
} class _ProductContentSecondState extends State<ProductContentSecond> {
@override
Widget build(BuildContext context) {
return Container(
child: Text('商品详情'),
);
}
}

ProductContentThird.dart

import 'package:flutter/material.dart';
class ProductContentThird extends StatefulWidget {
ProductContentThird({Key key}) : super(key: key); _ProductContentThirdState createState() => _ProductContentThirdState();
} class _ProductContentThirdState extends State<ProductContentThird> {
@override
Widget build(BuildContext context) {
return Container(
child: Text('商品评论'),
);
}
}

Home.dart

import 'package:flutter/material.dart';
import '../../services/SearchServices.dart'; //热门推荐:
import '../../model/ProductModel.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
// import 'dart:convert';
import '../../services/ScreenAdaper.dart';
import '../../config/Config.dart';
import 'package:dio/dio.dart';
//轮播图类模型:
import '../../model/FocusModel.dart'; class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key); _HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage>
with AutomaticKeepAliveClientMixin {
//轮播图:
//flutter run -d all 链接多个设备的命令:
List _focusData = [];
List _hotProductList = [];
List _bestProductList = [];
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
void initState() {
super.initState();
_getFocusData();
_getHotProductData();
_getBestProductData(); SearchServices.setHistoryData('aaa');
} //获取轮播图数据:
_getFocusData() async {
var api = '${Config.domain}api/focus';
var result = await Dio().get(api);
var focusList = FocusModel.fromJson(result.data);
focusList.result.forEach((value) {
print(value.title);
print(value.pic);
});
setState(() {
this._focusData = focusList.result;
});
} //获取猜你喜欢的数据:
_getHotProductData() async {
var api = '${Config.domain}api/plist?is_hot=1';
var result = await Dio().get(api);
var hotProductList = ProductModel.fromJson(result.data);
setState(() {
this._hotProductList = hotProductList.result;
});
} //获取热门推荐的数据:
_getBestProductData() async {
var api = '${Config.domain}api/plist?is_best=1';
var result = await Dio().get(api);
var bestProductList = ProductModel.fromJson(result.data);
setState(() {
this._bestProductList = bestProductList.result;
});
} Widget _swiperWidget() {
// List<Map> imgList = [
// {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
// {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
// {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
// ];
if (this._focusData.length > ) {
return Container(
child: AspectRatio(
aspectRatio: / ,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
String pic = this._focusData[index].pic;
pic = Config.domain + pic.replaceAll('\\', '/');
return new Image.network(
"${pic}",
fit: BoxFit.fill,
);
},
itemCount: this._focusData.length,
pagination: new SwiperPagination(),
control: new SwiperControl(),
autoplay: true,
),
),
);
} else {
return Text('加载中~');
}
} //标题:
Widget _titleWidget(value) {
return Container(
height: ScreenAdaper.height(),
margin: EdgeInsets.only(left: ScreenAdaper.width()),
padding: EdgeInsets.only(left: ScreenAdaper.width()),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.red, width: ScreenAdaper.width()))),
child: Text(value, style: TextStyle(color: Colors.black54)),
);
} //热门商品:
Widget _hotProductListWidget() {
if (this._hotProductList.length > ) {
return Container(
height: ScreenAdaper.height(),
padding: EdgeInsets.all(ScreenAdaper.width()),
// width: double.infinity, //寬度自適應
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (contxt, index) {
String sPic = this._hotProductList[index].sPic;
sPic = Config.domain + sPic.replaceAll('\\', '/');
return Column(
children: <Widget>[
Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
margin: EdgeInsets.only(right: ScreenAdaper.width()),
child: Image.network("${sPic}", fit: BoxFit.cover),
),
Container(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
height: ScreenAdaper.height(),
child: Text(
"¥${this._hotProductList[index].price}",
style: TextStyle(color: Colors.red),
),
)
],
);
},
itemCount: this._hotProductList.length,
),
);
} else {
return Text('暂无热门推荐数据');
}
} Widget _recProductListWidget() {
var itemWidth = (ScreenAdaper.getScreenWidth() - ) / ;
return Container(
padding: EdgeInsets.all(),
child: Wrap(
runSpacing: ,
spacing: ,
children: this._bestProductList.map((value) {
//图片:
var sPic = value.sPic;
sPic = Config.domain + sPic.replaceAll('\\', '/'); return InkWell(
onTap: (){
Navigator.pushNamed(context, '/productContent',arguments: {
"id":value.sId
});
},
child: Container(
padding: EdgeInsets.all(ScreenAdaper.width()),
width: itemWidth,
decoration: BoxDecoration(
border: Border.all(color: Colors.black12, width: )),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
child: AspectRatio(
aspectRatio: / ,
child: Image.network("${sPic}", fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
child: Text(
"${value.title}",
maxLines: ,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.black54),
),
),
Padding(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"${value.price}",
style: TextStyle(color: Colors.red, fontSize: ),
),
),
Align(
alignment: Alignment.centerRight,
child: Text(
"¥${value.oldPrice}",
style: TextStyle(
color: Colors.black54,
fontSize: ,
decoration: TextDecoration.lineThrough),
),
)
],
),
)
],
),
),
);
}).toList(),
),
);
} @override
Widget build(BuildContext context) {
ScreenAdaper.init(context);
return ListView(
children: <Widget>[
_swiperWidget(),
SizedBox(height: ScreenAdaper.height()),
_titleWidget("猜你喜欢"),
_hotProductListWidget(),
SizedBox(height: ScreenAdaper.height()),
_titleWidget("热门推荐"),
_recProductListWidget()
],
);
}
}

router.dart

import 'package:flutter/material.dart';
import '../pages/tabs/Tabs.dart';
import '../pages/Search.dart';
import '../pages/ProductList.dart';
import '../pages/ProductContent.dart';
//配置路由的地方:
final routes = {
'/': (context) => Tabs(),
'/search': (context) => SearchPage(),
'/productList': (context,{arguments}) => ProductListPage(arguments:arguments),
'/productContent': (context,{arguments}) => ProductContentPage(arguments:arguments)
};
//固定写法:
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
MaterialPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
};

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. lvs+keepalived+application部署(只使用两台机器)

    目前大家用LVS+Keepalived + APP 架构都是 2台LVS +Keepalived 然后后端跟着 应用设备 然而针对小客户来说,  2台LVS平常没什么压力 还有一台备着(虽然可以跑双主 ...

  2. Error creating bean with name 'objectMapperConfigurer' defined in class path resource

  3. 开启树莓派自带的VNC功能

    前期准备 树莓派可以连接路由器或连上wifi,我用的是自己的小米路由器,目的是为了获取内网IP 工具准备 下载 vnc viewer https://www.realvnc.com/en/connec ...

  4. Windows Media Player播放视频导致程序闪退

    在有的电脑上发现,使用Windows Media Player组件播放视频导致程序闪退. 发现是显卡问题,独立显卡换成集成显卡 解决: 打开显卡控制面板->管理3D设置->集成图形-> ...

  5. BZOJ 3903 反垄断 (最大流推的结论题)

    题目 中文题目,不解释: BZOJ传送门 分析 这道题BZOJ上也只有几个人过-奇怪了 下面是正解 原问题为一个二分图边染色问题.首先考虑最好情况.最理想情况的分配为:设一个点xxx的度为dgr(x) ...

  6. 第一篇博客-MVC路由简述

    一直念叨着写博客,可是迟迟不见下笔,工作到现在,技术长进了一点,但是记的东西都很杂,也没个思路,也不知道怎么去写一遍博客,现在在做MVC,写一点跟MVC有关的吧. 我们都知道MVC程序的所有请求都是先 ...

  7. leetcode解题报告(13):K-diff Pairs in an Array

    描述 Given an array of integers and an integer k, you need to find the number of unique k-diff pairs i ...

  8. CSP-S 模拟测试94题解

    T1 yuuustu: 可以对两边取对数,然后就转化为两个double的比较,时间复杂度$O(n)$ 然后我就用神奇0.4骗分水过 #include<bits/stdc++.h> usin ...

  9. python3 操作ppt

    # pip install pywin32com# ppt太大会读取失败import win32com from win32com.client import Dispatch, constants ...

  10. java web课程管理系统开发实例(从数据库连接到代码)

    以下是几个简单知识: JavaBean:用于传递数据,拥有与数据相关的逻辑处理 JSP:从Model接收数据并生成HTML Servlet:接收HTTP请求并控制Model和View jdbc:用于配 ...