Flutter入门02 -- Flutter开始

Flutter项目的创建

• 创建Flutter项目通常由两种方式：
  • 通过命令行创建，终端执行flutter create xxx
  • 通过开发工具创建，例如Android Studio；

Hot Reload 与 Hot Restart

• 运行一个Flutter项目的方式有：
  • 冷启动：一切从零开始，启动过程很慢；
  • 热启动即Hot Reload：最主要是执行build方法，启动非常快，快捷键为：command + \；
  • 热重启即Hot Restart：重新运行整个App，快捷键为：command + shift + \；

Widget

• 基本认识：在Flutter中万物皆为Widget；
• 在iOS或Android开发中，所涉及到的Application，View Controller，Activity，View，UI控件等等这些元素，在Flutter中都是不同的Widget，也就是说在Flutter整个应用程序中，我们所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来实现；
• Flutter入口main函数，执行void runApp(Widget app)函数，此函数是在Flutter系统库material.dart中，需要提供一个Widget参数，我们可以传入material.dart库中定义的Widget；
• 在Flutter中Widget可分为有状态的和无状态的：
  • StatefulWidget：有状态的Widget，需要保存状态，并且可能出现状态的改变；
  • StatelessWidget：无状态的Widget，这种Widget仅仅是做一些展示的工作而已；

StatelessWidget

• StatelessWidget无状态；
• 其数据通常是直接写死的，放在StatelessWidget中的数据，必须定义为final；
• 从parent Widget中传入的 而一旦传入就不可以修改；
• 继承自StatelessWidget的Widget子类，必须实现build方法，因为StatelessWidget是一个抽象类；
  • Flutter在拿到我们自己创建的StatelessWidget时，就会执行build方法，我们需要在build方法中告诉Flutter，我们的Widget需要渲染什么元素；
  • StatelessWidget不会主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；
• build方法在以下情况下会被执行：
  • 当我们的StatelessWidget第一次被插入到Widget树中时，也就是第一次被创建时；
  • 当我们的父Widget发生改变时，子Widget会被重新创建；
  • 如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；

main函数自定义入口Widget

import 'package:flutter/material.dart';

main(){
  //1.runApp函数 在flutter/material.dart系统库中
  runApp(
    Center(
      child: Text(
        "Hello World!!!",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 30,
            color: Colors.orange
        ),
      ),
    )
  );
}

• main函数中必须调用void runApp(Widget app) ；
• Center是一个Widget，Text也是一个Widget；

MaterialApp

• Material是Google公司推行的一套设计风格，里面有很多的设计规范，比如颜色，文字的排版，响应动画与过度，填充等等；
• 在Flutter中高度集成了Material风格的Widget；
• 在我们的应用中，我们可以直接使用这些Widget来创建我们的应用；

import 'package:flutter/material.dart';

main(){
  //1.runApp函数 在flutter/material.dart系统库中
  runApp(
    MaterialApp(
      home: Center(
        child: Text(
          "Hello World!!!",
          textDirection: TextDirection.ltr,
          style: TextStyle(
              fontSize: 30,
              color: Colors.orange
          ),
        ),
      ),
    )
  );
}

• MaterialApp是一个Widget，即具有Material设计风格的Widget；
• 案例代码：

import 'package:flutter/material.dart';

main(){
  //1.runApp函数 在flutter/material.dart系统库中
  runApp(
    MaterialApp(
      //去除右上角的debug标签
      debugShowCheckedModeBanner: true,
      home: Scaffold(
        appBar: AppBar(
          title: Text("第一个Flutter程序"),
        ),
        body: Center(
          child: Text(
            "Hello World!!!",
            textDirection: TextDirection.ltr,
            style: TextStyle(
                fontSize: 30,
                color: Colors.orange
            ),
          ),
        ),
      )
    )
  );
}

• debugShowCheckedModeBanner: false：可去除右上角的debug标签；
• Scaffold俗酥称为脚手架，可选参数appBar设置页面导航栏，可选参数body设置页面主体内容，界面效果如下：
  image.png

代码重构

• 上述代码重构如下：

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

///组件化开发
class SFMyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      //去除右上角的debug标签
        debugShowCheckedModeBanner: false,
        home: SFHomePage()
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("第一个Flutter程序"),
      ),
      body: SFContentBody()
    );
  }
}

class SFContentBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        "Hello World!!!",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 30,
            color: Colors.red
        ),
      ),
    );
  }
}

• 将整个App的元素，分别抽取出来，定义成单独的Widget，例如App，首页，首页的主体内容，代码的结构变得更加清晰，属于组件化的思想；
• 抽取出来的元素 全部都继承自StatelessWidget，可以看出所有的元素都可看成Widget，即万物皆为Widget；

项目案例

• @require：是一种注解，表示命名可选参数是必须要传参的；
• StatelessWidget与StatefulWidget均继承自Widget，而abstract class Widget extends DiagnosticableTree是@immutable即不可变的，那么在Widget内部定义变量是错误的；
• 如果要监听Widget中的状态数据，要创建StatefulWidget，在StatefulWidget也是不能定义变量的，这时引入一个继承自State的子类，即状态管理类，在状态管理类中我们可以定义变量，记录Widget的状态数据变化；

import 'package:flutter/material.dart';

main() => runApp(SFMyApp());

///组件化开发
class SFMyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      //去除右上角的debug标签
        debugShowCheckedModeBanner: false,
        home: SFHomePage()
    );
  }
}

class SFHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("第一个Flutter程序"),
      ),
      body: SFContentBody()
    );
  }
}


///可以创建状态管理类 来管理状态
class SFContentBody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
     return SFContentBodyState();
  }
}

///这里可以定义状态
class SFContentBodyState extends State<SFContentBody> {
  //用来记录Checkbox的选中状态
  var flag = true;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(
            value: flag,
            onChanged: (value){
              setState(() {
                flag = value;
              });
            },
          ),
          Text(
            "同一协议",
            style: TextStyle(
              fontSize: 20
            )
          )
        ],
      ),
    );
  }
}

• SFContentBodyState：继承自State，专门用来管理SFContentBody这个组件的状态的；
• 最终实现的效果如下：

image.png