Flutter02-2020 Flutter 应用介绍

参考文档链接：https://book.flutterchina.club/chapter2/first_flutter_app.html
参考视频链接：https://www.bilibili.com/video/BV1x4411j7bW?p=4

• 项目文件结构
• Flutter入口文件和入口方法
• 使用MaterialApp 和Scaffold两个组件装饰App

一、项目文件结构

┬
└ projectname
  ┬
  ├ * android      - Android部分的工程文件 （Android平台相关代码）
  ├ * build        - 项目的构建输出目录(运行项目的时候，生成的编译目录)
  ├ * ios          - iOS部分的工程文件（iOS平台相关代码）
  ├ * lib          - 项目中的Dart源文件（flutter相关代码，我们主要编写的代码，就在这个文件夹）
    ┬
    └ * main.dart  - 自动生成的项目入口文件，类似RN的index.js文件
  ├ test         - 测试相关文件（用于存放测试代码）
  └*  pubspec.yaml - 项目依赖配置文件类似于RN的 package.json （项目的配置文件：项目的名称，描述，项目所需要的各种第三方库依赖）
如：在这个文件的dependencies里面配置第三方库
之后编译他会执行flutter packages get 操作，把远程的库下载到本地，之后就可以引入了

二、Flutter入口文件和入口方法

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

接下来我们来做个练习

此行代码作用是导入了Material UI组件库。Material是一种标准的移动端和web端的视觉设计语言，Flutter默认提供了一套丰富的Material风格的UI组件。

import 'package:flutter/material.dart';

• runApp里面调用组件，所有的组件都是类。
  如中心点组件Center,实例化Center组件，里面的参数有child可以给他传入内容.(command + 左键，点击Center，可以查看这个类相关信息)

• child里面放一个文本，文本又是一个组件Text
  Text里面可以传入data 数据文本，还可以传入{里面的可选参数}

• TextDirection.ltr, 文本的显示方式是从左像右

void main(){
  runApp(new Center(
    child: new Text(
      "你好Flutter",
      textDirection: TextDirection.ltr,
    )
  ));
}

new可以省略简写

void main(){
  runApp(Center(
    child: Text(
      "你好Flutter",
      textDirection: TextDirection.ltr,
    )
  ));
}

• 通过调用内置的组件，就是类，我们完成了一个最简单的一个Flutter项目

优化

• 虽然我们实现了功能，但是把所有的组件放到runApp里面是不合理的，一个组件可能会非常大，包含很多功能。接下来我们把Center组件单独抽类成一个单独的组件 - 自定义组件

自定义组件

1. StatelessWidget 无状态组件，状态不可变的widget,StatelessWidget 是一个抽象类，里面有build的抽象方法

2. MyApp继承了StatelessWidget这个抽象类，需要实现里面的抽象方法

• 鼠标放到MyApp上，点击修复，就会自动生成buil方法，该方法返回widget这个部件/组件
• 在flutter里面所有的东西都是组件，Center,Text也是一个widget

3.接下来我们把Center组件抽类出来,放到build里面

• 自定义组件MyApp里面返回了Center这样能一个组件，这个时候就可以将MyApp传入到runApp里面
• 所有和数字相关的都是double类型,默认是px,所以传入的值，都的小数

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(
        "你好Flutter 777",
        textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 20.0,
//            color: Colors.yellow,
            color: Color.fromRGBO(244, 233, 121, 0.5)
          ),
    )
    );

  }

}


void main(){
  runApp(MyApp());
//  MyApp()实例化MyApp,重新编译
}

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

• 通过他们给App加导航和背景

• MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design 所需要的一些Widget.一般作为根组件使用.

• MaterialApp里面有属性home属性
  

• home里面我们继续传入Scaffold组件，里面才可以定义appBar 导航栏,和body
  

改造代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

   return MaterialApp(
     home:Scaffold(
       appBar: AppBar(
         title: Text('Flutter Demo')
       ),
       body: HomeContent(),
     )
   );

  }

}

//定义另外的一个组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return Center(
        child: Text(
          "你好Flutter 777",
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40.0,
            color: Colors.yellow,
//              color: Color.fromRGBO(244, 233, 121, 0.5)
          ),
        )
    );
  }
}

效果：

//theme属性 可以配置应用的颜色主题,把导航栏的背景颜色，改为黄色

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

   return MaterialApp(
     home:Scaffold(
       appBar: AppBar(
         title: Text('Flutter Demo')
       ),
       body: HomeContent(),
     ),
     theme: ThemeData(
       primarySwatch: Colors.yellow
     ),
   );

  }

}

效果：