Flutter完整开发实战详解(十七、 实用技巧与填坑二)，移动端页面开发流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QhZqJ68V-1646114802066)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da8ac3f9ea8b?imageView2/0/w/1280/h/960/ignore-error/1)]

如上图所示，因为当 TextField 的 controller 不为空时，update 时是不会执行 value 的拷贝，所以为了避免这类问题，如下图所示， 需要先在全局构建 TextEditingController 再赋值，如果 controller 为空直接给 null 即可，避免 build 时每次重构 TextEditingController 。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KBqYbiTl-1646114802067)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da8ac3ec9fb2?imageView2/0/w/1280/h/960/ignore-error/1)]

3、Scrollable

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vc4qbY3K-1646114802068)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da8ae00435ac?imageView2/0/w/1280/h/960/ignore-error/1)]

如上图所示，在之前第七篇的时候分析过，滑动列表内一般都会有 Scrollable 的存在，而 Scrollable 恰好是一个 InheritedWidget ，这就给我们在 children 中调用 Scrollable 相关方法提供了便利。

如下代码所依，通过 Scrollable.of(context) 我们可以更解耦的在 ListView/GridView 的 children 对其进行控制。

ScrollableState state = Scrollable.of(context)

///获取 _scrollable 内 viewport 的 renderObject
RenderObject renderObject = state.context.findRenderObject();
///监听位置更新
state.position.addListener((){});
///通知位置更新
state.position.notifyListeners();
///滚动到指定位置
state.position.jumpTo(1000);
····

4、图片高斯模糊

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-amsPeKKN-1646114802068)(https://user-gold-cdn.xitu.io/2019/11/18/16e7da8aecf252c2?imageView2/0/w/1280/h/960/ignore-error/1)]

在 Flutter 中，提供了 BackdropFilter 和 ImageFilter 实现了高斯模糊的支持，如下代码所示，可以快速实现上图的高斯模糊效果。

class BlurDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: new Container(
child: Stack(
children: [
Positioned(
top: 0,
bottom: 0,
left: 0,
right: 0,
child: new Image.asset(
“static/gsy_cat.png”,
fit: BoxFit.cover,
width: M