Flutter第一个App

配置好环境变量，接下来进行第一个Flutter的App项目的学习
第一步新建Flutter App项目，打开Android Studio —》New Flutter Project…
在这里插入图片描述
新建后会看到lib下有一个main.dart文件，没错这就是我们的Flutter App项目，这里我们新建一个main2.dart文件来编写新的项目
在Flutter中，几乎所有的对象都是一个Widget，与原生开发中的控件不同的是，Flutter中的widget的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector widget、用于应用主题数据传递的Theme等等。由于Flutter主要就是用于构建用户界面的，所以，在大多数时候，可以认为widget就是一个控件

Widget
StatelessWidget和StatefulWidget是flutter的基础组件，日常开发中自定义Widget都是选择继承这两者之一。也是在往后的开放中，我们最多接触的Widget：在实际使用中，Stateless与Stateful的选择需要取决于这个 Widget 是有状态还是无状态，简单来说看界面是否需要更新。
Stateless Widget
StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI，在构建过程中会递归的构建其嵌套的Widget。
BuildContext表示构建widget的上下文，它是操作widget在树中位置的一个句柄，它包含了一些查找、遍历当前Widget树的一些方法。每一个widget都有一个自己的context对象。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("标题")),
        body: Center(child: Text("hello world"),),
      ), //Scaffold
    ); //MaterialApp
  }

Stateful Widget
StatefulWidget是动态的，添加了一个新的接口createState()用于创建和Stateful widget相关的状态State，它在Stateful widget的生命周期中可能会被多次调用。

当State被改变时，可以手动调用其setState()方法通知Flutter framework状态发生改变，Flutter framework在收到消息后，会重新调用其build方法重新构建widget树，从而达到更新UI的目的。

class MyAppStateFul extends StatefulWidget {
  @override
  _MyAppStateFulState createState() => new _MyAppStateFulState();
}


class _MyAppStateFulState extends State<MyAppStateFul> {
  var data = 1;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("首页"), centerTitle: true,),
        body: RaisedButton(
          onPressed: () {
            setState(() {  //点击刷新UI
              data++;
            });
          }, child: Center(child: Text("Hello,Flutter! $data"),),),
      ),
    );
  }
}

在写Stateful 和Stateless AS提供了快捷键，直接打出steful和steless可快速生成模板代码；

State生命周期
State类除了build之外还提供了很多方法能够让我们重写，这些方法会在不同的状态下由Flutter调起执行，所以这些方法我们就称之为生命周期方法。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ///绘制界面，当setState触发的时候会再次被调用
  @override
  Widget build(BuildContext context) {
    debugPrint("build");
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("导航"),),
        body: Text("Flutter 生命周期"),
      ),
    );
  }

  ///当Widget第一次插入到Widget树时会被调用，对于每一个State对象，Flutter framework只会调用一次该回调
  @override
  void initState() {
    ///初始化
    super.initState();
    debugPrint("initState");
  }

  ///初始化时，在initState()之后立刻调用
  ///当依赖的InheritedWidget rebuild,会触发此接口被调用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    debugPrint("parent didChangeDependencies......");
  }

  @override
  void setState(fn) {
    ///更新数据
    super.setState(fn);
    debugPrint("setState");
  }

  ///当State对象从树中被移除时，会调用此回调
  @override
  void dispose() {
    ///挂起
    super.dispose();
    debugPrint("dispose");
  }

  ///当State对象从树中被永久移除时调用；通常在此回调中释放资源
  @override
  void deactivate() {
    ///销毁
    super.deactivate();
    debugPrint("deactivate");
  }

猜你喜欢