Flutter Widget整理

Flutter Widget整理

摘抄了flutter中文网的控件,方便自己查询使用

1.基础widget

文本/字体样式

Text

• textAlign：文本的对齐方式；
• maxLines、overflow：指定文本显示的最大行数;
• textScaleFactor：代表文本相对于当前字体大小的缩放因子;

TextStyle

• height：该属性用于指定行高，具体的行高等于fontSize*height;
• fontFamily ：由于不同平台默认支持的字体集不同;
• fontSize：该属性和Text的textScaleFactor都用于控制字体大小。但是有两给主要区别：
  • fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
  • textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本。

TextSpan

DefaultTextStyle

按钮

RaisedButton

FlatButton

OutlineButton

IconButton

图片及ICON

Image

ICON

单选开关和复选框

Switch:单选开关

Checkbox:复选框

输入框及表单

TextField

• controller：编辑框的控制器;

• focusNode：用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个handle。

• InputDecoration：用于控制TextField的外观显示，如提示文本、背景颜色、边框等。

• keyboardType：用于设置该输入框默认的键盘输入类型;

• textInputAction：键盘动作按钮图标(即回车键位图标);

• style：正在编辑的文本样式。

• textAlign: 输入框内编辑文本在水平方向的对齐方式。

• autofocus: 是否自动获取焦点。

• obscureText：是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。

• maxLines：输入框的最大行数，默认为1；如果为null，则无行数限制。

• maxLength和maxLengthEnforced ：maxLength代表输入框文本的最大长度;

• onChange：输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听。

• onEditingComplete和onSubmitted：这两个回调都是在输入框输入完成时触发，比如按了键盘的完成键（对号图标）或搜索键（?图标）。不同的是两个回调签名不同，onSubmitted回调是ValueChanged类型，它接收当前输入内容做为参数，而onEditingComplete不接收参数。

• inputFormatters：用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。

• enable：如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）。

• cursorWidth、cursorRadius和cursorColor：这三个属性是用于自定义输入框光标宽度、圆角和颜色的。

Form

• autovalidate：是否自动校验输入内容；
• onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果Future的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。
• onChanged：Form的任意一个子FormField内容发生变化时会触发此回调。

2.布局类widget

Row:水平布局

• textDirection：表示水平方向子widget的布局顺序;
• mainAxisSize：表示Row在主轴(水平)方向占用的空间;
• mainAxisAlignment：表示子Widgets在Row所占用的水平空间内对齐方式;
• verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。
• crossAxisAlignment：表示子Widgets在纵轴方向的对齐方式;
• children ：子Widgets数组。

Column:垂直布局

Flex:弹性布局

Expanded:可以按比例“扩伸”Row、Column和Flex子widget所占用的空间

Wrap:流式布局

• spacing：主轴方向子widget的间距
• runSpacing：纵轴方向的间距
• runAlignment：纵轴方向的对齐方式

Flow:流式布局

Stack:层叠布局

Positioned:层叠布局在stack中定位用

3.容器类widget

Padding

EdgeInsets

ConstrainedBox

SizedBox

ConstrainedBox

BoxConstraints

UnconstrainedBox

DecoratedBox

BoxDecoration

Transform:变换

Container

4.可滚动的widget

SingleChildScrollView

ListView

GridView

CustomScrollView

ScrollController

5.功能型widget

WillPopScope

InheritedWidget

ThemeData