Flutter 目录结构介绍、入口、自定义 Widget、MaterialApp 组件、Scaffold 组件

Flutter 目录结构介绍

 

文件夹	作用
android	android 平台相关代码
ios	ios 平台相关代码
lib	flutter 相关代码，我们主要编写的代 码就在这个文件夹
test	用于存放测试代码
pubspec.yaml	配置文件，一般存放一些第三方库的依 赖。

 

Flutter 入口文件、入口方法

 

每一个 flutter 项目的 lib 目录里面都有一个 main.dart 这个文件就是 flutter 的入口文件

main.dart 里面的

 

void main(){ runApp(MyApp());
}
也可以简写
void main()=>runApp(MyApp());

其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法。 MyApp 是自定义的一个组件

Flutter 把内容单独抽离成一个组件

 

在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget 前期我们都继承 StatelessWidget。后期给大家讲 StatefulWidget 的使用。 StatelessWidget 是无状态组件，状态不可变的 widget
StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变

 

---

用MaterialApp 和 Scaffold两个组件 装饰 App、

 

1、MaterialApp

MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用。

 

常用的属性:

home(主页)

title(标题)

color(颜色)

theme(主题)

routes(路由)

...

 

2、Scaffold
Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、

snackbar 和底部 sheet 的 API。

Scaffold 有下面几个主要属性:

appBar - 显示在界面顶部的一个 AppBar。 body - 当前界面所显示的主要内容 Widget。 drawer - 抽屉菜单控件。
...

 

---

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "我是一个标题",
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loaderman'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "我是 loaderman",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 15, fontWeight: FontWeight.bold, color: Colors.black),
      ),
    );
    ;
  }
}