第二回：Flutter中的Widget-优快云博客

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/130050312

文章介绍了Flutter中的核心概念Widget，包括它的分类（布局类、容器类、元素类）、状态（Stateless和Stateful）以及与Android的对比。通过示例代码展示了Widget的使用，并指出StatelessWidget和StatefulWidget在交互上的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概念介绍
Widget分类
Widget的状态
示例代码

我们在上一章回中介绍了Flutter版HelloWord,本章回中将介绍 Widget，闲话休提，让我们一起Talk Flutter吧。

概念介绍

在Flutter中所有内容都是Widget,大到屏幕中的页面，小到页面中的文字图片都是Widget，甚至屏幕中控制文字和图片等内容排列的也是Widget.为了方便大家理解Widget,我们使用Android和Flutter做个对比，当然了，如果有哪位看官没有Android的基础，可以跳过此对比。

在Android中使用Activity或者Fragment表示屏幕的界面，在Flutter中使用widget表示屏幕的界面.
在Andorid中使用ViewGroup及其子类表示界面布局，在Flutter中使用Row,Colum这两种Widget表示布局。
在Android中使用View及其子类表示界面中的文字或者图片等组件，在Flutter中使用不同的widget表示界面中的文字或者图片，比如Text,Image；

Widget分类

虽然官方文档中没有给Widget分类，但是我觉得还是做一下分类比较好，这样便于大家使用Widget.

布局类Widget,主要用来控件widget的排列方向，最常用的是Row,Colum,以及Stack;
容器类Widget,主要用来其它widget的widget，常用的有Container,List,Center,MaterialApp;
元素类Widget,主要用来显示具体内容，比如文字或者图片，常用的有Text,Image,Button,Icon等；

Widget的状态

在Flutter中Widget还有状态:Stateless和Stateful,由此衍生出两种Widget:StatelessWidget和StatefulWidget。它们的区别在于前者不能被改变，后者可以被改变。通俗点讲就是说前者不能和用户做交互，后者可以与用户交互，响应用户发出的事件。

示例代码

class HelloApp extends StatelessWidget {
  const HelloApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      decoration: const BoxDecoration(color: Colors.brown),
      child: const Center(
        child: Text("Contain widget"),
      ),
    );

上面的代码是一个各种Widget的使用示例，不过该类无法运行，因为我们返回了一个Container类型的Widget，该类型的Widget不能当作根部Widget，在它外层套一层MaterialApp类型的Widget才可以，不过官方文档中也给出了这样的示例程序，我觉得可能是早期版本的Flutter可以运行，我在当前版本的Flutter中无法运行(Flutter 3.0.5)，下面是报出的错误：

Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used, for example, to determine how to lay out text, how to interpret "start" and "end" values, and to resolve EdgeInsetsDirectional, AlignmentDirectional, and other *Directional objects.

看官们，关于Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!