zm.blog

select * from learn


  • 首页

  • 标签

  • 分类

  • 归档

  • 关于

  • 搜索

Flutter入门指南(十)之手势处理和动画

发表于 2019-04-27 | 分类于 Android , Flutter | | 阅读次数:

在 Flutter 中,自带手势监听的目前为止好像只有按钮部件和一些 chip 部件,例如 Text 等部件需要实现手势监听,就需要借助带有监听事件的部件来实现了,这节我们会讲下 InkWell 和 GestureDetector 来实现手势的监听。

InkWell

在前面的一些例子中,小伙伴应该看到了好几次 InkWell 这个部件,通过它我们可以实现对一些手势的监听,并实现 MD 的水波纹效果,举个简单的一个例子

1
2
3
4
InkWell(
child: Text('点我...点我...我能响应点击手势'),
onTap: () => print('啊...我被点击了...')
),

那么当点击 Text 的时候就会响应点击事件,控制台输出日志

阅读全文 »

Flutter入门指南(九)之弹窗和提示(SnackBar、BottomSheet、Dialog)

发表于 2019-04-27 | 分类于 Android , Flutter | | 阅读次数:

前面的小节把常用的一些部件都介绍了,这节介绍下 Flutter 中的一些操作提示。Flutter 中的操作提示主要有这么几种 SnackBar、BottomSheet、Dialog,因为 Dialog 样式比较多,放最后讲好了

SnackBar

SnackBar 的源码相对简单

1
2
3
4
5
6
7
8
const SnackBar({
Key key,
@required this.content, // 提示信息
this.backgroundColor, // 背景色
this.action, // SnackBar 尾部的按钮,用于一些回退操作等
this.duration = _kSnackBarDisplayDuration, // 停留的时长,默认 4000ms
this.animation, // 进出动画
})
阅读全文 »

Flutter入门指南(八)之Sliver组件及NestedScrollView

发表于 2019-04-26 | 分类于 Android , Flutter | | 阅读次数:

上节最后留了个坑到这节来解决,因为涉及部件比较多,所以留到这边来继续讲,不然写太多了怕小伙伴看不下去

在上节最后,给小伙伴们展示了 SliveGrid 和 SliverFixedExtentList 的用法,基本上和 GridView 和 ListView 的用法差不多,所以这边就不多讲这两个部件了。

SliverAppBar

相信很多 Android 开发的小伙伴会用到 MaterialDesign 的 CollapsingToolbarLayout 来实现折叠头部,既然 Android 有的,那么 Flutter 也不会少,毕竟 Flutter 主打的也是 MaterialDesign 啊。首先看下 SliverAppBar 的源码吧,其实和 AppBar 的参数差不多,只是多了一些比较特殊的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const SliverAppBar({
Key key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace, // 通过这个来设置背景
this.bottom,
this.elevation,
this.forceElevated = false, // 是否显示层次感
this.backgroundColor,
this.brightness,
this.iconTheme,
this.textTheme,
this.primary = true,
this.centerTitle,
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.expandedHeight, // 展开的高度
// 以下三个等例子再讲
this.floating = false,
this.pinned = false,
this.snap = false,
})

别的参数应该不陌生吧,都是 AppBar 的,那么直接来看个例子吧,还是通过上节说的 CustomScrollView 来包裹 Sliver 部件

阅读全文 »

Flutter入门指南(七)之滑动部件

发表于 2019-04-26 | 分类于 Android , Flutter | | 阅读次数:

前面的小节基本上讲完了常用的部件和容器部件,也可以完成很多的界面,但是又一个问题,假如我们要显示一段文字,比如将 一段又臭又长的文字 在界面上显示 1000 次,不难完成吧

1
2
// ..省略一些无关代码
body: Text('一段又臭又长的文字' * 1000, softWrap: true)

很简单,运行到手机…「诶诶诶,**,怎么只显示了一部分,剩下的怎么画不下去」

日常开发中,会遇到很多这种情况,许多界面不是一页就能够显示完的。那么这里提下可滑动的容器部件

阅读全文 »

Flutter入门指南(六)路由

发表于 2019-04-25 | 分类于 Android , Flutter | | 阅读次数:

上一节撸了个界面,虽然比较简单,但是把前面讲的知识串联了下,但是界面之间的跳转一直没说,这节就讲下 Flutter 中的「路由」来管理界面。

1、Navigator

Flutter 通过 Navigator 来进行页面之间的跳转,分为 push 系列和 pop 系列操作,带 push 方法为入栈操作,带 pop 方法为出栈操作。Navigator 的 push 方法分两类,一类是带 Name 的,需要在 MaterialApp 下将 routers 属性进行注册,否则将会找不到该路由,还有一个是不带 Name 的,可以通过 Router 直接跳转。

说那么多相信还不如直接上代码和图来的更直接。因为需要展示所有的跳转至少需要 3 个页面,所以我们创建最简单的三个界面,通过文字来区别不同的页面,因为需要调用带有 Name 的方法,所以需要先在 MaterialApp 对路由进行注册。

阅读全文 »

Flutter入门指南(五)输入处理及登录界面实战

发表于 2019-04-25 | 分类于 Android , Flutter | | 阅读次数:

