前言
最近Flutter发布了1.0版本，因为公司正好没有iOS（逃），作为公司唯一Android开发的我直接把原来的项目转为Flutter，就可以一个人领两个人的工资了
然而转Flutter并没有想象中的那么容易，虽然说Flutter本身对于Android开发者是比较友好的，但是现在资料也并不是很多，常常遇到问题上Google、StackOverFlow也不容易查到，只能硬着头皮看fucking source和官方文档。这里就记录一下我的踩坑记录。
正文
坑点1——文字不对齐
需求描述
如图所示
姓名输入
很简单对吧，在之前Android开发上，左边是一个TextView，右边是一个EditTextView，在父布局ConstraintLayout上，通过baseLine的约束，设置即可。
在Flutter上，输入的控件怎么选择呢？
问题描述
属性这些没有啥好说的，官方文档都说的很清楚。代码如下所示：
@override
Widget build(BuildContext context) {
return new Container(
color: AppColors.GREY_LIGHT,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Row(
children: <Widget>[
// 左边部分文字
new Container(
padding: EdgeInsets.all(16.0).copyWith(right: 0.0),
child: new Text(
"姓名",
style: const TextStyle(color: Colors.black, fontSize: 14.0),
),
),
// 右边部分输入，用Expanded限制子控件的大小
new Expanded(
child: new TextField(
controller: _controller,
// 焦点控制，类似于Android中View的Focus
focusNode: _focusNode,
style: const TextStyle(color: Colors.black, fontSize: 14.0),
decoration: InputDecoration(
hintText: "请输入姓名",
// 去掉下划线
border: InputBorder.none,
contentPadding: EdgeInsets.all(16.0),
),
),
),
],
),
_buildDivider(context)
],
),
);
}
本以为，就轻松实现了，结果如下图所示，可以明显的看到输入文字相对于左边的文字有一个明显的向下的偏移。
本以为是文字没有居中，在没有输入的时候看到
光标、提示文字和左边的文字是对齐的，所以排除居中问题。
然而，当我输入英文时。。。
居然神奇的对齐了。。。
但如果继续输入中文，会发现输入部分所有的文字都会整体下移。
解决问题
顺着源码去简单看了看绘制部分
void _paintCaret(Canvas canvas, Offset effectiveOffset) {
assert(_textLayoutLastWidth == constraints.maxWidth);
final Offset caretOffset = _textPainter.getOffsetForCaret(_selection.extent, _caretPrototype);
final Paint paint = Paint()
..color = _cursorColor;
final Rect caretRect = _caretPrototype.shift(caretOffset + effectiveOffset);
if (cursorRadius == null) {
canvas.drawRect(caretRect, paint);
} else {
final RRect caretRRect = RRect.fromRectAndRadius(caretRect, cursorRadius);
canvas.drawRRect(caretRRect, paint);
}
if (caretRect != _lastCaretRect) {
_lastCaretRect = caretRect;
if (onCaretChanged != null)
onCaretChanged(caretRect);
}
}
可能是这个offset的问题？定位到offset
Axis get _viewportAxis => _isMultiline ? Axis.vertical : Axis.horizontal;
Offset get _paintOffset {
switch (_viewportAxis) {
case Axis.horizontal:
return Offset(-offset.pixels, 0.0);
case Axis.vertical:
return Offset(0.0, -offset.pixels);
}
return null;
}
因为我写的只有一行，所以执行的Axis.horizontal分支的代码，显然，没有任何垂直方向的偏移。所以这个方向不对。
说到文字水平对齐，熟悉Android开发的同学都知道，在画文字时，水平对齐往往是baseline控制的，所以想着也可能是baseline的问题。shift-shift快捷键搜索baseline，看有没有相关的信息。
进入TextBaseline
/// A horizontal line used for aligning text.
enum TextBaseline {
/// The horizontal line used to align the bottom of glyphs for alphabetic characters.
alphabetic,
/// The horizontal line used to align ideographic characters.
ideographic,
}
这是一个枚举类。。。看到这里大概就明白了，上面那个是拉丁文系的baseline对齐，下面是象形文字的对齐，我之前的写法并不能保证Text和TextField用的同一个baseline，需要指明。
修改代码后
style: const TextStyle(
color: Colors.black,
fontSize: 14.0,
textBaseline: TextBaseline.ideographic,
)
这里我们暂时去掉间距
decoration: InputDecoration(
hintText: "请输入姓名",
// 去掉下划线
border: InputBorder.none,
contentPadding: EdgeInsets.all(16.0).copyWith(left: 0.0),
)
终于可以对齐了！
后续
为什么我都用的同一个TextStyle构造，它们的baseline会不同？这里先留个坑，以后回来再补。。。
坑点2——Form.of(context)为空
问题解决
话不多说，直接上代码，这是一个登陆页面
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("登陆"),
centerTitle: true,
),
body: new DefaultTextStyle(
style: AppFonts.NORMAL_BLACK,
child: new Form(
autovalidate: _autoValidate,
onChanged: () {
if (!_autoValidate) {
setState(
() {
_autoValidate = true;
},
);
}
},
child: _buildContent(context),
),
),
);
}
Widget _buildContent(BuildContext context) {
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
margin: const EdgeInsets.all(16.0),
child: new TextFormField(
autovalidate: _autoValidate,
focusNode: _phoneFocus,
keyboardType: TextInputType.phone,
validator: (password) {
String error;
if (password.length <= 0) {
return "请输入手机号";
}
return error;
},
decoration: InputDecoration(
labelText: "手机号",
icon: new Icon(Icons.phone_android),
),
),
),
new Container(
margin: const EdgeInsets.symmetric(horizontal: 16.0),
child: new TextFormField(
textInputAction: TextInputAction.next,
autovalidate: _autoValidate,
focusNode: _passwordFocus,
validator: (password) {
if (password.length <= 0) {
return "请输入密码";
}
return null;
},
onSaved: (text) {
// TODO: 处理登陆
Navigator.of(context).pushReplacement(
new MaterialPageRoute(builder: (context) {
return new HomePage();
}),
);
},
obscureText: _obscureText,
decoration: InputDecoration(
labelText: "密码",
icon: new Icon(Icons.lock),
suffixIcon: new IconButton(
icon: new Icon(Icons.remove_red_eye),
onPressed: () {
setState(
() {
_obscureText = !_obscureText;
},
);
}),
),
),
),
new Container(
margin: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 16.0)
.copyWith(top: 32.0),
child: new NormalButton(
onPressed: () {
final form = Form.of(context);
assert(form != null);
if (form.validate()) {
_phoneFocus.unfocus();
_passwordFocus.unfocus();
form.save();
}
},
text: "登陆",
),
),
],
);
}
为什么用Form.of(context)？
获取到FormState文档上说了有两种方法，一种是GlobalKey，一种是Form.of(context)，GlobalKey的生产代价比较大，所以选用后者。后者，但在运行时，始终获取不到FormState，为什么呢？——read the fucking source。
进入这个方法，看到它是通过查找父亲节点来获取Form的
在获取到State的地方打上断点，调试
在FormFieldState build处中断
进去看一下，原来FormField在build时会在Form中注册，加入Form保存Field的一个set里这也是为什么把FormFiled及其子类放在Form的child中任何Widget里仍然可以通过FormState控制的原因。
说远了...回到正题。在build时可以通过context找到父节点，而且，从上面的断点的变量看出来，widget是这个context的成员，这跟我以前理解的context确实不一样，所以就要定位到BuildContext源码去。
于是乎。。。好像打开了新世界的大门。官方文档中有这样一段：
大概就是每一个Widget都有自己的BuildContext（原来这货不是全局统一的！），如果没注意这个问题可能会发生意想不到的后果。。。可以简单的验证一下。
可以看到，这里传入Form.of(context)的context是LoginPage的context，LoginPage，而Form是在LoginPage里build的，显然，通过LoginPage向上查找是找不到的。。。
所以，有一下两个解决方案：
- 使用GlobalKey（真香）
- 把需要获取Form的控件做成一个Widget类
后续
传入的context到底是什么？
以StatelessWidget为例，查看build(context)方法的引用
从这里我们就知道，原来对于StatelessWidget，context就是一个StatelessElement，StatelessElement是BuildContext的一个实现类
所以说，以后如果需要传入context向上查找，要谨慎使用。
网友评论