重学flutter第三天

前两天学习了flutter的项目初始化和dart的基础语法，今天学习flutter的widget，类似于react的组件，flutter的widget分为两类，StatelessWidget和StatefulWidget,无状态组件和有状态组件。并且发flutter的widget可以嵌套，分为父widget和子widget。

 

在 Flutter 中，根Widget 只能是以下三个： WidgetsApp 是可以自定义风格的 根Widget。 MaterialApp 是在 WidgetsApp 上添加了很多 material-design 的功能，是 Material Design 风格的 根Widget。 CupertinoApp 也是基于 WidgetsApp 实现的 iOS 风格的 根Widget。这三个中最常用的是 MaterialApp，因为 MaterialApp 的功能最完善。MaterialApp 经常与 Scaffold 一起使用。MaterialApp 大部分情况下要作为 Flutter 的 根Widget，并且 MaterrialApp 经常和 Scaffold 搭配一起使用

 

StatelessWidget的使用，StatelessWidget没有状态，可以理解为没有state的react组件，使用StatelessWidget分为两个步骤：

1、首先生命的组件继承StatelessWidget;

2、构造一个返回Widget的build，build类似render函数，内部返回一个Widget，用@override重写build。

代码如下：

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp("Hello World"));

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final String content;

  MyApp(this.content);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Text(content),
        ),
      )
    );
  }
}

 

代码中有一点不是很明白，定义的常量content是做什么的，MyApp(this.content)这句是什么意思？build的参数部分使用了声明语法，声明了参数context的类型为BuildContext。

 

按照我的理解声明的content是实例的属性，这个属性的值通过参数来传递，而MyApp(this.content)是一种简写方法，这句话应该等价于his.content=MyApp的第一个参数。

 

MaterialApp的参数为命名参数，分别为title，theme，home，title的值为字符串，theme和home的值都比价特殊，是特定配置，这里是函数调用，ThemeData函数调用，传递参数primarySwatch其值为：Colors.blue,Scaffold的参数是body，body的值为一个函数Center，Center的参数是函数Child，Child的参数为Text函数，Text函数的参数为Content。

 

可以看到上面简简单单的一个无状态组件在使用时调用了这么多的函数，因为函数可以返回任何值，注意这种用法，这应该在flutter中很常见。

 

MyApp(this.content)是构造函数的一种简写方式，案例如下：

 

class Point {
  num x, y;

  Point(num x, num y) {
    // There's a better way to do this, stay tuned.
    this.x = x;
    this.y = y;
  }
}

 

可以改写为：

 

class Point {
  num x,y;
  Point(this.x, this.y);
}

 

这里需要注意，在build函数中如果使用在类中定义的变量是不用带this的，直接拿来使用即可，参考上文的build参数，其内部使用content并没有加this。

 

总结一下：

1、学习了StatelessWidget的使用。

2、StatelessWidget的使用步骤。

3、StatelessWidget内部的一些注意事项，materialWidget的参数，theme的参数，home的参数，scaffold的使用，等...

4、构造函数的简写。