前面提到基础部件的时候,忘了提输入内容处理部件,这里补上,然后顺带撸个实际的界面吧

1、TextField

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const TextField({
Key key,
this.controller, // 定义一个 `TextEditingController` 实例,用来获取输入框内容等操作
this.focusNode, // 定义一个 `FocusNode` 实例,判断当前输入框是否获取到焦点等操作
this.decoration = const InputDecoration(), // 输入框样式,包括提醒字样,hint 等等
TextInputType keyboardType, // 输入文本类型,例如 数字,email 等等
this.textInputAction, // 键盘确认按钮的事件类型
this.textCapitalization = TextCapitalization.none,
this.style, // 文字样式
this.textAlign = TextAlign.start, // 对齐方式
this.textDirection, // 文字方向
this.autofocus = false, // 是否自动获取焦点
this.obscureText = false, // 文字是否隐藏,多用于密码
this.autocorrect = true,
this.maxLines = 1, //
this.maxLength, // 最大长度
this.maxLengthEnforced = true, // 设置最大长度后,输入内容超出后是否强制不给输入
this.onChanged, // 输入内容发生变化时候的回调
this.onEditingComplete, // 输入完毕的回调
this.onSubmitted, // 提交内容的回调
this.inputFormatters, //
this.enabled, // 是否可输入,false 不可输入
this.cursorWidth = 2.0, // 游标宽度
this.cursorRadius, // 游标半径
this.cursorColor, // 游标颜色
this.keyboardAppearance, // 该属性只在 iOS 设备有效
this.scrollPadding = const EdgeInsets.all(20.0),
this.enableInteractiveSelection,
this.onTap, // 点击事件
})
阅读全文 »

Flutter入门指南(四)常用布局

发表于 2019-04-25 | 分类于 Android , Flutter | | 阅读次数:

上节填完了 Scaffold 留下的坑,这节继续填坑,之前留下关于 Layout 的坑,又是一堆部件袭来

1、Container

为了让我们的界面更容易被扩展,通常会在最外层包裹一层 Container,其构造函数也不是很难理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Container({
Key key,
this.alignment, // child 的对齐方式,包括左对齐,居中,右对齐,左上对齐..等等
this.padding, // child 和 Container 的边距
Color color, // Container 的背景色
Decoration decoration, // 样式,可以设置背景图,圆角等属性
this.foregroundDecoration, // child 的样式
double width, // 宽度
double height, // 高度
BoxConstraints constraints, // 默认使用 BoxConstraints.tightFor,可以手动传入
this.margin, // Container 同上层容器的边距
this.transform, // 是个 Matrix4 矩阵,(嗯..这个参数基本很少用,没怎么了解 /捂脸)
this.child, // 需要展示的内容
})

// ...
const BoxConstraints.tightFor({
double width,
double height
}): minWidth = width != null ? width : 0.0,
maxWidth = width != null ? width : double.infinity,
minHeight = height != null ? height : 0.0,
maxHeight = height != null ? height : double.infinity;
阅读全文 »

Flutter入门指南(三)快速搭建界面

发表于 2019-04-25 | 分类于 Android , Flutter | | 阅读次数:

上一篇讲完 Flutter 中的一些基本部件,这篇就先填完上篇留下的没写的 AppBar 的坑,以及 Scaffold 其他参数的使用,在开始前,先补一张缩略版的脑图

阅读全文 »

Flutter入门指南(二)基础部件

发表于 2019-04-24 | 分类于 Android , Flutter | | 阅读次数:

前言

主要包括 MaterialApp、Scaffold、Text、Image、Icon、Button 以及 AppBar 部分内容,准备出发~

​ 看完这篇文章你就在知道怎么写以上效果了

阅读全文 »

Flutter入门指南(一)Dart

发表于 2019-04-24 | 分类于 Android , Flutter | | 阅读次数:

前言

最近 Flutter 真心火爆到不要不要的,随大流,学一波,在这之前,对于语言的语法还是需要有些必要的了解的,Dart 这门语言,说实话对于会 Java 这类面向对象的语言的小伙伴们来说,真的灰常灰常简单,这边我总结了一些 Dart 和 Java 的一些语法差异,当然,只是部分,但是,按照我目前的学习进度来说,了解了这些对于写 Flutter 项目绝对够了。小伙伴也可以自己查看,我这边提供一个自己学习的网址 Dart 快速入门:https://www.dartcn.com/

温馨提示:本篇文章没有图,没有图,没有图,可能会造成部分不适,请注意,请注意,请注意,系好安全带,我们要「开车了」……

阅读全文 »
1…151617…38
ZhangMiao

ZhangMiao

Android/Flutter Developer

379 日志
58 分类
143 标签
RSS
E-Mail QQ Github StackOverflow
友情链接
  • Kaisir
  • Liujianhui
  • Leo
  • Hongyang
  • Liuwangshu
  • Jspang
  • Blankj
  • WuXiaoLong
  • Molunerfinn
  • Ofind
  • Gcssloop
© 2024 ZhangMiao
由 Hexo 强力驱动
|
主题 — NexT.Gemini v5.1.4
本站访客数 人次 本站总访问量 次