简介
每当我们去学习一个新的语言的时候,就都是从入门的程序开始。比如我们学习 java 那么就是从 System.out.print(“Hello world”) 开始。我们学习 Flutter 也是一样。
准备工作
- 新建一个 flutter 工程,可以参考 创建Flutter工程
- 检查是否启用了
material design
在工程的根目录下的文件:pubspec.yaml
中的找到uses-material-design
并且设置为true
。有注释掉,就放开注释。
最简单的实例
代码
import 'package:flutter/material.dart';
// main 函数为程序的入口函数,类似于 java中的 main函数,只是写法不一样了。
void main() {
// 通过 runApp 的方法来执行我们的程序
// runApp 传入的参数,就是我们渲染界面的代码控件了。
runApp(new Center(child: new Text('你好,世界!', textDirection: TextDirection.ltr)));
}
图示
说明
关于 runApp()
上面的实例代码中使用了
runApp()
方法,runApp 方法接收的指定参数类型为 Widget,即:runApp(Widget)
。在 Flutter 的组件树(widget tree)中,会根据我们在 runApp 方法传入的 Widget 作为整个 App 的 根控件(root widget)。关于 Widget
本实例中,控件树(widget tree)包含两个控件:1. Center 控件使其子控件处于中间位置; 2.Text控件打印文本内容。runApp 方法强制将根控件覆盖屏幕,这意味着文本“你好,世界!”将显示在屏幕中心。
Flutter 布局的机制的核心就是在 widget。控件(Widget) 定义一个元素(Element)的配置,在Flutter框架的层次结构中处于核心层。
所有的布局 widget 都有一个child
属性(例如:Center 或 Container), 或者一个children
属性,如果他们需要一个widget 列表
(例如 Row, Column, ListView 或者 Stack) 。
创建一个 material 风格的程序
代码
import 'package:flutter/material.dart';
// main 为程序的入口 通过 runApp() 方法执行我们的 class
void main() => runApp(new MyApp());
/* 创建一个无状态的 Widget */
class MyApp extends StatelessWidget {
/*查看源码也可以知道 StatelessWidget 是一个抽象类,
由于我们是自定义的 StatelessWidget 所以需要复写 build 方法*/
@override
Widget build(BuildContext context) {
// 创建一个 material 风格的 app
return new MaterialApp(
title: 'Demo', // 设置 App 的标题
theme: new ThemeData(primaryColor: Colors.blue), // 设置主题颜色
// Scaffold 存在于 Material 库中。实现了基本的 material 布局。
// 可以使用 scaffold 实现比较复杂的布局,可以先简单理解 scaffold 为一个容器,可以在上面实现布局
home: new Scaffold(
body: new Center(
child: new Text('hello world'),
),
),
);
}
}
图示
说明
上面的例子在代码上面注释写的比较全,可以仔细看看。在这个例子中,我们使用的是 MaterialApp。从源码上可以看到 MyApp 所返回的就是一个 Scaffold。也就是说, MaterialApp 的 child 是 Scaffold Widget。对于 “无状态的Widget” 可以参看 添加应用程序交互