前言
主要包括 MaterialApp、Scaffold、Text、Image、Icon、Button 以及 AppBar 部分内容,准备出发~
看完这篇文章你就在知道怎么写以上效果了
1、Flutter runApp
新建 flutter 项目后,可以看到 lib 下的 main.dart 中 void main() => runApp(MyApp());这句就是程序的入口了。这里可以简单看下源码
1 | void runApp(Widget app) { |
首先会创建一个 WidgetsBinding 单例对象,然后把传入的 App 添加到 rootWidget中,scheduleWarmUpFrame 方法比较长,这边看下对该方法的注释第一句就能了解方法的主要功能了
Schedule a frame to run as soon as possible
「安排框架尽快运行起来」(原谅我这渣英语,只能看懂不会翻译..大概就是「快速启动框架」的意思吧)
2、Flutter App
接着看下 MyApp 这个类,继承自 StatelessWidget 并在 build 方法返回一个 MaterialApp 实例,(偷偷讲下,其实这边还可以返回 CupertinoApp,这是一个 iOS 风格的 widget,基本上你看到部件带 「Cupertino」的都是 iOS 风格的 widget,这里先不讲 iOS 风格的部件,目前 flutter 对 Cupertino 系列的 widget 支持不是很好,包括部件的广度,多语言的支持等等方面都不是很友好,所以我们还是继续看 MD 风格的 Android 部件吧~),这里先看下 MaterialApp 的构造函数,介绍一些常用的参数
1 | const MaterialApp({ |
MaterialApp 继承自 StatefulWidget,它和 MyApp 所继承的类 StatelessWidget,就是日常开发中,自定义部件通常继承的抽象类了。
- StatelessWidget 是状态不可变部件,通过其构建的部件一般用来展示固定内容,例如需要展示固定的功能按钮列表,不需要根据不同界面状态进行修改其展示内容
- StatefulWidget 是可改变状态的部件,比如我们需要通过网络或者数据库获取数据,然后修改部件锁展示的数据内容,则需要通过 StatefulWidget 来构建。当然,不是说 StatelessWidget 不能实现修改界面数据的功能,这就需要涉及到 状态管理 的概念了,后面有机会再讲,这边先埋坑【坑1】
3、Flutter Scaffold
进入 App 后就需要构建界面了,Flutter 提供了 Scaffold 来快速构建一个 MaterialDesign 风格的界面,还是先看下 Scaffold 的构造函数吧,了解几个比较常用的部分。
1 | const Scaffold({ |
来张图吧,简洁明了
了解完 Scaffold 的整体构造后,我们从上到下,通过构造函数来了解下各个 Widget的使用方法
4、AppBar
1 | AppBar({ |
在展示 AppBar 的 demo 之前,我们先学习几个基本的组件 Text、Image、Icon、Button 分布用于展示文字,图片,图标,按钮
5、Text
1 | const Text(this.data, { // Text 需要展示的文字 |
说了那么多,相信很多小伙伴都要急着撸代码了吧,接着来展示一些 Text 的示例,接下来的例子都会直接替换 HomePage 内的展示内容,其余都是相同的,接下来请关注 Text 别的部件先忽略,后面会介绍,这边先埋坑【坑2】
1 | import 'package:flutter/material.dart'; |
该部分代码查看源码 text_main.dart 文件
最后的展示效果如下图
6、Image
按照惯例,我们还是先看下 Image 的构造函数吧
1 | const Image({ |
好了好了,我知道你们又想自己写代码尝试下了,在这之前,需要你先准备一张本地图片,然后在项目的根目录,也就是 lib 文件夹同层,创建一个新的文件夹,命名为 images,把你准备好的图片放到这个目录下。放好之后打开 pubspec.yaml 把图片资源文件注册下
1 | # The following section is specific to Flutter. |
注册完成后,就可以继续愉快的撸代码了~
1 | class HomePage extends StatelessWidget { |
该部分代码查看源码 image_main.dart 文件
最后的效果如下
7、Button
Flutter 提供了各种类型的 Button 几乎是大同小异的,这边就抽取一些比较常用的展示下效果,常用的主要有 RaisedButton 、FlatButton、IconButton、OutlineButton、MaterialButton、FloatActionButton、FloatingActionButton.extended
Button 都有一个 onPress 参数,是 VoidCallback 类型的参数,通过查看源码可以知道 VoidCallback 是无参无返回值的一种类型参数。如果该参数传入的值为 null 那么这个按钮的就不可点击状态,无点击效果,等会可以在例子中查看。还有就是 child 参数,这里就是传入你需要展示的内容,比如 Text、Icon 等等。别的参数基本可以通过参数名了解,这边不扩展了(再看源码我怕你们都不想继续看下去了…)
Talk is cheap, show me the code
1 | class HomePage extends StatelessWidget { |
该部分代码查看源码 button_main.dart 部分
最终的效果图
这篇终于到末尾了,最后留了 3 个坑等以后解决
文章 demo 的地址:https://github.com/kukyxs/flutter_arts_demos_app
一个课程(当时买了想看下代码规范的,代码更新会比较慢,虽然是跟着课上的一些写代码,但是还是做了自己的修改,很多地方看着不舒服,然后就改成自己的实现方式了):https://github.com/kukyxs/flutter_shop
如果对你有帮助的话,记得给个 Star,先谢过,你的认可就是支持我继续写下去的动力~