Flutter学习笔记

最近在进行Flutter开发，有一些心得想写下来。

Flutter子控件和父控件数据交互。

在官方文档中中的为您的Flutter应用程序添加交互一文中有比较详细的描述。其中包括：父控件向子控件传递数据、子控件向父控件传递数据、混合传递数据。在这就不做过多的描述了，如果有需要的同学可以照着官方例子跟着做一遍大致就明白是怎么回事了。

startActivityForResult 在Flutter中等价于什么

关于这个在官方文档的描述中过于粗糙，可能很多人都不太看得懂。以下是官方文档描述：

处理Flutter中所有路由的Navigator类可用于从已经push到栈的路由中获取结果。 这可以通过等待push返回的Future来完成。例如，如果您要启动让用户选择其位置的位置的路由，则可以执行以下操作：
Map coordinates = await Navigator.of(context).pushNamed(’/location’);
然后在你的位置路由中，一旦用户选择了他们的位置，你可以将结果”pop”出栈
Navigator.of(context).pop({“lat”:43.821757,“long”:-79.226392});

这里我将其白话一下：
首先我们来看一下Navigator类里的push方法（开启页面的方法）

  static Future push(BuildContext context, Route route) {
    return Navigator.of(context).push(route);
  }

可以看到他返回的是一个Future类型的数据。
再来看下Navigator中的pop方法（关闭页面方法）

  @optionalTypeArgs
  static bool pop(BuildContext context, [ T result ]) {
    return Navigator.of(context).pop(result);
  }

pop方法其实是对Navigator.of(context).pop的封装，是一种省略了context的写法，可以看到这个方法有一个位置可选参数result，这个result是一个继承自Object的泛型。对应android里面其实是setResult方法，result就是我们返回上一个界面的参数。
问题来了，知道了参数在哪里去设置了，那么在上一个页面如何接受到传递的这个参数呢？其实就是通过push方法返回的Future对象，通过Future的then方法就可以对返回的数据进行处理了

  Navigator.push().then((result) {
  		_result= result;
  })

result就是我们pop时的result

TextField

TextField设置了maxLength如何将右下角显示输入数与总数的数字去掉

大家可能有一种困扰，就是TextField设置了maxLength后右下角会显示输入数与总数。这去掉那个数字也很简单在TextField的InputDecoration中设置counterText为空字符串就行了

TextField(decoration: InputDecoration(counterText: ''), maxLength：5)

TextField监听焦点变化

// 声明一个FocusNode
FocusNode _focusNode = FocusNode();
// 初始化view的时候可以设置监听
_focusNode.addListener(focusListener);
// 在页面dispose的时候需要remove掉这个Listener
_focusNode.removeListener(focusListener);
// TextField调用
TextField(focusNode: focusNode)

获取焦点

FocusScope.of(context).requestFocus(focusNode);

失去焦点

// 手动失去，例如：点击某个按钮让输入框失去焦点
_focusNode.unfocus(); 

// 被动失去，例如：点击屏幕外其他地方失去
GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          // 触摸收起键盘
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: *****
 )

FlatButton

用过FlatButton应该都知道它有一个disabledColor属性，却没有给它设置是否可用的属性，其实我们可以将onPressed设置为null，这个按钮就是不可用状态了。
如果某个按钮是需要根据TextField的输入状态去判断是否可用只需这样设置：

	/// 保存按钮是否可点状态
	bool _isBtnEnable;

	TextField(
		...
		onChanged: (String input) {
         setState(() {
    		 _isBtnEnable = input.isNotEmpty;
         });
       }
       ...
    )

	FlatButton(
          padding: EdgeInsets.fromLTRB(12, 6, 12, 6),
          color: Color(0xFF2196F3),
          disabledColor: Color(0xFFD3EAFD),
          child: Text(
            "button",
            style: TextStyle(
              fontSize: 14,
              color: Color(0xFFFFFFFF),
            ),
          ),
          onPressed: _isBtnEnable  ? () {
                   /// 点击事件
                } : null,
        )

至于其他按钮是不是一样的效果我想应该差不多，感兴趣的同学可以去试试。

暂时先写这么多吧，以后如果有更多再写
如果文章中提到的有什么不对的地方欢迎大家指出来，大家一起学习、进步。