Flutter组件

基础组件

在Flutter中几乎所有的组件都是一个Widget。Widget不仅可以表示UI元素，也可以表示一些功能性的组件。在Flutter中，Widget的功能是“描述一个UI元素的配置数据”。Widget分为有状态StatefulWidget和无状态StatelessWidget两种，StatelessWidget类和StatefulWidget类直接继承自Widget类。

StatelessWidget

用于不需要维护状态的场景，通过build返回一个布局好的组件。

//StatelessWidgetDemo.dart
import 'package:flutter/material.dart';
class StatelessWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.grey,
        child: Text("test"),
      ),
    );
  }
}

//Home.dart
import 'package:flutter/material.dart';
import 'package:testflutter/StatelessWidgetDemo.dart';

class IndexWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context){
   return StatelessWidgetDemo();
  }
}

StatefulWidget

用于数据改变的时候，当数据更新时会重新绘制Widget。一个StatefulWidget类会对应一个State类，State表示与其对应的StatefulWidget要维护的状态。

//StatefulWidgetDemo.dart
class StatefulWidgetDemo extends StatefulWidget{
  @override
  _StatefulWidgetDemoState createState() => new _StatefulWidgetDemoState();
}

class _StatefulWidgetDemoState extends State<StatefulWidgetDemo>{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      body:Text("test2")
    );
  }
}

文本组件（Text、TextSpan）

Text

负责显示文本和定义显示样式。

属性名	类型	默认值	说明
data	String		文本
maxLines	int	0	最大行数
textAlign	TextAlign	TextAlign.center	水平对齐
textDirection	TextDirection	TextDirection.ltr	文本书写方向
textScaleFactor	double	1.0	字体缩放系数
style	TextStyle	null	样式
textSpan	TextSpan	null	文本块

示例：

Text("Hello world",
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2,
    fontFamily: "Courier",
    background: new Paint()..color=Colors.yellow,
    decoration:TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
);

TextSpan

Text的所有文本内容只能按同一种样式，如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。示例：

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),
       recognizer: _tapRecognizer
     ),
    ]
))

按钮

RaisedButton

“漂浮”按钮，它默认带有阴影和灰色背景。示例：

RaisedButton(
  child: Text("normal"),
  onPressed: () {},
);

FlatButton

扁平按钮，默认背景透明并不带阴影。按下后，会有背景色。

OutlineButton

默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影。

图标

展示iconfont的组件。Material Design所有图标可以在其官网查看。

Icons

框架自带的Icon示例：

new Icon(
        Icons.android,//图标Icon
        color: Colors.green,//图标颜色，设置为绿色，原本的颜色是黑色的
        size: 150.0,//Icon的大小
      )

属性名	类型	默认值	说明
icon	Icons	null	展示的图标
color	Color	null	颜色
size	Double	24.0	大小
textDirection	TextDirection	TextDirection.ltr	文本书写方向
style	TextStyle	null	样式

IconButton

可交互的Icon。支持响应按下事件，如果它的onPressed回调函数为null，那么这个按钮处于禁用的状态，并且不可以按下。

属性名	类型	默认值	说明
icon	Widget	null	必须项，展示的图标
color	Color	null	颜色
disabledColor	Color	ThemeData.disableColor	禁用的颜色
splashColor	Color		splashColor
highlightColor	Color		点击时间稍长的时候背景渐变到这个颜色
iconSize	Double	24.0	大小
alignment	AlignmentGeometry	TextDirection.ltr	Icon的对齐方式
onPressed	VoidCallBack	null	必须项，按下回调事件
tooltip	String		按下的提示语

ImageIcon

通过AssetImages或者其他图片显示Icon

图片

属性	类型	说明
image	ImageProvider	必须项
width/height	double	Image容器显示区域的宽度和高度
fit	BoxFit	图片填充模式
color	Color	图片的混合色值
colorBlendMode	BlendMode	混合模式
alignment	Alignment	对齐方式
repeat	ImageRepeat	当图片本身大小小于显示空间时，图片重复方式
centerSlice	Rect	拉伸的矩形区域/9图的中心区域切片
matchTextDirection	bool	和Directionality配合使用，是否匹配文字分析
gaplessPlayback	bool	图片更新过程中原图是否保留
semanticLabel	String	语义标签
FilterQuality	FilterQuality	过滤器品质

图片的适应模式:

BoxFit.none：原始大小
BoxFit.contain：保持Box的纵横比至至少有一边填充满父控件
BoxFit.cover：保持Box的纵横比进行缩放至Box完全填充满父控件，超出部分进行裁剪
BoxFit.fill：Box被完全填充
BoxFit.fitHeigh：缩放Box高直至填充满父控件
BoxFit.fitWidth：缩放Box宽直至填充满父控件
BoxFit.scaleDown：Box大于父控件，则采用与contain一致的缩放模式，否则采用none缩放模式

加载资源图片

//pubspec.yaml
assets:
    - images/avatar.png

//使用
Image.asset("images/avatar.png",
  width: 100.0,
)

//混合模式
Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0,
  color: Colors.blue,
  colorBlendMode: BlendMode.difference,
);

网络图片

Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

表单(Form)

Form继承自StatefulWidget对象，它对应的状态类为FormState。

属性	类型	说明
Key	Key	globalKey,用于获取FormState
autovalidate	bool	是否自动校验输入内容
child	Widget	组件child只能有一个组件
onChange	VoidCallback	当FormField值改变时的回调函数
onWillPop	WillPopCallback	决定Form在的路由是否能直接返回

FormState可以通过Form.of()或GlobalKey获得。我们可以通过它来对Form的子孙FormField进行统一操作。

FormState.validate()：调用FormField的validate回调，如果有一个校验失败，则返回false，所有校验失败项都会返回用户返回的错误提示。
FormState.save()：调用FormField的save回调，用于保存表单内容
FormState.reset()：清空FormField的内容。

输入框（TextField、TextFormField）

用于文本输入，输入框是比较复杂的组件了。属性详情

单选框和复选框（）

单选开关Switch和复选框Checkbox都是继承自StatelessWidget，所以它们本身不会保存当前选择状态，因此它们的选中状态都是由父组件来管理的。当Switch或Checkbox被点击时，会触发它们的onChanged回调，可以在此回调中处理选中状态改变逻辑。

滚动组件

SingleChildScrollView

ListView

GridView

常用组件

Container

可以设置大小和装饰的容器。

属性	类型	说明
alignment	Alignment	对齐方式
child	Widget	子元素
width	double	宽度
height	double	高度
padding	EdgeInsets	内边距
margin	EdgeInsets	外边距
color	Color	背景颜色(不能与decoration一块设置)
decoration	BoxDecoration	背景装饰
foregroundDecoration	Decoration	前景装饰
transform	Matrix4	变换(转换矩阵)
constraints	BoxConstraints	容器大小的限制条件

SizeBox

Scaffold

Scaffold实现了基本的material风格的布局结构，包含了导航栏，抽屉菜单，底部导航等。常用属性如下：

属性	类型	说明
appBar	AppBar	顶部导航栏
backgroundColor	Color	背景色
body	Widget	内容元素
bottomNavigationBar	BottomNavigationBar	底部导航栏
drawer	Drawer	抽屉菜单
floatingActionButton	FloatingActionButton	悬浮按钮

AppBar

一个Material风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。常用属性如下：

属性	类型	说明
actions	List	导航栏右侧菜单
backgroundColor	Color	背景色
title		标题
leading	Widget	导航栏左侧Widget
bottom	Widget	导航栏底部菜单
centerTitle	bool	标题是否居中
elevation	double	导航栏阴影大小