flutter笔记3:基础语法、框架、控件

Samlss 2019-06-26

flutter环境和运行环境搭建好之后,可以开始撸码了,然而当你打开VScode,在打开项目文件夹后,摆在你面前的是main.dart被打开的样子,里面七七八八的已经写好了一堆代码,是不是很懵逼?

flutter笔记3:基础语法、框架、控件

不要紧,人家官方文档上说了,flutter的玩家不需要Dart和移动端语言开发经验,只需要熟悉面向对象编程即可。
神马?面向对象也不懂?还是百度打打基础去吧。。。

先来点下酒菜

简单了解下上图中的几个标记的编号:
A. main.dart
此文件是每一个flutter项目的默认入口文件,也就是说每个flutter项目启动的时候,默认先运行这个文件的代码,这个入口文件理论上应该是可以配置的,不过我还不知道在哪配,大神请留言,嘿嘿。注意看它所在的路径,在项目根目录的lib文件下,而文件的后缀名.dart是flutter文件的格式,是不是很容易联想到flutter使用的dart语言。

B.import 'package:flutter/material.dart';
每一个.dart文件的第一行都会导入flutter/material.dart包,这个包是Flutter实现Material Design设计风格的基础包,里面有文本输入框(Text)、图标(Icon)、图片(Image)、行排列布局(Align)、列排列布局(Column)、Decoration(我也不知道是啥)、异步(%#¥@晕倒..)、动画等等等等控件,大家可以理解为网页中的按钮、标题、选项框呀等等控件库吧。

Material Design是啥?是谷歌推出的一套视觉设计语言。比如有的APP可以换皮肤,而每一套皮肤就是一种设计语言,有古典风呀炫酷风呀极简风呀神马的,而Material Design就是谷歌风,有兴趣的同学可以学习了解一下Material Design官方原版Material Design中文翻译版,这是每一个产品经理的必修教材。

C.void main() => runApp(new MyApp());
有点像ES6语法的箭头函数是不是?对学习过前端开发的同学是不是很熟悉呀,意思等同于:

void main() {
return runApp(Widget app);
}

这里的main()函数是Dart程序的入口,也就是说,Flutter程序在运行的时候,第一个执行的函数就是main()函数,结合A的入口文件,flutter项目默认执行的第一句代码,就是main.dart文件里的void main() => runApp(new MyApp());

D和E.StatelessWidgetStatefulWidget
这是flutter最基础的的两种控件类,分别叫无状态类和有状态类,两者的差别在于是否有状态,玩家创建的所有控件都继承自这两个控件。当你想展示的内容只需要改动控件本身的配置信息就可以实现时,例如文本、图片等,可以考虑使用无状态控件(StatelessWidget)。如果你想展示的内容是可以动态改变才能实现时,例如滚动列表、动画效果等,可以考虑使用有状态控件(StatefulWidget)。

其实我也不是很明白,StatefulWidget还有生命周期一说,具体怎么回事,大家可以参考何小有《Flutter框架基础》,如果你悟性好,分分钟贯通也说不定。

写一个APP试试?

前面写了一大堆废话,高手们已经不耐烦,萌新们看不懂我也不管了,撸一管官方萌新教程先~

第一步

main.dart里的代码替换成这个:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
         ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

保存之后,到终端里输入这个:

flutter doctor
flutter run

看看你的测试机都发生了什么,好了,恭喜!你的flutter人生的第一个hallo world告成~!

牢记这一点,flutter中的一切都是控件(Widget,有的文章称呼组件,就当作一个意思吧),控件是可以嵌套的,嵌套后就会形成组件树。

上面的代码可以简单看看,能懂多少是多少吧,对熟悉面向对象的同学应该没有难度。

第二步

打开文件pubspec.yaml,在这里加一句代码english_words: ^3.1.0并保存:
flutter笔记3:基础语法、框架、控件

你会看到终端有动作:
flutter笔记3:基础语法、框架、控件

再回到*main.dart文件,加一句代码import 'package:english_words/english_words.dart';
flutter笔记3:基础语法、框架、控件

这时控制台的_问题_栏也会弹出一个提示:
flutter笔记3:基础语法、框架、控件

这是flutter的一个撸码规则,为了保证代码的高效和简洁,避免引入无用的包造成程序臃肿、运行效率低下,然后我们再修改一下代码并保存:
flutter笔记3:基础语法、框架、控件

这时候APP里的Hello World变成了下面这个样子:
flutter笔记3:基础语法、框架、控件

到终端中按 r 键,在APP中发现什么变化都没有,而按 R 键,APP重启,屏幕中央的字符串随机改变了,说明APP一旦启动后,玩家创建的无状态控件实例中的属性值定义后,刷新页面不会再更新,官方的说法是无状态控件实例中的属性值为final类型,意味着一旦定义将无法变更,只有APP重启后,重新执行代码,这时候重生了控件实例,所以屏幕中央的字符串改变了,但是用 r 还是不会变。

第三步

这次来点有难度的,用到了StatefulWidget控件,请将main.dart的代码替换为:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Hello Flutter'),
        ),
        body: new Center(
          // child: new Text('Hello World'),
          // child: new Text(wordPair.asPascalCase), //asPascalCase 驼峰样式,字符串中的每个单词的首字母都会大写
              child: new RandomWords(),  //定义子控件为有状态控件RandomWords的实例
        ),
      ),
    );
  }
}
//定义了一个有状态控件,继承自StatefulWidget
class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();  //为StatefulWidget控件RandomWords定义一个状态类
}
//定义了一个状态控件,继承自状态类State<RandomWords>,<RandomWords>指明这个状态控件是RandomWords控件的
class RandomWordsState extends State<RandomWords> {
    @override
    Widget build(BuildContext context) {
      final wordPair = new WordPair.random();
      return new Text(wordPair.asPascalCase);
    }
}

保存代码后,再到终端,每按一次 r 键,APP中央的字符串就会随机改变,这就是StatefulWidget类的特性,其实例内的属性值可以在对象实例化后随意变更,一个StatefulWidget控件至少包含两个类,一个是用于实例化的StatefulWidget类,一个是它的State状态类。纯粹的StatefulWidget控件本身是不可变的,但是它的State类会在StatefulWidget控件的整个生命周期持续存在。

经过这么一折腾,我也对StatefulWidget和StatelessWidget的特性有个了一个简单的认识,不知道小伙伴们感觉如何呀,如果还有不明白的地方,请在留言中提问,flutter圈子说不定哪个大牛心情好会有解答哟。

本篇就介绍到这里,大家可以自行敲敲代码,多体验体验,从知道flutter到现在36小时,而我能写到这里,首先感谢技术达人狐神的大力支持,帮我拉来了flutter先驱何小有和一梭子前端大神,再者感谢何小有flutter圈子的入门扫盲贴投稿,也感谢大家的支持,我也就不再废话什么自我激励了,总之 加油~!

再啰嗦一句广告,对flutter感兴趣的小伙伴可以关注我,欢迎大家到Flutter圈子中投稿,也可以联系管理员加入我们的flutter微信群嗨聊,谢谢捧场~!
flutter 中文社区(官方QQ群:338252156)

相关推荐