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

视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#toc-4df 新建pages页面里面新建:home_screen.dart 内容比较简单 分别复制三个dart组件出来.然后分别改改名字即可, 里面的内容分别做下修改 引用四个页面: 动态的组件就是要维护他的state 重写初始化状态的方法:initState方法 重写之前 现在上面声明 两个变量…

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.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…

电商平台有个具备的左侧商品类目的导航栏的结构. 通过jsonp跨域访问电商平台的后台管理系统商品分类.(主要实现后台Java代码) 实现基本步骤: 1.在后台管理系统中准备相应的json数据. pojo: public class ItemCatData { @JsonProperty("u") private String url; @JsonProperty("n") private String name; @JsonProperty("i"…

一直悬浮在最下面的 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[…