Flutter 各种widget 简要说明

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.showSnackBarScaffoldState.showBottomSheet

MaterialApp

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

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

  1. 对于/ route,如果非空,则使用home属性。

  2. 否则,如果route表有一个条目,则使用route表。

  3. 否则,如果提供,将调用onGenerateRoute。对于未由home和route处理的任何有效路由,它应该返回一个非空值。

  4. 最后,如果所有其他方法都失败,则调用onUnknownRoute

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

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

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

WidgetsApp

它定义了基本的应用程序元素,但不依赖于material库。

MaterialPageRoute,

它定义了一个app页面,该页面以material-specific的方式进行转换

Navigator

​ 用于管理应用程序的页面堆栈

Placeholder

一个小部件,它绘制一个方框,表示将来会添加其他小部件的位置。

这个小部件在开发期间非常有用,可以指示接口尚未完成。

默认情况下,占位符的大小适合其容器。

​ 用于管理应用程序的页面堆栈

Placeholder

一个小部件,它绘制一个方框,表示将来会添加其他小部件的位置。

这个小部件在开发期间非常有用,可以指示接口尚未完成。

默认情况下,占位符的大小适合其容器。

如果占位符位于无界空间中,它将根据给定的fallbackWidth和fallbackHeight.调整自身的大小。

TabController

协调[TabBar]和[TabBarView]之间的选项卡选择

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值