第一个flutter程序(一)

590 阅读4分钟

第一个flutter程序

1.创建初始化工程

在使用Android Studio创建flutter项目之后,将lib中的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: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

编译运行之后会在屏幕中央显示出hello,如图所示:

观察整个程序,可以发现:

  1. 主函数main使用了=>符号,这是Dart中单行函数的简写。
  2. 该程序继承了StatelessWidget,这使得应用也成为了一个widget。在flutter中,大部分都是widget,包括对齐(alignment)、填充(padding)和布局(layout)。
  3. Scaffold是Material library中的一个widget,它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。widget树可能很复杂。
  4. 一个widget的主要工作是提供一个build()方法来描述如何根据其他较低级的widgets来显示自己。
  5. 本例中body里包含了一个Center widget,Center widget中又包含着一个Text widget,Center widget 可以将其子 widget 树对其到屏幕中心。

2.使用package

本节将会在之前程序的基础之上引入一个english_word库。 english_words是一个开源软件包,其中包含数千个最常用的英文单词以及一些实用功能。

首先需要在pubspec.yaml 中,将 english_words(3.1.0或更高版本)添加到依赖项列表。==pubspec 文件管理 Flutter 应用程序的 assets(资源,如图片、package等)。==

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  english_words: ^3.1.5

添加依赖之后,在前一节的main.dart中引入english_words包:

import 'package:english_words/english_words.dart'; 

引入包之后,使用english_words生成的文本将前一节中的“Hello”进行替换。更改后的代码如下:

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('Welcome to Flutter'),
        ),
        body: new Center(    // 这里把之前的 "const" 换成了 "new".
          //child: const Text('Hello World'),   // 我们不用这样的方式生成文字了
          child: new Text(wordPair.asPascalCase),  // 这是新的文字生成方式
        ),
      ),
    );
  }
}

如果没有把 Center 前面的修饰词从 const 改成 new 的话,系统就会报错,因为这个时候它的子对象已经不是常量,那就不能再用 const 了,所以这里 Center 和 Text 都需要使用 new 创建新的实例。

如果应用程序正在运行,请使用热重载按钮 (闪电图标) 更新正在运行的应用程序。每次单击热重载或保存项目时,都会在正在运行的应用程序中随机选择不同的单词对。 这是因为单词对是在 build 方法内部生成的。每次 MaterialApp 需要渲染时或者在 Flutter Inspector 中切换平台时 build 都会运行.

新的程序界面如图:

3.添加一个Stateful Weight

之前写的widget都是Stateless widgets,它们的属性都是不可变的————所有的值都是final。

Stateful widgets持有的状态可能会在widget生命周期内发生变化。

实现一个Stateful widget至少需要两个类:

  1. 一个StatefulWidget类
  2. 一个State类

StatefulWidget类本身是不变的,但State类在widget生命周期内始终存在。

本节中,将添加一个 stateful widget(有状态的控件)—— RandomWords,它会创建自己的状态类 —— RandomWordsState,然后你需要将 RandomWords 内嵌到已有的无状态的 MyApp widget。

第一步,创建一个最简单的state类,这个类,这个类可以创建在任意地方,不一定放在MyApp下面。

class RandomWordsState extends State<RandomWords>{

}

注意一下 State<RandomWords> 的声明。这表明我们在使用专门用于 RandomWords 的 State 泛型类。应用的大部分逻辑和状态都在这里 —— 它会维护 RandomWords 控件的状态。这个类会保存代码生成的单词对,这个单词对列表会随着用户滑动而无限增长,另外还会保存用户喜爱的单词对(第二部分),也即当用户点击爱心图标的时候会从喜爱的列表中添加或者移除当前单词对。

RandomWordsState 依赖 RandomWords,我们接下来会创建这个类。

添加有状态的RandomWords widget 到 main.dart,RandomWords widget 除了创建 State 类之外几乎没有其他任何东西:

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

在添加状态类后,IDE会提示该类缺少 build 方法。接下来,我们将添加一个基本的 build 方法,该方法通过将生成单词对的代码从 MyApp 移动到 RandomWordsState 来生成单词对。

  1. 将bulid