第一步:创建Flutter应用

创建一个默认的Flutter应用后,将一下代码复制到 lib/main.dart 中

import 'package:flutter/material.dart';

//运行Flutter应用,创建了一个自己实现的Widget对象
void main() => runApp(new MyApp());

//实现的Widget类
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'),//AppBar的title
        ),
        body: new Center(
          child: new Text('Hello World'),//屏幕中间的文字
        ),
      ),
    );
  }
}

Flutter的自动化测试 python flutter编程_Text

使用Android Studio的格式化快捷键同样有效.

代码被复制进Android Studio之后,自动添加了一些注释,我们可以更清晰地看到其结构

Flutter的自动化测试 python flutter编程_flutter_02

运行新建的应用,其界面如下:

Flutter的自动化测试 python flutter编程_Text_03

官方给出的代码分析如下:

1.	本示例创建一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。 Flutter提供了一套丰富的Material widgets。

 2.	main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写。

3.	该应用程序继承了 StatelessWidget,这将会使应用本身也成为一个widget。 在Flutter中,大多数东西都是widget,包括对齐(alignment)、填充(padding)和布局(layout)

4.	Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可以很复杂。

5.	widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。

6.	本示例中的body的widget树中包含了一个Center widget, Center widget又包含一个 Text 子widget。 Center widget可以将其子widget树对其到屏幕中心。

第二步:使用外部包(package)

在这一步中,我们将使用一个名为english_words的开源软件包 ,其中包含数千个最常用的英文单词以及一些实用功能.

  1. pubspec文件管理Flutter应用程序的assets(资源,如图片、package等)。 在pubspec.yaml中,将english_words(3.1.0或更高版本)添加到依赖项列表:
  2. Flutter的自动化测试 python flutter编程_flutter_04

  3. 在Android Studio的编辑器视图中查看pubspec时,单击右上角的 Packages get,这会将依赖包安装到您的项目。您可以在控制台中看到以下内容:
  4. Flutter的自动化测试 python flutter编程_flutter_05

  5. 一直卡在这里了,也没有办法停止.然后再次点击Packages get,下方会提示:
    Waiting for another flutter command to release the startup lock…
    解决办法:
    当你的项目异常关闭,或者android studio用任务管理器强制关闭,下次启动就会出现上面的一行话,
    此时需要打开 flutter/bin/cache/lockfile,删除就行了
    或者直接用下面的命令:rm ./flutter/bin/cache/lockfile
    开启了科学上网后,再次点击Packages get, 控制台输出以下内容:
    flutter packages get
    Running “flutter packages get” in startup_namer…
    Process finished with exit code 0
    导入成功
  6. 在 lib/main.dart 中, 引入 english_words
import 'package:flutter/material.dart';
 import 'package:english_words/english_words.dart';
  1. 使用 English words 包生成文本来替换字符串“Hello World”.
Tip: “驼峰命名法” (称为 “upper camel case” 或 “Pascal case” ), 表示字符串中的每个单词(包括第一个单词)都以大写字母开头。所以,“uppercamelcase” 变成 “UpperCamelCase”

进行以下更改, 如注释部分所示:

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();//获取WordPair对象
    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'),
          child: new Text(wordPair.asPascalCase),//使用WordPair对象生成文本
        ),
      ),
    );
  }
}
  1. 如果应用程序正在运行,请使用热重载按钮 (lightning bolt icon) 更新正在运行的应用程序。每次单击热重载或保存项目时,都会在正在运行的应用程序中随机选择不同的单词对。 这是因为单词对是在 build 方法内部生成的。每次MaterialApp需要渲染时或者在Flutter Inspector中切换平台时 build 都会运行.

第三步: 添加一个 有状态的部件(Stateful widget)
Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.

Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:

  1. 一个 StatefulWidget类。
  2. 一个 State类。 StatefulWidget类本身是不变的,但是 State类在widget生命周期中始终存在.

在这一步中,您将添加一个有状态的widget-RandomWords,它创建其State类RandomWordsState。State类将最终为widget维护文本的变化。

封装一个Widget,将文本的获取转移到Widget中进行
class RandomWordsWidget extends StatefulWidget {
  @override
  createState() => new RandomWordsStatus();
}

class RandomWordsStatus extends State<RandomWordsWidget> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

使用封装好的Widget替换原来用来显示文字的Text

import 'package:english_words/english_words.dart';
import 'package:flutter/material.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('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          //child: new Text(wordPair.asPascalCase),
          child: new RandomWordsWidget(),
        ),
      ),
    );
  }
}

现在每次热加载可以看到随机生成的文字.