18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航
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切换 顶部下拉菜单 底部浮动导航的更多相关文章
- 19 Flutter仿京东商城项目 商品详情 底部浮动导航布局 商品页面布局
效果: widget/JdButton.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.da ...
- 20 Flutter仿京东商城项目 商品详情 底部弹出筛选属性 以及筛选属性页面布局
ProductContentFirst.dart import 'package:flutter/material.dart'; import '../../widget/JdButton.dart' ...
- 21 Flutter仿京东商城项目 商品详情 请求接口渲染数据 商品属性数据渲染
加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter ...
- 13 Flutter仿京东商城项目 商品列表筛选以及上拉分页加载更多
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 11 Flutter仿京东商城项目 商品列表页面二级筛选导航布局
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)
Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...
- 42 Flutter仿京东商城项目 修改默认收货地址 显示默认收货地址
CheckOut.dart import 'package:flutter/material.dart'; import '../services/ScreenAdapter.dart'; impor ...
- 41 Flutter 仿京东商城项目签名验证 增加收货地址、显示收货地址 事件广播
加群452892873 下载对应41课文件,运行方法,建好项目,直接替换lib目录 AddressAdd.dart import 'package:dio/dio.dart'; import 'pac ...
随机推荐
- word生成目录的pdf
在很多情况下,需要将Word转换为带目录书签的PDF,方便pdf阅读,所以可以使用word自带的pdf转换,在转换时设置相关即可 注意:待转换Word中应该有目录,可以用Word中的标题来自动生成目录 ...
- centos7防火墙相关
selinux(保护文件安全) 安全增强型 Linux(Security-Enhanced Linux)简称 SELinux,它是一个 Linux 内核模块,也是 Linux 的一个安全子系统. SE ...
- 【ecfinal2019热身赛】B题
原题: 给你一个长度为1e5的序列ai,问你它的所有子序列的最大值与最小值之差的1000次方的和是多少 即∑_{p是a的子序列}(max{p}-min{p})^1000 这题难点在于(max-min) ...
- C# 操作文件夹、文件
Form namespace FileProperties { public partial class Form1 : Form { private string currentFolderPath ...
- Tslib配置文件ts.conf介绍
Tslib 的配置文件ts.conf 是个十分重要的部分, module_raw inputmodule pthres pmin=1module variance delta=30module dej ...
- JavsScript 一些技巧方法
直接定义一个匿名函数,并立即调用: (function(){ //TODO: }()); 说明:function之前的左圆括号是必需的,如果不写这个,JavaScript解析器会试图将关键字f ...
- 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 解 只要不存在某个字母,它的 ...
- MySQL 中索引的长度的限制
单列索引的长度的限制 (5.6里面默认不能超过767bytes,5.7不超过3072bytes): 起因是256×3-1=767.这个3是字符最大占用空间(utf8).但是在5.5以后,开始支持4个字 ...
- 安装YII
吸收了其它php网站的搭建经验,没想到安装yii的时候还是状况频出 yii2 安装 http://www.yiichina.com/tutorial/324 1.下载了个yii2 advance的版本 ...
- [POI2010]MOT-Monotonicity 2
洛谷题目链接 动态规划$+$线段树 题目链接(洛谷) 首先,先要明确一点,当我们填了第$i$位时,自然下一位的符号也就出来了 那么我们可以分情况讨论: $1.$当下一位是$>$时:我们可以建一棵 ...