Flutter组件

文本及样式

Text: 显示简单样式文本
TextStyle: 指定文本显示的样式
TextSpan: 对一个Text内容的不同部分按照不同的样式显示
DefaultTextStyle: 可以被继承的样式

按钮

RaisedButton: "漂浮"按钮，它默认带有阴影和灰色背景
FlatButton: 扁平按钮，默认背景透明并不带阴影
OutlineButton: 默认有一个边框，不带阴影且背景透明
IconButton: 一个可点击的Icon，不包括文字，默认没有背景
带图标的按钮: RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮
自定义按钮: 参数

onPressed, //按钮点击回调
textColor, //按钮文字颜色
disabledTextColor, //按钮禁用时的文字颜色
color, //按钮背景颜色
disabledColor,//按钮禁用时的背景颜色
highlightColor, //按钮按下时的背景颜色
splashColor, //点击时，水波动画中水波的颜色
colorBrightness,//按钮主题，默认是浅色主题 
padding, //按钮的填充
shape, //外形
child, //按钮的内容
______________________
FlatButton(
  color: Colors.blue,//按钮背景颜色
  highlightColor: Colors.blue[700], //按钮按下时的背景颜色
  colorBrightness: Brightness.dark,//按钮主题
  splashColor: Colors.grey,//点击时，水波动画中水波的颜色
  child: Text("Submit"),
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),//指定其外形为一个圆角矩形
  onPressed: () {},
)

图片及ICON

ImageProvider: ImageProvider 是一个抽象类。AssetImage是实现了从Asset中加载图片的ImageProvider，而NetworkImage实现了从网络加载图片的ImageProvider。
Image: 参数

width, //图片的宽
height, //图片高度
color, //图片的混合色值
colorBlendMode, //混合模式
fit,//缩放模式
alignment = Alignment.center, //对齐方式
repeat = ImageRepeat.noRepeat, //重复方式
_____________________
fit：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：

fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。

单选开关和复选框

Switch
Checkbox

输入框TextField

属性

const TextField({
  ...
//编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。
  TextEditingController controller, 
//用于控制TextField是否占有当前键盘的输入焦点。
  FocusNode focusNode,
//用于控制TextField的外观显示，如提示文本、背景颜色、边框等。
  InputDecoration decoration = const InputDecoration(),
//用于设置该输入框默认的键盘输入类型
  TextInputType keyboardType,
//键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值，
  TextInputAction textInputAction,
//正在编辑的文本样式。
  TextStyle style,
//输入框内编辑文本在水平方向的对齐方式。
  TextAlign textAlign = TextAlign.start,
//是否自动获取焦点。
  bool autofocus = false,
//是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。
  bool obscureText = false,
//输入框的最大行数，默认为1；如果为null，则无行数限制。
  int maxLines = 1,
//代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数
  int maxLength,
//决定当输入文本长度超过maxLength时是否阻止输入，为true时会阻止输入，为false时不会阻止输入但输入框会变红。
  bool maxLengthEnforced = true,
//输入框内容改变时的回调函数
  ValueChanged<String> onChanged,
//这两个回调都是在输入框输入完成时触发，比如按了键盘的完成键（对号图标）或搜索键（🔍图标）。不同的是两个回调签名不同，onSubmitted回调是ValueChanged<String>类型，它接收当前输入内容做为参数，而onEditingComplete不接收参数。
  VoidCallback onEditingComplete,
  ValueChanged<String> onSubmitted,
//用于指定输入格式
  List<TextInputFormatter> inputFormatters,
//如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）
  bool enabled,
//这三个属性是用于自定义输入框光标宽度、圆角和颜色的。
  this.cursorWidth = 2.0,
  this.cursorRadius,
  this.cursorColor,
  ...
})

获取输入内容有两种方式：

1.定义两个变量，用于保存用户名和密码，然后在onChange触发时，各自保存一下输入内容。
2.通过controller直接获取。//controller除了能监听文本变化外，它还可以设置默认值、选择文本

Form

autovalidate：是否自动校验输入内容
onWillPop：决定Form所在的路由是否可以直接返回
onChanged：Form的任意一个子FormField内容发生变化时会触发此回调

FormField

const FormField({
  ...
  FormFieldSetter<T> onSaved, //保存回调
  FormFieldValidator<T>  validator, //验证回调
  T initialValue, //初始值
  bool autovalidate = false, //是否自动校验。
})

FormState

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

线性布局 Row

Row({
  ...  
//表示水平方向子组件的布局顺序
  TextDirection textDirection,    
 //表示Row在主轴(水平)方向占用的空间
  MainAxisSize mainAxisSize = MainAxisSize.max,   
//表示子组件在Row所占用的水平空间内对齐方式
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
//表示Row纵轴（垂直）的对齐方向
  VerticalDirection verticalDirection = VerticalDirection.down,  
//表示子组件在纵轴方向的对齐方式，
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
//子组件数组。
  List<Widget> children = const <Widget>[],
})

Container容器

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
})