美文网首页Flutter小白教程系列
Flutter简单案例初体验

Flutter简单案例初体验

作者: 程序员指北 | 来源:发表于2020-01-04 09:45 被阅读0次

    转载请注明出处: https://learnandfish.com/

    原文地址:http://learnandfish.com/2020/01/03/36.html

    引言

    本篇文章不进行Flutter和Dart的具体介绍,也不涉及具体理念,这些在后续的章节中会一一说明,本篇通过两个简单的例子展开,
    体验一下Flutter的魅力。这两个都是很经典的例子:

    • 案例1: 定义一个界面,中间有一个控件显示Hello World。经典案例,语言入门必备。
    • 案例2: 一个简单的计数器,点击按钮显示数字增加。此案例来自官网,此处以白话讲解,更利于看懂。

    案例1 -- Hello World

    • 打开Android Studio

    • 点击start a flutter project -- 选择flutter application,其他的几个我们后续会讲到。

    • 按照提示输入工程名和包名,点击finish等待编译完成,一个新的工程就创建好了

    • 接下来我们找到lib文件夹,展开之后会看到一个main.dart文件,这个文件是Android Studio自动帮我们创建的,里面就是我们要
      讲的计数器应用的实现,此时我们先不看这个,因为这个对于现在的我们来说还是太复杂,等我们自己创建完案例1再回过头来看。

    • 我们自己创建一个dart文件,命名为hello.dart。

      • 鼠标移到lib文件夹右键 -- 选择new -- 选择Dart File -- 输入hello,扩展名不用输入,Studio已经帮我们做了。
      • 我们知道一个项目必须要有入口方法,比如java的入口方法是main方法,Flutter也需要一个启动方法,也是main方法,我们先定义一个
        main方法。Dart语言定义方法和变量的基本使用我们下一篇文章具体讲解,如果此处有疑惑可以暂时不用在意,只要知道是入口方法就行。
    void main(){
         // 此处即为flutter的入口,在这里定义我们的App内容即可。
       }
    
    image.gif
    • 引入Flutter官方提供的插件包
    import 'package:flutter/material.dart';
    
    image.gif
    • 接下来我们需要定义我们的App的内容,此处我们定义一个类,继承自StatelessWidget,重写build方法。
      class MyApp extends StatelessWidget {
    
        @override
        Widget build(BuildContext context) {
          return MaterialApp( // 此处为固定写法,Flutter封装好的一个Material类型的控件,能提供给我们一个原生App的体验
            title: "Hello Flutter",
            home: Scaffold( // 默认生成一个白色的界面,类似Android的Activity
              appBar: AppBar( // App的actionBar,标题栏
                title: Text("I'm AppBar"), // 标题栏中的文字
              ),
              body: Center( // 此组件功能是使内部子组件居中,由Flutter官方提供
                child: Text("Hello World"), // 屏幕中间显示的Text,也就是我们上面想要的内容显示。
              ),
            ),
          );
        }
      }
    
    image.gif
    • 此时我们需要在我们的入口函数处添加我们定义个类MyApp,为了让MyApp显示到界面上。
    void main(){
         // 此处即为flutter的入口,在这里定义我们的App内容即可。
         runApp(MyApp());
       }
    
    image.gif
    • 连接手机或者模拟器,右击hello.dart文件,选择run hello.dart,第一次运行相对较慢,运行成功后,就能看到界面,在屏幕的中心显示“Hello World”。
    • Flutter区别于其他语言,有热重载功能(hot reload),即我们修改文件之后,ctrl+s保存,编辑器会立刻运行代码,把修改用极短的时间渲染到我们App的界面上。
    • 例如,我们修改标题栏AppBar中的title为我是为了测试热重载,然后保存ctrl+s测试一下看看喽,瞬间爱上了这种速度。
    class MyApp extends StatelessWidget {
    
        @override
        Widget build(BuildContext context) {
          return MaterialApp( // 此处为固定写法,Flutter封装好的一个Material类型的控件,能提供给我们一个原生App的体验
            title: "Hello Flutter",
            home: Scaffold( // 默认生成一个白色的界面,类似Android的Activity
              appBar: AppBar( // App的actionBar,标题栏
                title: Text("我是为了测试热重载"), // 标题栏中的文字
              ),
              body: Center( // 此组件功能是使内部子组件居中,由Flutter官方提供
                child: Text("Hello World"), // 屏幕中间显示的Text,也就是我们上面想要的内容显示。
              ),
            ),
          );
        }
      }
    
    image.gif
    • 我们看到App的标题栏上已经显示我是为了测试热重载
    • 需要注意的是Dart语言有一个单行函数,就是一个函数,如果函数体只有一行,我们可以用=>代替{},所以上面的入口函数可以改写成这样。
    void main() => runApp(MyApp());
    
    image.gif
    • 上面这样运行效果是一样的。

    案例1 -- 计数器应用

    上面我们说了计数器应用Android Studio已经帮我们生成了,我们只需要运行main.dart即可,由于生成的代码注释是英文的,为了防止
    小伙伴不开心,我用中文重新注释一下,下面放上完整的代码,运行方式是一样,代码的具体写法我们后续介绍了对应控件之后,我们再重新从
    零写出来,今天先大体看下,熟悉一下Flutter即可,更细化的学习放在后面的博客,防止学累。

    import 'package:flutter/material.dart';
    
    // 入口函数
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            // 这是应用的主题控件,定义应用的主题信息,例如状态栏颜色,背景颜色等.
            // 运行main.dart文件,你能看到一个蓝色的toolbar,中间是一个text和count计数,
            // 底部是一个蓝色的加号浮动按钮,点击按钮中间的计数加1
            // 修改primarySwatch的值为green, 按下ctrl+s,你能看到蓝色的toolbar和浮动按钮
            // 变成了绿色,没有重启App就实现了修改的加载,这就是热重载。
            primarySwatch: Colors.blue,
          ),
          // 自定义了一个页面,类似于我们上面例子写的Scaffold,只是此处抽离成了一个单独的类
          // 这样会使结构更加清晰。
          home: MyHomePage(title: 'Hello Flutter'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget { // 此处继承StatefulWidget,和StatelessWidget是对应的
      MyHomePage({Key key, this.title}) : super(key: key); // 构造方法,为什么这样写后面博客再讲。
    
      // 这个类就是我们应用的主界面
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() { // 定义一个单独的方法为了使屏幕中间的数字增加
        setState(() {
          // 此处我们先记住Flutter的控件都是一帧的,就是一旦绘制完成,就不能向android一样
          // 通过调用内部属性(如TextView.setText("text"))进行修改。后续我们会具体针对这个
          // 进行讲解,Flutter控件的刷新是怎样完成的。
          // 由于Flutter控件是一帧的,所以此处调用setState方法,会重新调用build方法重新渲染数据
          // 如果你是android开发者,你可以类似想一下自定义view的invalid方法
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        // 第一次运行的时候和每次调用setState方法的时候会走到这里
        return Scaffold( // 默认生成一个白色的界面,类似Android的Activity
          appBar: AppBar( // 界面的toolbar
            // 标题栏中的文字
            title: Text(widget.title),
          ),
          body: Center( // 此组件功能是使内部子组件居中,由Flutter官方提供
            child: Column(
              // Column组件类似于Android的LinearLayout,一个竖直方向上排列子组件的容器,
              // 也就说在该组件中的子组件都是竖直方向排列
              mainAxisAlignment: MainAxisAlignment.center, // 主轴(也就是竖直方向)居中显示
              children: <Widget>[
                // 文本组件1
                Text(
                  'You have pushed the button this many times:',
                ),
                // 文本组件2
                Text(
                  '$_counter',
                  // 文本组件的样式 大字体显示
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton( // Flutter提供的一个悬浮按钮
            onPressed: _incrementCounter, // 点击事件,对应的是我们上面的点击数字自增1方法
            tooltip: 'Increment', // 一个作用不大的提示信息,长按控件会有一个提示
            child: Icon(Icons.add), // 图片控件,一个加号图片按钮
          ),
        );
      }
    }
    
    image.gif

    相关文章

      网友评论

        本文标题:Flutter简单案例初体验

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