Flutter 属性介绍

1. MaterialApp

const MaterialApp({
Key key,
// 导航主键, GlobalKey<NavigatorState>
this.navigatorKey,
// 主页, Widget
this.home,
// 路由
this.routes = const <String, WidgetBuilder>{},
// 初始化路由, String
this.initialRoute,
// 构造路由, RouteFactory
this.onGenerateRoute,
// 为止路由, RouteFactory
this.onUnknownRoute,
// 导航观察器
this.navigatorObservers = const <NavigatorObserver>[],
// widget的构建
this.builder,
// APP的名字
this.title = '',
// GenerateAppTitle, 每次在WidgetsApp构建时都会重新生成
this.onGenerateTitle,
// 背景颜色
this.color,
// 主题, ThemeData
this.theme,
// app语言支持, Locale
this.locale,
// 多语言代理, Iterable<LocalizationsDelegate<dynamic>>
this.localizationsDelegates,
// flutter.widgets.widgetsApp.localeListResolutionCallback
this.localeListResolutionCallback,
// flutter.widgets.widgetsApp.localeResolutionCallback
this.localeResolutionCallback,
// 支持的多语言, Iterable<Locale>
this.supportedLocales = const <Locale>[Locale('en', 'US')],

// 是否显示网格
this.debugShowMaterialGrid = false,
// 是否打开性能监控，覆盖在屏幕最上面
this.showPerformanceOverlay = false,
// 是否打开栅格缓存图像的检查板
this.checkerboardRasterCacheImages = false,
// 是否打开显示到屏幕外位图的图层的检查面板
this.checkerboardOffscreenLayers = false,
// 是否打开覆盖图，显示框架报告的可访问性信息 显示边框
this.showSemanticsDebugger = false,
// 是否显示右上角的Debug标签
this.debugShowCheckedModeBanner = true,})

2. AppBar

AppBar({
Key key,
// 导航栏左侧weidget
this.leading,
// 如果leading为null，是否自动实现默认的leading按钮
this.automaticallyImplyLeading = true,
// 导航栏标题
this.title,
// 导航栏右侧按钮, 接受一个数组
this.actions,
// 一个显示在AppBar下方的控件，高度和AppBar高度一样，可以实现一些特殊的效果，该属性通常在SliverAppBar中使用
this.flexibleSpace,
// 一个AppBarBottomWidget对象, 设置TabBar
this.bottom,
//中控件的z坐标顺序，默认值为4，对于可滚动的SliverAppBar，当 SliverAppBar和内容同级的时候，该值为0，当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改elevation的值
this.elevation = 4.0,
// 背景颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
this.backgroundColor,
// 状态栏的颜色, 黑白两种, 取值: Brightness.dark
this.brightness,
// 设置导航栏上图标的颜色、透明度、和尺寸信息
this.iconTheme,
// 设置导航栏上文字样式
this.textTheme,
// 导航栏的内容是否显示在顶部, 状态栏的下面
this.primary = true,
// 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样
this.centerTitle,
// 标题间距，如果希望title占用所有可用空间，请将此值设置为0.0
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
// 应用栏的工具栏部分透明度
this.toolbarOpacity = 1.0,
// 底部导航栏的透明度设置
this.bottomOpacity = 1.0,})

3. TextField

