一、Hello World
1.1 hello world的实现
做任何的开发，我们都是从祖传的Hello World开始，那么现在我们的需求来了：
- 在界面中心位置，显示一个Hello World；
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(Text("Hello World", textDirection: TextDirection.ltr));
}
1.2 代码分析
runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的
void runApp(Widget app) {
...省略代码
}
该函数让我们传入一个东西：Widget？
Widget到底什么东西呢？
- 我们学习Flutter，从一开始就可以有一个基本的认识：Flutter中万物皆Widget（万物皆可盘）；
- 在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；
- 但是在Flutter中，这些东西都是不同的Widget而已；
- 也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；
runApp函数让我们传入的就是一个Widget：
- 但是我们现在没有Widget，怎么办呢？
- 我们可以导入Flutter默认已经给我们提供的Material库，来使用其中的很多内置Widget；
1.3 Material设计风格
material是什么呢？
- material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
- 里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
- 在Flutter中高度集成了Material风格的Widget；
- 在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；
二、完整界面结构
目前我们虽然可以显示HelloWorld，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。
- 正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等
在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。
import 'package:flutter/material.dart';
main(List<String> args) {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("CODERWHY"),
),
body: Center(
child: Text(
"Hello World",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 36),
),
),
),
)
);
}
在最外层包裹一个MaterialApp
- 这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；
- title：这个是定义在Android系统中打开多任务切换窗口时显示的标题；（暂时可以不写）
- home：是该应用启动时显示的页面，我们传入了一个Scaffold；
Scaffold是什么呢？
- 翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
- 所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
- Scaffold也有一些属性，比如appBar和body；
- appBar是用于设计导航栏的，我们传入了一个title属性；
- body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；
网友评论