flutter入门

在前面总结了一篇关于flutter环境配置的文章，现在学习了一些关于flutter入门的知识，这里记录一些学习笔记。

目录结构

在vscode中使用Ctrl+shift+p新建项目后，打开项目文件夹，项目目录如下：

其中有几个文件夹需要重点关注：

• android：Android平台相关代码
• ios：iOS平台相关代码
• lib：flutter相关代码，主要是我们自己写的一些代码
• test：用于存放测试代码
• pubspex.yaml：配置文件，一般存放一些第三方的依赖

目前，就上面这些时需要我们关注的，其他的基本上暂时都用不上。

入口文件和方法

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

在新建的项目里面，main.dart文件里面是有一些基本内容的，但是，既然是自己写页面，我们就可以把这些内容都删掉，然后自己写了。

首先，要使用flutter，必须引入material.dart

import 'package:flutter/material.dart';

然后添加如下代码

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

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

一切皆组件

在flutter中，时刻需要记住一句话：一切皆组件。例如，我们要实现一个文字居中的效果，就需要使用flutter自定义的居中组件Center和文字组件Text。

import 'package:flutter/material.dart';

void main(){
  runApp(new Center(
      child: new Text(
        '这里是文本',
        textDirection: TextDirection.ltr,
        style:TextStyle(
          fontSize:25
        )
      ),
    )
  );
}

但是，由于在dart中允许我们是实例化类的时候，省略new关键字，所以，我们可以去掉上面代码中的new关键字。

另外，既然是组件化思想，那么把所以的代码都放在runApp里面，显然是不合理的，我们需要对上面的代码进行抽离。

自定义组件

在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget ：StatelessWidget 是无状态组件，状态不可变的 widget；StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变 。

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'Flutter Demo',
      home:Scaffold(
        appBar:AppBar(
          title:Text('ListView Widget')
        ),
        body:Text('ListView Text')
      ),
    );
  }
}

APP装饰组件

在上面的自定义组件中，我们使用到了MaterialApp和Scaffold两个组件，这两个组件常用来装饰APP。

MaterialApp

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

 

MaterialApp中常用属性包括：home（主页）、title（标题）、color（颜色）、theme（主题）、routes（路由）...

Scaffold

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。 主要包含以下几个属性：

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

 自定义有状态组件

StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变。通俗的讲：如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget 。