Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

前言

上一篇我们对 Flutter UI 有了一个基本的了解。

这一篇我们通过自定义 Widget 来了解下如何写一个 Widget？

然而 Widget 有两个，StatelessWidget 和 StatefulWidget，我们要继承哪一个？

下面让我们跟着文章来探索一番。

目录

1. StatelessWidget

我们先来看下继承的 Widget 为 StatelessWidget 的情况。

第一步：新建一个文件 bold_text.dart

这里文件名后面后缀 .dart 可带可不带

文件名多个单词组成用下划线分隔。

这里我们演示直接在 lib 文件夹下面创建，实际项目记得文件夹结构的组织哦~

第二步：import 系统包

一般自定义 Widget 都要 import 下面的一个包。

import 'package:flutter/material.dart';

IDE 有自动提示和补全功能，因此不用死记硬背。

第三步：自定义一个类继承自 StatelessWidget

一般类名跟文件名一致就可以，采用驼峰格式命名。

import 'package:flutter/material.dart'; class BoldText extends StatelessWidget { }

第四步：实现一个需要 override 的方法 build

import 'package:flutter/material.dart'; class BoldText extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return null; } }

一般第三步操作之后 IDE 有提示，直接使用快捷修复自动追加 build 代码即可。如下图：

第五步：实现 Widget

上述代码的 TODO 表示我们要在里面实现对应的 Widget。所以我们删除 TODO，然后在写我们要返回的 Widget 来替换 null 即可。

我们写一个单独的方法 **_buildWidget** 来返回 Widget，同时返回我们之前写的 Text，如下：

import 'package:flutter/material.dart'; class BoldText extends StatelessWidget { @override Widget build(BuildContext context) { return _buildWidget(); } Widget _buildWidget() { return Text( 'Hello, world!', textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ); } }

可以看到我们这个 Widget 应该会显示成上篇我们界面所见的粗体文本。

但是这里 Hello, world! 写死了，我们要让这个自定义 Widget 通用一些，可以定义一个必传参数文本内容，修改如下：

import 'package:flutter/material.dart'; class BoldText extends StatelessWidget { final String data; BoldText(this.data); @override Widget build(BuildContext context) { return _buildWidget(); } Widget _buildWidget() { return Text( data, textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ); } }

可以看到我们定义了一个变量，通过构造函数让外部传进来。

这里的 BoldText(this.data); 等价于 Android 下面代码：

BoldText(String data) { this.data = data; }

可以看到 dart 的语法糖简化了写法。具体更多构造函数写法可以查看 。

2. 自定义 Widget 使用

我们以之前的 main.dart 为例进行讲解。

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold), ), ); } }

第一步：导入我们的自定义 Widget 包

相对路径：

import 'bold_text.dart';

绝对路径：

import 'package:my_flutter/bold_text.dart';

上面任选其一即可。主要是相对路径和绝对路径的区别。