Flutter学习之入门程序HelloWorld

简介

每当我们去学习一个新的语言的时候，就都是从入门的程序开始。比如我们学习 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)));
}

图示
hello world

说明

关于 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” 可以参看添加应用程序交互

Flutter学习之入门程序HelloWorld

简介

准备工作

最简单的实例

创建一个 material 风格的程序

猜你喜欢