Flutter教程02——一个最简单的flutter入门应用

目录

1.Widget

2.StatelessWidget

---

1.Widget

Widget英文意思，装饰物、小机械、小部件。

flutter中几乎所有对象都是Widget。

这里你先将Widget理解为一个UI元素、UI组件，用于构建页面。

flutter开发中，Widget通过嵌套Widget的方式来构建UI。

flutter中Widget是一个抽象类，在实际开发中一般不会直接继承Widger，而是通过继承StatelessWidget和StatefulWidget来实现，这两个抽象类都直接继承了Widget。

2.StatelessWidget

StatelessWidget用于无状态的场景，在其build方法中来构建UI。

一个hello world的例子：

class Hello extends StatelessWidget {
  const Hello({
    Key? key,
    required this.title,
    this.backgroundColor = Colors.white,
  }) : super(key: key);
  final String title;
  final Color backgroundColor;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter'),
      ),
      body: Center(
        child: Container(
          color: backgroundColor,
          child: Text(title),
        ),
      ),
    );
  }
}

简单介绍下这个Hello Widget。

继承了StatelessWidget，说明其是一个无状态的Widget。

构造器参数使用了可选的命名参数，参数中必须的使用了required修饰。

这里key暂时理解为Vue或React组件的key属性，帮助UI组件高效更新的。构造器的中参数key应该放在第一个。

super(key:key)表示调用父类中的构造器来初始化参数key。

然后定义了两个字段，title和backgroundColor，使用了final修饰防止被修改。

最后是build方法，其返回了一个Scaffold，里面嵌套了个AppBar和Center，Center嵌套了个Container，Container嵌套了Text。因为之前说Widget通过嵌套Widget的方式来构建UI，所以Scaffold，AppBar，Center，Container，Text也都是Widget。

这里简单介绍下这几个Widget:

Scaffold，是一个路由页的骨架，用来拼接一个完整页面；

AppBar，是一个导航栏；

Center，定义了对齐方式为居中；

Container，是一个组合容器，其color属性定义了背景色；

Text，就是文本；

还需要一个根组件：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Hello(
        title: 'hello world',
      ),
    );
  }
}

MaterialApp，是Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。通过home属性配置了应用的首页路由。

flutter中main函数为应用入口，其调用了runApp方法来启动应用，runApp函数接收一个Widget作为参数（这点是不是感觉和vue、react很像）：

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

完整代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Hello(
        title: 'hello world',
      ),
    );
  }
}

class Hello extends StatelessWidget {
  const Hello({
    Key? key,
    required this.title,
    this.backgroundColor = Colors.white,
  }) : super(key: key);
  final String title;
  final Color backgroundColor;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter'),
      ),
      body: Center(
        child: Container(
          color: backgroundColor,
          child: Text(title),
        ),
      ),
    );
  }
}

可以认为flutter通过dart语言将前端中的html、javascript、css三大核心部分合为一体，以面向对象的编程方式来构建UI和JS逻辑。哈哈，有了flutter后端人员转前端更容易了。

现在你的第一个flutter应用就完成了，效果图(不能再简单了)：