Flutter简单案例初体验

转载请注明出处: 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