// 编辑框的控制器，跟文本框的交互一般都通过该属性完成，如果不创建的话默认会自动创建
this.controller,
// 用于控制`TextField`是否占有当前键盘的输入焦点, 使我们和键盘交互的`handle`
this.focusNode,
//给TextField设置装饰（形状等）
 decoration:  InputDecoration(
 border: OutlineInputBorder(
 borderRadius: BorderRadius.circular(10.0),
 borderSide: BorderSide(color: Colors.transparent)),
 //输入内容距离上下左右的距离 ，可通过这个属性来控制 TextField的高度
 contentPadding: EdgeInsets.all(10.0),
 fillColor: Colors.white, filled: true,
 //labelText: 'Hello',
 // 以下属性可用来去除TextField的边框
 disabledBorder: InputBorder.none,
 enabledBorder:  InputBorder.none,
 focusedBorder:   InputBorder.none,
 //键盘类型
 keyboardType: TextInputType.text,
 //控制键盘的功能键 指enter键，比如此处设置为next时，enter键
 //显示的文字内容为 下一步
 textInputAction: TextInputAction.next,
 //键盘大小写的显示 Only supports text keyboards  但是好像不起作用？
 //characters 默认为每个字符使用大写键盘
 //sentence 默认为每个句子的第一个字母使用大写键盘
 //word 默认为每个单词的第一个字母使用大写键盘。
 //none 默认使用小写
 textCapitalization: TextCapitalization.words,
 //是否是密码
 obscureText: false,
 //文本对齐方式(即光标初始位置)
 textAlign: TextAlign.center,
 //输入文本的样式
 style: TextStyle(fontSize: 30.0, color: Colors.blue),
 //最大行数
 maxLines: 1,
 //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
 //这种情况一般是不符合我们设计的要求的，但是有需要限制其输入的位数
 // 这时候我们可以使用下方的属性来限制
 maxLength: 9,
 // 跟最大长度限制对应，如果此属性设置为false,当输入超过最大长度
 // 限制时，依然会显示输入的内容，为true不会（默认为 true）
 maxLengthEnforced: false,
 // 限制输入的 最大长度  TextField右下角没有输入数量的统计字符串
 //inputFormatters: [LengthLimitingTextInputFormatter(11)],
 //允许的输入格式 下方的模式指只允许输入数字
 //inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
 //控制此小部件是否具有键盘焦点。
 focusNode: FocusNode(),
 //是否自动更正
 autocorrect:false,
 //是否自动获得焦点
 autofocus: false,
 //是否禁用textfield:如果为false, textfield将被“禁用”
 enabled: true,
 //光标颜色
 cursorColor: Colors.red,
 //光标宽度
 cursorWidth: 5.0,
 //光标圆角弧度
 cursorRadius: Radius.circular(5.0),
 //内容改变的回调
 onChanged: (text) {
    print('change $text');
  },
 //内容提交(按回车)的回调
 onSubmitted: (text) {
    print('submit $text');
  },
 //按回车时调用
  onEditingComplete: (){
    print('onEditingComplete');
  },
// 键盘的外观, Brightness.light和dark
this.keyboardAppearance,
// 当TextField滚动时, 设置文本字段在滚动后的位置与可滚动项的边缘的距离
this.scrollPadding = const EdgeInsets.all(20.0),
// 长按输入的文本, 设置是否显示剪切，复制，粘贴按钮, 默认是显示的
this.enableInteractiveSelection = true,
// 点击输入框时的回调(){}
this.onTap,

Decoration

const InputDecoration({
// 接收Widget, 在输入框左侧显示的图片                  
this.icon,
// String, 输入框的描述, 当输入框获取焦点时默认会浮动到上方
this.labelText,
// TextStyle, 样式
this.labelStyle,
// 辅助文本, 位于输入框下方，如果errorText不为空的话，则helperText不显示
this.helperText,
this.helperStyle,
/// 提示文本，位于输入框内部
this.hintText,
this.hintStyle,
// 错误信息提示文本
this.errorText,
this.errorStyle,
// errorText显示的最大行数
this.errorMaxLines,
// errorText不为空，输入框没有焦点时要显示的边框
this.errorBorder,
// labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示
this.hasFloatingPlaceholder = true,
// 改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小
this.isDense,
// 内间距
this.contentPadding,
// 位于输入框内部起左侧置的图标
this.prefixIcon,
// 预先填充在输入框左侧的Widget,跟prefixText同时只能出现一个
this.prefix,
//预填充在输入框左侧的文本, 不可修改删除，例如手机号前面预先加上区号等
this.prefixText,
this.prefixStyle,
// 位于输入框内部右侧位置的图标
this.suffixIcon,
// 预先填充在输入框右侧的Widget,跟suffixText同时只能出现一个
this.suffix,
// 预填充在输入框右侧的文本, 不可修改删除
this.suffixText,
this.suffixStyle,
// 位于右下方显示的文本，常用于显示输入的字符数量
this.counterText,
this.counterStyle,
// 相当于输入框的背景颜色
this.fillColor,
// 如果为true，则输入使用fillColor指定的颜色填充
this.filled,
// 输入框有焦点时的边框,如果errorText不为空的话，该属性无效
this.focusedBorder,
// errorText不为空时，输入框有焦点时的边框
this.focusedErrorBorder,
// 输入框禁用时显示的边框，如果errorText不为空的话，该属性无效
this.disabledBorder,
// 输入框可用时显示的边框，如果errorText不为空的话，该属性无效
this.enabledBorder,
// 正常情况下的边框
this.border,
// 输入框是否可用
this.enabled = true,
// counterText的语义标签, 如果赋值将替换counterText, 但是我试了好像没什么效果
this.semanticCounterText,})

inputFormatters

用于限制输入的内容，接收一个TextInputFormatter类型的集合
TextInputFormatter是一个抽象类, 官方给我们提供了他的三个子类，分别是
WhitelistingTextInputFormatter: 白名单校验，也就是只允许输入符合规则的字符
BlacklistingTextInputFormatter: 黑名单校验，除了规定的字符其他的都可以输入
LengthLimitingTextInputFormatter: 长度限制，跟maxLength作用类似
// 白名单
inputFormatters: [
// 只能输入数字
WhitelistingTextInputFormatter.digitsOnly,
// 是能输入小写字母
WhitelistingTextInputFormatter(RegExp("[a-z]"))
],
// 黑名单
inputFormatters: [
// 不能输入回车符
BlacklistingTextInputFormatter.singleLineFormatter,
// 不能输入小写字母
BlacklistingTextInputFormatter(RegExp("[a-z]"), replacementString: '-')
],
// 字符限制
[LengthLimitingTextInputFormatter(10)]
// 也可是三种或两种一起使用一起使用
inputFormatters: [
// 不能输入小写字母
BlacklistingTextInputFormatter(RegExp("[a-z]")),
// 限制输入10个字符
LengthLimitingTextInputFormatter(10)
],

光标设置

设置输入框光标的样式
// 光标的宽度
this.cursorWidth = 2.0,
// 光标的圆角
this.cursorRadius,
// 光标的颜色
this.cursorColor,
// 示例如下
cursorWidth: 10,
cursorColor: Colors.cyan,
cursorRadius: Radius.circular(5),

4. navigationBar

const CupertinoNavigationBar({
Key key,
//导航栏左侧组件
this.leading,
//是否显示左边组件, 好像无效
this.automaticallyImplyLeading = true,
//是否显示中间组件, 好像无效
this.automaticallyImplyMiddle = true,
//导航栏左侧组件的右边的文本, 好像无效
this.previousPageTitle,
// 导航栏中间组件
this.middle,
// 导航栏右侧组件    
this.backgroundColor = _kDefaultNavBarBackgroundColor,
// 设置左右组件的内边距, EdgeInsetsDirectional
this.padding,
//左侧默认组件和左侧组件右边文本的颜色
this.actionsForegroundColor = CupertinoColors.activeBlue,
this.transitionBetweenRoutes = true,
this.heroTag = _defaultHeroTag})

5. Scaffold

const Scaffold({
Key key,
// 显示在界面顶部的一个AppBar
this.appBar,
// 当前界面所显示的主要内容Widget
this.body,
// 悬浮按钮, 默认在右下角位置显示
this.floatingActionButton,
// 设置悬浮按钮的位置
this.floatingActionButtonLocation,
// 悬浮按钮出现消失的动画
this.floatingActionButtonAnimator,
// 在底部呈现一组button，显示于[bottomNavigationBar]之上，[body]之下
this.persistentFooterButtons,
// 一个垂直面板，显示于左侧，初始处于隐藏状态
this.drawer,
// 一个垂直面板，显示于右侧，初始处于隐藏状态
this.endDrawer,
// 出现于底部的一系列水平按钮
this.bottomNavigationBar,
// 底部的持久化提示框
this.bottomSheet,
// 背景色
this.backgroundColor,
// 重新计算布局空间大小
this.resizeToAvoidBottomPadding = true,
// 是否显示到底部, 默认为true将显示到顶部状态栏
this.primary = true,}) 

6. FloatingActionButton

const FloatingActionButton({
Key key,
this.child,
// 文字解释, 按钮呗长按时显示
this.tooltip,
// 前景色
this.foregroundColor,
// 背景色
this.backgroundColor,
// hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果
this.heroTag = const _DefaultHeroTag(),
// 未点击时阴影值，默认6.0
this.elevation = 6.0,
// 点击时阴影值，默认12.0
this.highlightElevation = 12.0,
// 点击事件监听
@required this.onPressed,
// 是否为“mini”类型，默认为false
this.mini = false,
// 设置阴影, 设置shape时，默认的elevation将会失效,默认为CircleBorder
this.shape = const CircleBorder(),
// 剪切样式
this.clipBehavior = Clip.none,
// 设置点击区域大小的样式, MaterialTapTargetSize的枚举值
this.materialTapTargetSize,
// 是否为”extended”类型
this.isExtended = false,})

7. TabBar

const TabBar({
Key key,
// 数组,显示的标签内容,一般使用Tab对象,当然也可以是其他的Widget
@required this.tabs,
// TabController对象
this.controller,
// 是否可滚动
this.isScrollable = false,
// 指示器颜色
this.indicatorColor,
// 指示器高度
this.indicatorWeight = 2.0,
// 指示器内边距
this.indicatorPadding = EdgeInsets.zero,
// 设置选中的样式decoration，例如边框等
this.indicator,
// 指示器大小, 枚举值TabBarIndicatorSize
this.indicatorSize,
// 选中文字颜色
this.labelColor,
// 选中文字样式
this.labelStyle,
// 文字内边距
this.labelPadding,
// 未选中文字颜色
this.unselectedLabelColor,
// 未选中文字样式
this.unselectedLabelStyle,})

8. BottomNavigationBar

BottomNavigationBar({
Key key,
// 子widget数组
@required this.items,
// 每一个item的点击事件
this.onTap,
// 当前选中的索引
this.currentIndex = 0,
// 类型
BottomNavigationBarType type,
// 文字颜色
this.fixedColor,
// 图片大小
this.iconSize = 24.0,})

9. SingleChildScrollView

this.scrollDirection = Axis.vertical,  //滚动方向
this.reverse =false,//滚动方向是否反向
this.padding,//边距
bool primary,//这是否是与父控件关联的主滚动视图 猜应该是是否与父控件一起滑动 用来解决滑动冲突
this.physics,//滑动松手后的滑动方式
this.controller,
this.child,//子view

10. TextFormField

TextFormField({
Key key,
this.controller,//控制正在编辑的文本。如果为空，这个小部件将创建自己的TextEditingController并使用initialValue初始化它的TextEditingController.text
String initialValue,//初始值
FocusNode focusNode,
InputDecoration decoration = const InputDecoration(),//输入器装饰
TextInputType keyboardType,//弹出键盘的类型
TextCapitalization textCapitalization = TextCapitalization.none,//户输入中的字母大写的选项,TextCapitalization.sentences每个句子的首字母大写,TextCapitalization.characters:句子中的所有字符都大写，TextCapitalization.words : 将每个单词的首字母大写。
TextInputAction textInputAction,//更改TextField的textInputAction可以更改键盘右下角的操作按钮,搜索，完成
TextStyle style,
TextDirection textDirection,//文字显示方向
TextAlign textAlign = TextAlign.start,//文字显示位置
bool autofocus = false,//自动获取焦点
bool obscureText = false,//是否隐藏输入，true密码样式显示，false明文显示
bool autocorrect = true,
bool autovalidate = false,//是否自动验证值
bool maxLengthEnforced = true,
int maxLines = 1,//编辑框最多显示行数
int maxLength,//输入最大长度，并且默认情况下会将计数器添加到TextField
VoidCallback onEditingComplete,//当用户提交时调用
ValueChanged<String> onFieldSubmitted,
FormFieldSetter<String> onSaved,//当Form表单调用保存方法save时回调
FormFieldValidator<String> validator,//Form表单验证
List<TextInputFormatter> inputFormatters,
bool enabled = true,
Brightness keyboardAppearance,
EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
bool enableInteractiveSelection = true,
})

Flutter中的按钮

• RaisedButton ：凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton
• FlatButton ：扁平化的按钮，继承自MaterialButton
• OutlineButton ：带边框的按钮，继承自MaterialButton
• IconButton ：图标按钮,继承自StatelessWidget

我们先来看看MaterialButton中的属性，可以看到能设置的属性还是很多的。

const RaisedButton({
Key key,
@required VoidCallback onPressed,//可以通过这个设置禁用或启用控件
ValueChanged<bool> onHighlightChanged,//水波纹高亮变化回调,按下返回true,抬起返回false
ButtonTextTheme textTheme,//按钮的主题
Color textColor,//文字的颜色
Color disabledTextColor,//按钮禁用时候文字的颜色
Color color,//按钮的背景颜色
Color disabledColor,//按钮被禁用的时候显示的颜色
Color highlightColor,//点击或者toch控件高亮的时候显示在控件上面，水波纹下面的颜色
Color splashColor,//水波纹的颜色
Brightness colorBrightness,//按钮主题高亮
double elevation,//按钮下面的阴影
double highlightElevation,//高亮时候的阴影
double disabledElevation,//按下的时候的阴影
EdgeInsetsGeometry padding,//设置padding
ShapeBorder shape,//设置形状
Clip clipBehavior = Clip.none,//根据此选项，内容将被剪裁（或不剪辑）
MaterialTapTargetSize materialTapTargetSize,//配置点击目标的最小尺寸
Duration animationDuration,//定义形状和高程的动画更改的持续时间
Widget child,//设置子控件
})

下面我们来看看常用属性

RaisedButton

onPressed
接收一个方法，点击按钮时回调该方法。如果传null，则表示按钮禁用
child
按钮文本控件，一般都是传一个Text Widget
color
按钮的颜色
textColor
按钮的文本颜色
splashColor
点击按钮时水波纹的颜色
highlightColor
高亮颜色，点击（长按）按钮后的颜色
elevation
阴影范围，一般不会设置太大
padding
内边距，其接收值的类型是EdgeInsetsGeometry类型的，EdgeInsetsGeometry是一个抽象类，
EdgeInsets.all（）、EdgeInsets.fromLTRB（）、EdgeInsets.only（）
shape
shape用来设置按钮的形状，其接收值是ShapeBorder类型，ShapeBorder是一个抽象类

1. BeveledRectangleBorder 带斜角的长方形边框、
2. CircleBorder 圆形边框
3. RoundedRectangleBorder 圆角矩形
4. StadiumBorder 两端是半圆的边框
5. side 用来设置边线（颜色，宽度等）
6. borderRadius 用来设置圆角

side接收一个BorderSide类型的值

Dismissible

/**
*  滑动删除
 **/
 const Dismissible({
@required Key key,//
@required this.child,//
this.background,//滑动时组件下一层显示的内容，没有设置secondaryBackground时，从右往左或者从左往右滑动都显示该内容，设置了secondaryBackground后，从左往右滑动显示该内容，从右往左滑动显示secondaryBackground的内容
//secondaryBackground不能单独设置，只能在已经设置了background后才能设置，从右往左滑动时显示
this.secondaryBackground,//
this.onResize,//组件大小改变时回调
this.onDismissed,//组件消失后回调
this.direction = DismissDirection.horizontal,//
this.resizeDuration = const Duration(milliseconds: 300),//组件大小改变的时长
this.dismissThresholds = const <DismissDirection, double>{},//
this.movementDuration = const Duration(milliseconds: 200),//组件消失的时长
this.crossAxisEndOffset = 0.0,//
})
示例
new Dismissible(
  //如果Dismissible是一个列表项 它必须有一个key 用来区别其他项
  key: new Key(lists[index]),
  //在child被取消时调用
  onDismissed: (direction) {
    lists.removeAt(index);
  },
  //如果指定了background 他将会堆叠在Dismissible child后面 并在child移除时暴露
  background: new Container(
    color: Colors.red,
  ),
  child: 这里放你的item widget
  ),
);