美文网首页Flutter圈子Flutter中文社区hybird
flutter笔记3:基础语法、框架、控件

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

作者: 燃烧的鱼丸 | 来源:发表于2018-03-03 00:12 被阅读776次

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

    项目默认打开的main.dart

    不要紧,人家官方文档上说了,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并保存:

    引入外部包

    你会看到终端有动作:


    引包后热更新

    再回到*main.dart文件,加一句代码import 'package:english_words/english_words.dart';

    引入的包从未使用过

    这时控制台的问题栏也会弹出一个提示:

    不好好利用引入的包的后果

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


    字符串的驼峰格式化

    这时候APP里的Hello World变成了下面这个样子:

    好不好玩呀

    到终端中按 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)

    相关文章

      网友评论

      • e18c920ab162:viewpager 页面切换的时候页面会重新创建,这个怎么处理
        燃烧的鱼丸:所有的页面切换都会重绘,现在没有直接解决的办法
      • 海i心kb:请问大佬,用vscode是不是只能进行真机测试。没有as的那种模拟器
        燃烧的鱼丸:@海i心kb 如果你安装了模拟器,vscode也可以用命令打开模拟器的
      • longzekai:文中A 的入口是可以 更改的,就在运行的Configurations 里面可以配置。而且文件路径也是可以随意的。
        若邪:麻烦请问一下,这个运行的Configurations文件在哪里可以找到,我找了一下没找到

      本文标题:flutter笔记3:基础语法、框架、控件

      本文链接:https://www.haomeiwen.com/subject/ewkzxftx.html