Flutter
TYYJ-洪伟
努力成为一名匠人。
展开
-
Flutter容器类Widget使用----Padding、DecoratedBox和ConstrainedBox
容器顾名思义是可以容纳其他 Widget 的,这一节我们学习Padding、DecoratedBox和ConstrainedBox。一、Padding在 Android 开发中我们给控件会设置内边距和外边距,也就是 padding 和 margin,当然父控件如果设置了 padding 实际上对子控件也会造成影响。Flutter 中 Padding 可以给其子节点添加填充。 const P...原创 2020-03-12 21:52:06 · 550 阅读 · 0 评论 -
Flutter基础Widget使用----动画图解输入框
输入框同样是UI组成的必要部分,比如常见的登陆场景,需要输入用户名和密码,多个输入框组成在一起就成了一个表单了。在 Flutter 中输入框是由 TextField Widget实现的,而表单是由 Form Widget实现的。一、TextFieldTextField用于文本输入,它提供了很多属性,下面逐一来看这些属性的含义。 const TextField({ Key key,...原创 2020-03-10 16:26:30 · 829 阅读 · 0 评论 -
Flutter基础Widget使用----动画图解线性和圆形进度条
LinearProgressIndicator 和 CircularProgressIndicator 也就是进度条 Widget,前一种为线性进度条,后一种为圆形进度条。一、LinearProgressIndicator在 Flutter 中 LinearProgressIndicator 可以实现精确进度和模糊进度。比如等待软件安装完成,我们可以使用一个模糊进度条。它继承自 Progre...原创 2020-03-09 15:51:47 · 2271 阅读 · 0 评论 -
Flutter基础Widget使用----动画图解Switch和Checkbox
Switch 和 Checkbox 分别代表开关按钮和复选框。这在 Android 开发中也是常用的控件。一、Switch创建 material 设计风格开关。Switch 非常简单,只有两种状态,要么开要么关。它继承自 StatefulWidget 。Switch 本身不保持任何状态。 相反,当 Switch 的状态更改时,Widget 将调用 [onChanged] 回调。 大多数使用 ...原创 2020-03-09 10:57:33 · 734 阅读 · 0 评论 -
Flutter基础Widget使用----Image和Icon
Image 和 Icon 都是Flutter中常用的 Widget,我们可以通过 Image Widget 来加载并显示图片,Image 的数据源可以是 asset 、文件、内存以及网络。 Icon 将图标做成字体文件,然后通过指定不同的字符而显示不同的图片。在 Android 开发中 Image Widget 类似于 ImageView,但比 ImageView 更强大,可以直接显示网络上的图片...原创 2020-03-08 20:00:44 · 1004 阅读 · 0 评论 -
Flutter基础Widget使用----动画图解Button
Button作为常用Widget之一,在路由之间跳转等很多场景都有用途。Material 组件库中提供了多种按钮组件如CloseButton、BackButton、IconButton、RaisedButton、FlatButton、OutlineButton、FloatingActionButton、MaterialButton、RawMaterialButton。一、理清Button之间的关...原创 2020-03-07 16:17:52 · 585 阅读 · 0 评论 -
Flutter基础Widget使用----Text详细解读
和当年学习Android基础控件一样,Flutter也为我们准备了一些基础Widget,如此就可以开箱即用。下面我们先来研究一下Text Widget,它绝对是开发中高频的存在。Text Widget用于显示文本,Text 继承自 StatelessWidget,它包含一些控制文本显示样式的属性。const Text( this.data, { Key key, thi...原创 2020-03-06 19:03:36 · 1418 阅读 · 0 评论 -
Flutter中布局实现:线性、弹性、流式和层叠布局
Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex,弹性布局Flex允许子组件按照一定比例来分配父容器空间。超出屏幕显示范围会自动折行的布局称为流式布局。Flutter中通过Wrap和Flow来支持流式布局。层叠布局和Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身...原创 2020-03-05 16:16:57 · 873 阅读 · 0 评论 -
Flutter中如何进行界面跳转
在android开发中界面都是对应着一个个Activity,我们通过intent从一个界面启动另外一个。路由(Route)在移动开发中通常指页面(Page),所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理。导航管理都会维护一个路由栈,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作,而路由管理主要是指如何来管理路由栈。一、小试牛刀先写一个New...原创 2020-03-03 19:18:08 · 2606 阅读 · 0 评论 -
理解Flutter Demo App
用Andorid Studio新建一个Flutter New Project后,一个Flutter Demo App就运行起来了,麻雀虽小,五脏俱全。下面是在Andorid Studio的工程结构。我们开发Flutter App在其lib目录下进行。接下来看看main.dart中的代码,篇幅原因,删除其中的注释。import 'package:flutter/material.dart';...原创 2020-02-29 21:58:56 · 963 阅读 · 0 评论