【Flutter手摸手教学】03 Flutter main.dart详细说明

上一次我们创建了一个最简单的Flutter App，在第一个页面上显示了一个你好，Flutter文字。今天我们来详细说一下里面的每一行代码。

一、打开lib\main.dart

二、代码详细说明

1. 导包

//导入material.dart，material.dart是Android风格的UI组件库，同样还有ios风格的UI组件库
import 'package:flutter/material.dart';

2. 入口main函数

//main方法是整个app的入口
void main() {
    //runApp传入一个Widget当作参数
    runApp(MyApp());
}

3. Widget介绍 关于widget我从网上找到了一段话

   Widget 描述了在当前的配置和状态下视图所应该呈现的样子。当 widget 的状态改变时，它会重新构建其描述（展示的 UI），框架则会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

简单点来说，Flutter中所有东西都是Wdiget，例如一段文本，一个按钮，一张图片等等。

三、build方法是执行widget渲染的地方，所有的widget通过组合嵌套之后，通过build方法return给系统。

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Hello Flutter',
     home: Scaffold(
       body: Center(child: Text("你好，Flutter")),
     ),
   );
 }
} 

四、widget介绍

1. MaterialApp是系统提供的一个根Widget，它是title，home等语义化的属性组合起来的。每个flutter 项目的入口都应该是一个MaterialApp。
2. Scaffold是flutter提供的一个脚手架widget。内部设置的appbar，body，drawer，bottomNavigationBar等等属性用来帮助你快速搭建一个UI出来。

五、总结 到这里main.dart中的全部内容都简单介绍了一边。下一节讲一下flutter中的UI布局和常用组件，并完成一个简单的Demo。