![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
flutter
wanxiaofan
看着你快乐的讲述你的故事,我替你陷入了深深的思考!
展开
-
Flutter 之ListView实现下拉刷新和上拉加载更多
一、效果二、实现 1、首先的创建ListView,之前有叙述 2、如果你是只需要下拉刷新,则直接用 RefreshIndicator包裹ListView,然后去实现onRefresh方法即可 3、如果你还需要加载更多,则需要实现ScrollController然后去监听他的滑动事件,然后判断是否到达底部三、源代码class StarPage extends StatefulWidget { const StarPage({Ke...原创 2021-09-01 16:50:26 · 1911 阅读 · 0 评论 -
Flutter之使用GridView实现网格布局
一、效果二、实现 1、创建GridView.count为body子元素 2、设置crossAxisCount设置列数 3、设置children即为每个子View三、源码class UserPage extends StatefulWidget { const UserPage({Key key}) : super(key: key); @override _UserPageState createState() =&g...原创 2021-09-01 13:56:52 · 342 阅读 · 0 评论 -
Flutter之实现可折叠的列表
一、介绍 1、使用flutter自带组件ExpansionTitle实现 2、ExpansionTitle属性介绍const ExpansionTile({ Key key, this.leading, //标题左侧需要展示的Widget @required this.title, //要展示的标题Widget this.subtitle, this.backgroundColor, //背景 t...原创 2021-09-01 13:24:06 · 3936 阅读 · 0 评论 -
Flutter之ListView实现水平和垂直滚动
一、效果就和正常的列表控件滑动一样二、实现 1、创建ListView组件,因为里边需要传入一个List的Widget这个就是我们的组件 2、ListView默认是垂直滑动的,如果你的需要的就是垂直滑动不用做任何处理直接填充数据即可 3、准备数据源,填充ListView实现就能实现滑动 4、如果你需要把垂直数据源变为水平的那么修改ListView的scrollDirection: Axis.horizontal 5、...原创 2021-09-01 11:18:36 · 2124 阅读 · 1 评论 -
Flutter之Json解析和数据转换
1、如何选择Json序列化方式? 如果项目较小手动序列化即可 如果项目比较大,可使用插件json_serializable和built_value2、如何序列化? flutter的convert,Map<String, dynamic> test = jsonDecode(jsonStr); 使用插件看对应得例子即可3、复杂Json解析? 写对应的实体解析类即可4、提升效率在线转换JSON...原创 2021-08-31 18:25:18 · 463 阅读 · 0 评论 -
Flutter 异步之Future与FutureBuilder
1、什么事Future? 表示在某个时间的值或者错误,借助Future我们可以实现Flutter的异步操作,类似ES6中的Promise,提供then和catchError的链式调用。 它是dart:async包中的一个类,使用时需导入dart:async包,它有两种状态:pending(执行中)和completed(执行结束)2、Future常见用法? 使用future.then获取future的值与捕获的异常 组合async,a...原创 2021-08-31 17:59:46 · 305 阅读 · 0 评论 -
Flutter之实现顶部导航栏颜色渐变
首先看效果一、用到的组件及作用Stack(实现堆叠效果)、MediaQuery(移除状态栏顶部内填充)、NotificationListener(监听滑动)、Opacity(透明度渐变控件)二、实现 1、首先因为appbar是盖在内容上的,所以根布局就是Stack布局 2、因为要移除内容的padding实现侵入式效果,所以需要使用 MediaQuery.removePadding且设置removeTop为true3、因为要监听...原创 2021-08-31 16:50:07 · 2376 阅读 · 0 评论 -
Flutter之Banner实现
一、首先在yaml中导入 flutter_swiper: ^1.1.6组件二、在body中使用Swiperclass HomePage extends StatefulWidget { HomePage({Key key, this.title}) : super(key: key); final String title; @override _HomePageState createState() => _HomePageState();}class _H..原创 2021-08-31 15:47:32 · 305 阅读 · 0 评论 -
Flutter 之Tab切换效果
1、点击tab实现自由切换页面一、首先在Flutter中一切皆组件,万物皆组件,都可以用组件来表达1、创建一个Flutter界面class MainPage extends StatelessWidget { const MainPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return TabNavigator(); }}2、在创...原创 2021-08-31 14:12:04 · 3753 阅读 · 0 评论