持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

Widget 基本认识

Flutter中几乎所有的对象都可以看作一个widget， widget不仅可以表示为Ui元素，也可以表示一些特色的功能性组件。

Flutter是通过Widget套widget来构建UI处理的，也就是说Flutter中万物皆为widget。

两种不同的Widget

Flutter中有两种Widget组件。

• 一种是无状态的Widget组件，也就是StatelessWidget，主要的用在不需要维护状态的场景。下面就是一个简单的StatelessWidget构建的UI界面。

class demo extends StatelessWidget  {
 const Echo({
   Key? key,  
   required this.text,
 }):super(key:key);
 final String text;

 @override
 Widget build(BuildContext context) {
   return Center(
     child: Text(text)
   );
 }
}

• 另一种有状态的Widget组件，也就是StatefulWidget，主要是用在需要维护状态数据的场景下，StatefulWidget不同于Stateless Widget的是多了个对应StatefulElement的State实例。

  state简介

1. state保持的数据可以在widget构建时被同步读取
2. 当数据需要改变时，可以通过setState()来通知Flutter，flutter会重新调用build方法重新构建widget树，达到数据改变界面自动更新的目标。

Getx

针对需要维护数据状态的widget，这里介绍另一种状态管理的库-- Getx。

什么是GetX

• GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。

• GetX 有3个基本原则：性能、效率、结构。

使用Getx的好处

• 使用原生的状态管理相对复杂，在业务需求比较复杂时，会很难以管理。而Gext则能很好的处理这一点。

在需要用到的文件中导入，它将被使用。

安装Getx

在pubspec.yaml 文件中添加Getx

dependencies:
  get: ^4.6.1

在需要用到的文件中导入即可使用Getx。

import 'package:get/get.dart';