flutter 使用问题
1.在使用Textfield中遇到的问题
flutter中的onchange方法和oc中的textField:(UITextField *)textField shouldChangeCharactersInRange:方法的不同
onchange方法中调用刷新方法的时候，会导致循环进入方法中，光标乱闪
///对当前的TextField下的controller监听去刷视图
_controller.addListener(() {
setState(() {});
});
TextField(
controller: _controller,
focusNode: _focusNode,
textInputAction: TextInputAction.search,
style: TextStyle(fontSize: 17, color: Colours.text),
maxLines: 1,
cursorColor: Colours.app_main,
textCapitalization: TextCapitalization.characters,
inputFormatters: [
LengthLimitingTextInputFormatter(21),
FilteringTextInputFormatter.allow(RegExp('[a-z0-9A-Z ]')),
],
decoration: InputDecoration(
border: InputBorder.none,
hintText: '请输入VIN码或点击图片上传',
///这个右侧一键清除的按钮，不随着文字是否存在变动
suffixIcon: _controller.text.isNotEmpty
? IconButton(
icon: Icon(IconFont.guanbi,
size: 15, color: Color(0x66000000)),
onPressed: () => _controller.clear())
: null),
onChanged: (value) {
///这边onchangge的方法，和oc中的输入监听不同，oc中的监听是实时监听，输入前，这个是后
var formateValue = _viewModel.getFormateVinCode(value);
if (formateValue.length % 4 == 0) {
var _newtext = _controller.text + ' ';
_controller.value = TextEditingValue(
text: _newtext,
selection: TextSelection.fromPosition(TextPosition(
affinity: TextAffinity.downstream,
offset: _newtext.length)));
}
},
onSubmitted: (value) {
do some thing...
},
),
2.wrap空间包含row问题
Warp流控件中child中包含row控件的时候，要使用MainAxisSize.min的
wrap流式布局的时候，里面使用了row进行自适应的时候，要采用上述的属性，不然wrap中每行都会充满，
官方注释：
/// Minimize the amount of free space along the main axis, subject to the
/// incoming layout constraints.
///
/// If the incoming layout constraints have a large enough
/// [BoxConstraints.minWidth] or [BoxConstraints.minHeight], there might still
/// be a non-zero amount of free space.
///
/// If the incoming layout constraints are unbounded, and any children have a
/// non-zero [FlexParentData.flex] and a [FlexFit.tight] fit (as applied by
/// [Expanded]), the [RenderFlex] will assert, because there would be infinite
/// remaining free space and boxes cannot be given infinite size.
//最小化沿主轴的空闲空间，取决于
//输入布局约束。
///如果传入的布局约束有足够大
/ / / [BoxConstraints。minWidth]或[BoxConstraints。可能还会有
///是一个非零的空闲空间。
///如果传入的布局约束是无界的，并且任何子元素都有
/ / /非零(FlexParentData。和一个[FlexFit. flex]。配合(如应用于
/// [Expanded])， [RenderFlex]将断言，因为会有无限
///剩余的空闲空间和盒子不能被赋予无限的大小。
wrap中每个只有在边界的时候有个强力约束，每个item没有强约束，所以导致在wrap中使用row控件的时候，row控件会沾满整个wrap控件的一行，充满了item的导致，设置min使其最小化空间约束，根据自控件的内容来进行最小布局约束。
3.Flutter 标签字体下沉Bug
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 3,vertical: 1),
decoration: BoxDecoration(
color: widget.tagBackGroundColor,
borderRadius: BorderRadius.circular(3)),
child: Text(
widget.tagString,
textAlign: TextAlign.center,
style: TextStyle(color: widget.tagTextColor, fontSize: 10),
),
);
}
测试阶段发现，标签在不同的机器上，标签的样式都不一样。如果什么都不设置就会导致字体偏下。基于之前的React开发经验，基本可以确定是字体行高导致的问题。但是Flutter Text组件没有直接设置行高的地方，这就比较蛋疼，后来询问牛梦林，之前超人那边遇到过这种问题，只需Text设置strutStyle，指定fontSize和外层style设置的字体一致、设置合适的height即可，height值为14/10的值。
child: Text(
widget.tagString,
textAlign: TextAlign.center,
strutStyle: StrutStyle(fontSize: 10,height: 1.4),
style: TextStyle(color: widget.tagTextColor, fontSize: 10),
),
为什么height设置为1.4，因为默认fontSize为14，标签使用字体值为10，height默认放大1.4倍。
/// The size of text (in logical pixels) to use when obtaining metrics from the font.
///
/// The [fontSize] is used to get the base set of metrics that are then used to calculated
/// the metrics of strut. The height and leading are expressed as a multiple of
/// [fontSize].
///
/// The default fontSize is 14 logical pixels.
final double? fontSize;
4.Flutter鸿蒙字体被截问题
视觉反馈这个页面的时间字体被截，但是我的机器上都是好的，测试机器也是好的，然后我让视觉把测试机拿过来现场调试，发现是鸿蒙系统。后来慢慢排查，找到了解决方案，只需给包裹Text的外层容器设置一层白色背景即可。
5.Flutter长数字字母省略的显示问题
期望展示效果，单号位置，超出宽度末尾...省略展示
通常做法对Text设置overflow：
overflow: TextOverflow.ellipsis
但以上属性的缺陷是，当遇到长数字，长字母时，会被整体省略：
利用零宽空格字符处理这个问题：
///插入零宽空格字符
String breakWord(String word) {
if (word == null || word.isEmpty) {
return word;
}
var breakWord = ' ';
word.runes.forEach((element) {
breakWord += String.fromCharCode(element);
breakWord += '\u200B';
});
return breakWord;
}
text: breakWord(value),
另一种写法
text: value.replaceAll('', '\u200B')
两种写法，在实际展示样式上，视觉显示宽度略有差异。
此外，第二种写法，用replaceAll在处理包含emoji的字符串时会出现not utf-16的问题。
看情况使用以上两种方式处理即可。
6.Flutter中设置图片宽高失效问题
如下代码，发现设置图片宽高无效
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: ThemeColors.halfTranslucent,
borderRadius: BorderRadius.circular(15)),
child: LoadAssetImage("ic_back",width: 24,height: 24,)
)
解决方案：在LoadAssetImage前再包一层即可生效
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: ThemeColors.halfTranslucent,
borderRadius: BorderRadius.circular(15)),
child: Center(
child: LoadAssetImage("ic_back",width: 24,height: 24,),
),
)
7.Flutter中double精度问题
背景：由于 Dart 使用了和js一样的 IEEE 754 双精度标准进行存储，所以存在和JS一样的精度计算问题
解决方案：采用decimal这个三方库解决
#解决精度问题
decimal: 0.3.5
refundAmount =
"${Decimal.parse("$amountDesc") * Decimal.parse("$refundNumber")}";
8.键盘遮挡问题
1.存在在输入文字的时候，若不选择选择文字预览文字情况下，直接点击拍照，会导致在拍照界面出现键盘，无法进行收起
2.移动开单2.0侧筛界面，当选择确认按钮的时候，一直点击，会导致pop页面多次的情况，导致界面进行多次返回的情况。
原因：
1.该情况，在做收起键盘的操作的时候，未点击预览文字时，直接跳转下个界面的时候，会导致键盘没有完全收起来，同时下面收起键盘的方法的时候，虽然收起了键盘，但是光标仍然存在。
SystemChannels.textInput.invokeMethod('TextInput.hide');
2.侧边页面出现的时候，一直点击确定按钮的时候，会调多次pop方法，会导致关闭抽屉栏页面后，页面还会存在调用一个pop的问题，导致会产生返回上一个界面的问题。
解决
1.使用该方法，收起键盘的同时收起光标，在空白，滑动，点击弹框的时候均收起键盘
FocusScope.of(context).requestFocus(FocusNode());
2.在点击确定的时候，增加标志位，在页面销毁之前，只会调用一次。
1655715619775.jpg
防抖解决方法：
新增到公共库里,支持自定义防抖时间，默认一秒防抖
import 'dart:async';
///按钮防抖，milliseconds防抖时间，默认1秒
Function debounce(Function func, {int milliseconds = 1000}) {
Timer timer;
Function target = () {
if (timer?.isActive ?? false) {
timer?.cancel();
}
timer = Timer(Duration(milliseconds: milliseconds), () {
func?.call();
});
};
return target;
}
使用
child: GestureDetector(
onTap: debounce(() {
print('点击了');
},milliseconds:1500),
),
9.flutter时间格式转换问题
//正常情况下时间格式转字符
var selectedTimeStr =
selectedMonth ?? DateFormat('yyyy-MM').format(DateTime.now());
//可以将时间戳转成对应的字符串
var selectedMonth = '2022-06',
//将字符串转时间戳的时候，正常使用parse方法
var parseTime = DateTime.parse(selectedMonth);
//但是parse只能针对标准格式转化的，比如2022-06这个就无法转，只能转下面标准格式，
//否则会报FormatException错
/// * "2012-02-27"
/// * "2012-02-27 13:27:00"
/// * "2012-02-27 13:27:00.123456789z"
/// * "2012-02-27 13:27:00,123456789z"
/// * "20120227 13:27:00"
/// * "20120227T132700"
/// * "20120227"
/// * "+20120227"
/// * "2012-02-27T14Z"
/// * "2012-02-27T14+00:00"
/// * "-123450101 00:00:00 Z": in the year -12345.
/// * "2002-02-27T14:00:00-0500": Same as "2002-02-27T19:00:00Z"
//使用下面可以解决报错问题,但是无法正确解析，返回的是now的时间格式
var tryParseTime = DateTime.tryParse(selectedMonth) ?? DateTime.now();
//使用下面的可以正常解析
var parseStrictTime = DateFormat('yyyy-MM').parseStrict(selectedMonth);
//parseStrict可以解析任意格式保持统一的，下面的可以解析成2022-01-01 0000000时间
selectedMonth = '2022-';
parseStrictTime = DateFormat('yyyy-').parseStrict(selectedMonth);
