Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑。
主要是介绍了 flutter 环境的搭建、如何创建 flutter 项目以及如何在旧有 android 项目引入 flutter。
这一篇我们来学习下 flutter 的 ui。
前言
说到 ui,我就简单说下 flutter 作为一门跨平台语言具有的优势之一,提高效率吧。
举个例子:
假设现在要开发一个界面,android 开发需要一天,ios 开发也需要一天。那么就是两天。
如果你用 flutter 开发,就只需要一天(因为 android 和 ios 都可以共用一套 flutter 代码)。这样效率自然就提高了。
另外,假设后面产品发现界面有个位置需要调整,如果是 android 或者 ios 单独开发,则两个端都需要进行额外调整。
而 flutter 就一套代码而已,所以相较之下 flutter 更易维护。
官网关于 ui 的介绍 user interface
这边笔者按照自己的感受和认识进行说明。
读者看完之后有了个基本的认识,后续不管是阅读官方文档还是使用搜索引擎搜索相关问题,相信会事半功倍。
记住一句话:
flutter 里面一切皆 widget。
目录
1. 基本配置
我们紧接之前文章,现在进入 myapp/sub/my_flutter 位置。
打开 main.dart。如果提示下图:
dart support is not enabled for the project
我们点击右边第一个(enabled dart support)或者第二个(open dart settings)都是 ok 的。
如果点击第二个,需要配置 dart 的目录。
dart 的目录在 flutter 的 bin 目录下面的 cache 目录下面。
举个例子,笔者的 flutter bin 目录(terminal 执行which flutter)为/users/nesger/desktop/nesger_folder/flutter/flutter/bin/,那么 dart 目录就在/users/nesger/desktop/nesger_folder/flutter/flutter/bin/cache/dart-sdk。
然后直接拷贝下面代码替换 main.dart 的代码。
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home: scaffold( appbar: appbar( title: text('my flutter'), ), body: center(), ) ); } }
实际编译器可能会显示如下图,就是会有注释显示每个控件。
这有好处也有坏处。好处就是你可以看到哪一块是哪一个 widget。坏处就是视觉干扰。
这个是自动产生的,不可删除。
可以通过如下操作控制是否显示:
android studio->preferences->editor->general->appearance
2. main.dart 学习
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home: scaffold( appbar: appbar( title: text('my flutter'), ), body: center(), ) ); } }
执行 flutter run 运行后可以看到下图:
对比上面代码可看到顶部蓝色区域是 appbar 这个 widget 来控制的。
你可以自行修改 text 里面的内容然后按 r 键通过热重载看下效果。
我们可以看到,flutter 里面的 dart 代码一个比较明显的地方就是一个 widget 套着一个 widget,有点树形的样子。
比如这里
我们尝试把 appbar 去掉,可以看到界面显示就是一片纯白的界面。
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home: scaffold( body: center(), ) ); } }
那么这里的 materialapp widget 是不是必需的呢?
其实 materialapp 说明这个界面是按照 material design 的风格。
我们看下如果去掉会怎样?
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget { @override widget build(buildcontext context) { return scaffold( body: center(), ); } }
所以说 scaffold 这个 widget 不能直接返回,我们需要给它外面套一层 materialapp。
可以看下这个链接:https://github.com/nesger/flutternote/issues/4
我们返回之前的状态,然后给他加一个 hello world,看下怎样?
我们知道,flutter 一切皆 widget,所以需要显示 hello world,就需要 widget。
widget 可以通过这个链接查看:https://flutter.io/docs/development/ui/widgets
可以看到 text 这个 widget
点击进入
再点击进入,可以看到介绍以及 sample。
大家以后如果要看其他 widget 也可以按照同样的方式学习。
当然如果时间要求比较紧的话,大家学完博客可以直接在搜索引擎输入关键字看下别人的 sample,然后化用一下就没问题啦。
我们点击右边复制,然后简单修改如下:
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home: scaffold( body: center( child: text( 'hello world!', textalign: textalign.center, overflow: textoverflow.ellipsis, style: textstyle(fontweight: fontweight.bold), ), ), ), ); } }
可以看到我们将其放到 center 这个 widget 里面,表示居中,同时作为它的一个 child。
大家可以试下去掉 center 会怎样,直接将 text 作为 body,如下:
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home: scaffold( body: text( 'hello world!', textalign: textalign.center, overflow: textoverflow.ellipsis, style: textstyle(fontweight: fontweight.bold), ), ), ); } }
可以想象应该是不居中的。
到了这里你应该可以发现,我们整个页面其实是 body 对应的 widget 来控制的。
上面我们的例子都是 materialapp,是不是一定只能这个 widget 在最外层?
不是的,只是这里 scaffold 跟它配对而已,我们可以修改如下:
import 'package:flutter/material.dart'; void main() => runapp(myapp()); class myapp extends statelesswidget { @override widget build(buildcontext context) { return center( child: text( 'hello, world!', textdirection: textdirection.ltr, textalign: textalign.center, overflow: textoverflow.ellipsis, style: textstyle(fontweight: fontweight.bold), ), ); } }
注意多了一行textdirection: textdirection.ltr,没有会报错。
3. 以 text 为例子初窥 widget 写法
我们点进去 text 源码看下,
对比一下上面我们的代码:
text( 'hello, world!', textdirection: textdirection.ltr, textalign: textalign.center, overflow: textoverflow.ellipsis, style: textstyle(fontweight: fontweight.bold), )
我们可以这样认为,括号里面的是待传入参数。其中没有花括号{}包裹的是必填项,有花括号{}的是选填项。
有花括号{}的在传入参数时需要指定参数,格式为参数:值。不同参数之间逗号分隔。
所以我们可以猜测上面 center 下面的 child 应该是在花括号里面。所以才会有上面的写法,我们跟进去源码看看。
确实跟我们猜的一样。而且由于参数的类型是 widget,所以可以传 text 也是没问题的。
所以到这里你再回顾一下上面是不是就知道上面代码的写法了呢?
总结
由于 flutter ui 内容比较多,讲起来篇幅会比较大。
所以我们会拆分成几篇文章进行讲解。
回顾一下,本篇文章主要讲解如下内容:
- dart sdk 配置和 dart 源代码括号后面编译器提示的显示和隐藏。
- 通过 main.dart 的修改初步熟悉 flutter 界面的写法。
- 通过 text 说明如何在官方文档上面查找控件和对应 sample。
- 通过一个具体的小控件 text 初窥 flutter widget 的写法和使用方法。
小彩蛋
这个彩蛋是微信群里一个小伙伴说到的。这里分享给大家。
简单说就是设置 android studio 的背景图。
先上图
大家觉得哪种更加赏心悦目呢?
可以根据自己的喜好确定是否设置。
设置方法为
其中 opacity 是不透明度。
0 表示完全透明,跟没设置一样。100 表示完全不透明。
一般默认即可。
背景图公众号回复「asbg」获取。
更多阅读:
flutter 即学即用系列博客——01 环境搭建
flutter 即学即用系列博客——02 一个纯 flutter demo 说明
flutter 即学即用系列博客——03 在旧有项目引入 flutter
上一篇: 仿人脑云计算落地上海
推荐阅读
-
Flutter 即学即用系列博客——04 Flutter UI 初窥
-
Flutter 即学即用系列博客——01 环境搭建
-
Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
-
Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
-
Flutter 即学即用系列博客——06 超实用 Widget 集锦
-
Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
-
Flutter 即学即用系列博客——04 Flutter UI 初窥
-
Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
-
Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考