Flutter 各种widget 简要说明

关注

原创最新推荐文章于 2026-06-29 11:30:04 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

Flutter - 基础Widget，android简单小项目实例 child: Row( mainAxisSize: MainAxisSize.min, // 默认是max，占满父Widget；min是包裹内容 children: [ Icon(Icons.favorite, color: Colors.red), // 图标 Text(“喜欢作者”), // 文字 ], ), onPressed: () => print(“自定义Button”), // onPressed必传，否则样式可能会出问题 ) ], ); } } 2、定制 Button 默认间隔 : 阅读详情

Flutter widget 简要说明：

Text

该 widget 可让创建一个带格式的文本

交互性

要使文本对触摸事件作出反应，将其包装在GestureDetector中，使用GestureDetector.onTap处理程序。

在一个material design应用中，考虑使用一个FlatButton，或者如果不合适，至少使用一个knkWell来代替GestureDetector。

要使文本的一段具有交互性，可以使用RichText并指定一个TapGestureRecognizer作为文本的相关部分的TextSpan.recognizer 。

`Row`/ `Column`

这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。

`Stack`

取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。

`Container`

Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换

Icon

交互性

图标不是交互式的。对于交互式图标，可以考虑material的IconButton。

当使用图标时，必须有一个环境定向小部件。通常这是由WidgetsApp或MaterialApp自动引入的。

这个小部件假设呈现的图标是正方形的。非正方形图标可能呈现不正确

RaisedButton

使用raised button增加平面布局的尺寸，例如在很长的繁忙的内容列表中，或者在很宽的空间中。避免在已经引发的内容(如对话框或卡片)上使用raised button。

如果onPressed和onLongPress回调是空的，那么按钮将被禁用，默认情况下，将类似于一个平面按钮在disabledColor。如果您试图改变按钮的颜色，但没有任何效果，请检查是否传递了一个非空的onPressed或onLongPress回调。

如果你想要一个 ink-splash的水龙头，但不想使用一个按钮，考虑使用 InkWell

Raised buttons的最小尺寸为88.0 * 36.0，可以用ButtonTheme覆盖

FlatButton,

平面按钮，一个material design没有阴影的按钮

DropdownButton

下拉按钮，一个按钮，显示可供选择的选项

FloatingActionButton

浮动动作按钮，round button in material applications.

IconButton

创建只包含图标的按钮

InkWell

喷墨，它实现了喷墨部分的一个平面按钮

RawMaterialButton

RawMaterialButton，这个小部件所基于的小部件。

Scaffold

支架类

实现了基本material design的可视化布局结构

该类提供用于显示drawers, appbar,snack bars, and bottom sheets的api

要显示snackbar或持久的底部工作表，请通过Scaffold.of 获取当前BuildContext的ScaffoldState

和使用 ScaffoldState.showSnackBar 和ScaffoldState.showBottomSheet

MaterialApp

一个方便的小部件，它包装了许多material design应用程序通常需要的小部件。它建立在一个WidgetsApp的基础上，通过添加特定的material design功能，比如AnimatedTheme和GridPaper。

MaterialApp按照以下顺序配置顶级导航器来搜索路线:

对于/ route，如果非空，则使用home属性。
否则，如果route表有一个条目，则使用route表。
否则，如果提供，将调用onGenerateRoute。对于未由home和route处理的任何有效路由，它应该返回一个非空值。
最后，如果所有其他方法都失败，则调用onUnknownRoute

如果创建了导航器，这些选项中至少有一个必须处理/ route，因为它是在启动时,指定无效的initialRoute时使用的(例如，在Android上启动另一个应用程序;见Window.defaultRouteName)。

这个小部件还配置顶级导航器的观察者(如果有的话)来执行Hero动画。

如果home、route、onGenerateRoute和onUnknownRoute都为空，且builder不为空，则不创建任何导航器。