1、Text 的 TextOverflow.ellipsis 不生效
有时候我们为 Text 设置 ellipsis ，却发现并没有生效，而是出现如下图左边提示 overflowed 的警告。
文章图片
其实大部分时候，这是 Text 内部的 RenderParagraph 在判断 final bool didOverflowWidth = size.width < textSize.width;
时， size.width 和 textSize.width 是相等导致的。
文章图片
文章图片
所以你需要给 Text 设置一个 Container 之类的去约束它的大小，或者是 Row 中通过 Expanded + Container 去约束你的 Text 。
文章图片
文章图片
文章图片
【flutter使用记录|flutter 问题记录】
2、获取控件的大小和位置
看过第六篇的同学应该知道， 我们可以用 GlobalKey ，通过 key 去获取到控件对象的 BuildContext ，而前面我们也说过 BuildContext 的实现其实是 Element ，而 Element 持有 RenderObject 。So，我们知道的 RenderObject ，实际上获取到的就是 RenderBox ，那么通过
RenderBox 我们就只大小和位置了：
文章图片
showSizes() {
RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
print(renderBoxRed.size);
}
文章图片
87
八、 实用技巧与填坑
文章图片
文章图片
showPositions() {
RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
print(renderBoxRed.localToGlobal(Offset.zero));
}
3、获取状态栏高度和安全布局
如果你看过 MaterialApp 的源码，你应该会看到它的内部是一个 WidgetsApp ，而 WidgetsApp 内有一个 MediaQuery ，熟悉它的朋友知道我们可以通过 MediaQuery.of(context).size 去获取屏幕大小。
文章图片
其实 MediaQuery 是一个 InheritedWidget ，它有一个叫 MediaQueryData 的参数，这个参数是通过如下图设置的，再通过源码我们知道，一般情况下 MediaQueryData 的 padding 的 top 就是状态栏的高度。
文章图片
所以我们可以通过 MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top 获取到状态栏高度，当然有时候可能需要考虑 viewInsets 参数。
文章图片
文章图片
至于 AppBar 的高度，默认是 Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)), ，kToolbarHeight 是一个固定数据，当然你可以通过实现 PreferredSizeWidget 去自定义 AppBar 。
文章图片
文章图片
文章图片
同时你可能会发现，有时候在布局时发现布局位置不正常，居然是从状态栏开始计算，这时候你需要
用SafeArea嵌套下，至于为什么，看源码你就会发现MediaQueryData的存在。
4、设置状态栏颜色和图标颜色
简单的可以通过AppBar的 brightness 或者ThemeData去设置状态栏颜色。
文章图片
但是如果你不想用 AppBar ，那么你可以嵌套 AnnotatedRegion 去设置状态栏样式，通过 SystemUiOverlayStyle 就可以快速设置状态栏和底部导航栏的样式。
文章图片
同时你还可以通过 SystemChrome.setSystemUIOverlayStyle 去设置，前提是你没有使用 AppBar 。需要注意的是，所有状态栏设置是全局的， 如果你在 A面设置后，B面没有手动设置或者使用 AppBar ，那么这个设置将直接呈现在 B面。
文章图片
5、系统字体缩放
现在的手机一般都提供字体缩放，这给应用开发的适配上带来一定工作量，所以大多数时候我们会选择禁止应用跟随系统字体缩放。
文章图片
88
八、 实用技巧与填坑
文章图片
在 Flutter 中字体缩放也是和MediaQueryData的textScaleFactor有关。所以我们可以在需要的
面，通过最外层嵌套如下代码设置，将字体设置为默认不允许缩放。
文章图片
MediaQuery(
data: MediaQueryData.fromWindow(WidgetsBinding.instance.window).copyWith(text
ScaleFactor: 1),
child: new Container(),
);
6、Margin 和 Padding
在使用 Container 的时候我们经常会使用到 margin 和 padding 参数，其实在上一篇我们已经说过， Container 其实只是对各种布局的封装，内部的 margin 和 padding 其实是通过 Padding 实现的，而 Padding 不支持负数，所以如果你需要用到负数的情况下，推荐使用 Transform 。
文章图片
Transform(
transform: Matrix4.translationValues(10, -10, 0),
child: new Container(),
);
7、控件圆?裁剪
日常开发中我们大致上会使用两种圆?方案：
一种是通过Decoration的实现类BoxDecoration去实现。
文章图片
一种是通过ClipRRect去实现。
文章图片
其中 BoxDecoration 一般应用在 DecoratedBox 、 Container 等控件，这种实现一般都是直接 Canvas 绘制时，针对当前控件的进行背景圆?化，并不会影响其 child 。这意味着如果你的 child 是图片或者也有背景色，那么很可能圆?效果就消失了。
而ClipRRect的效果就是会影响 child 的，具体看看其如下的 RenderObject 源码可知。
文章图片
8、PageView
文章图片
89
八、 实用技巧与填坑
文章图片
如果你在使用 TarBarView ，并且使用了 KeepAlive 的话，那么我推荐你直接使用 PageView 。因为目前到 1.2 的版本，在 KeepAlive 的 状态下，跨两个 面以上的 Tab 直接切换，
TarBarView 会导致 面的 dispose 再重新 initState 。尽管 TarBarView 内也是封装了 PageView + TabBar 。
文章图片
你可以直接使用PageView+TabBar去实现，然后 tab 切换时使用
文章图片
_pageController.jumpTo(MediaQuery.of(context).size.width * index);
可以避免一些问题。当然，这时候损失的就是动画效果了。事实上 TarBarView 也只是针对 PageView + TabBar 做了一层封装。
文章图片
除了这个，其实还有第二种做法，使用如下方 PageStorageKey 保持 面数状态，但是因为它是 save and restore values ，所以的 面的 dispose 再重新 initState 方法，每次都会被调用。
文章图片
return new Scaffold(
key: new PageStorageKey
)
9、懒加载
Flutter 中通过FutureBuilder或者StreamBuilder可以和简单的实现懒加载，通过future或
文章图片
者 stream “异步” 获取数据，之后通过 AsyncSnapshot 的 data 再去加载数据，至于流和异步的概念，以后再展开吧。
文章图片
10、Android 返回键回到桌面
Flutter 官方已经为你提供了 android_intent 插件了，这种情况下，实现回到桌面可以如下简单实现：
文章图片
Future
AndroidIntent intent = AndroidIntent(
action: 'android.intent.action.MAIN',
category: "android.intent.category.HOME",
);
await intent.launch();
}
return Future.value(false);
}
·····
return WillPopScope(
onWillPop: () {
return _dialogExitApp(context);
},
child:xxx);
文章图片
自此，第八篇终于结束了！(///▽///)
文章图片
推荐阅读
- Flutter|Flutter Hero 实现共享元素转场动画
- Flutter|Flutter开发中的一些小技巧整理
- Flutter|【Flutter】Android原生WebView（非Flutter WebView）与FlutterWeb交互
- Android开发|Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密
- Flutter 专题109 图解自定义 ACERadio 单选框 #yyds干货盘点#
- Flutter 专题108 图解 PageView 滑动页面预览小尝试 #yyds干货盘点#
- Flutter 专题82 初识 Flutter Stream#yyds干货盘点#
- Flutter|Flutter入门学习--(4)Hello World
- Flutter|Flutter入门之Dart(第一篇) Hello World