1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和…

04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart home_page.dart为了展示切换效果,所以代码比较简单.中间放个Center,center里面再放一个Text文本就可以了. 剩下的企业几个页面都做相应的复制就可以了. 分类页面 购物车页面 会员中心页面 IndexPage页面引入四个子页面 引入四个页面以后,需要定义一个List变量.把四…

03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的组件 依然叫做IndexPage 声明一个List来放我们底栏的图标啊 文件啊,List我们希望是不变的,是个常量 所以我们用Final来定义 我们再复制三个BottomNavigationBarItem元素 最终代码: import 'package:flutter/material.dart';…

关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四个dart文件. home_page.dart :商城首页UI页面,首页相关的UI我们都会放到这个文件里. category_page.dart: 商城分类UI页面,这个页面会有复杂的动态组件切换. cart_page.dart:商城购物车UI页面,这个页面会包括购物车的全套功能. member_p…

1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和…

1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重,不利于项目以后的维护工作.所以我们单独把每一个自元素导航拿出来,一个方法,返回一个组件. 代码如下: class TopNavigator extends StatelessWidget { final List navigatorList; TopNavigator({Key key, this…

1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重,不利于项目以后的维护工作.所以我们单独把每一个自元素导航拿出来,一个方法,返回一个组件. 代码如下:详细的解释可以观看视频. class TopNavigator extends StatelessWidget {  final List navigatorList;  TopNavigator(…

一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角的测试的字样.一直固定在底部 做底部的固定栏widget 新建页面:在文件夹details_page/details_bottom.dart 在布局用三个InkWell 因为都是可以点击的 加入购物车的InkWell 立即购买,复制购物车的InkWell改改就可以了. 引用这个组件 效果展示 最终代…

自动生成dart类 https://javiercbk.github.io/json_to_dart/ 生成的代码 class Autogenerated { String code; String message; List<Data> data; Autogenerated({this.code, this.message, this.data}); Autogenerated.fromJson(Map<String, dynamic> json) { code = json[…

首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(context, '/detail?id=${swiperDateList[index]['goodsId']}'); }, child: Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,), ); 展示效果…