Flutter学习：目录结构、入口、自定义组件

一.flutter的目录结构

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

二.程序入口

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

void main() => runApp( MyTitle());

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

三.导入系统库

输入 fim(flutter import) 回车
import 'package:flutter/material.dart';

四. 定义main方法

import 'package:flutter/material.dart';

void main() => runApp(
    //flutter中可以省略new关键字
    new Center(child: new Text('你好flutter', textDirection: TextDirection.ltr)));

runApp方法就可以调用组件,在flutter中所有的组件都是类,flutter中可以省略new关键字

五.自定义组件

把组件写在main方法中过于臃肿，抽取成一个自定义组件。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Text(
      '你好flutter',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        // color: Color.fromARGB(244, 244, 244, 244),
        color: Colors.yellow,
        fontSize: 40.0, // flutter 中接受的所有参数都是double值
      ),
    ));
  }
}

StatelessWidget是一个抽象类代表无状态组件，flutter 中所有和数字相关的都是double类型

六.顶部组件：MaterialApp 和Scaffold 两个组件

class MyContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Scaffold(
          appBar: AppBar(
              title: Text('标题栏',
                  style: TextStyle(
                    color: Colors.yellow,
                    fontSize: 20.0, // flutter 中接受的所有参数都是double值
                  ))),
          body: new MyApp(),
        ),
        theme: ThemeData(primarySwatch: Colors.yellow)//设置主题
    );
  }
}

MaterialApp：一般作为顶层widget使用，属性有home、theme。
Scaffold：属性有appBar 、body 、sheet

写界面步骤
1.先写一个自定义控件继承StatelessWidget
2.返回MaterialApp组件

3. MaterialApp中添加 home、body 、theme 属性
4. home中添加appBar 书写标题栏，home中添加内容