Flutter 完整开发实战详解 (十七、实用技巧与填坑二)，Android 面试真题精选

2021 年 11 月 27 日
本文字数：3878 字
阅读完需：约 13 分钟

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

4、图片高斯模糊

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

class BlurDemoPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: new Container(child: Stack(children: <Widget>[Positioned(top: 0,bottom: 0,left: 0,right: 0,child: new Image.asset("static/gsy_cat.png",fit: BoxFit.cover,width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,)),new Center(child: new Container(width: 200,height: 200,child: ClipRRect(borderRadius: BorderRadius.circular(15.0),child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),child: new Row(mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Icon(Icons.ac_unit),new Text("哇！！")],)))))],)));}}

5、滚动到指定位置

因为目前 Flutter 并没有直接提供滚动到指定 Item 的方法，在每个 Item 大小不一的情况下，折中利用如图下所示代码，可以快速实现滚动到指定 Item 的效果：

上图为部分代码，完整代码可见 scroll_to_index_demo_page2.dart ，这里主要是给每个 item 都赋予了一个 GlobalKey , 利用 findRenderObject 找到所需 item 的 RenderBox ，然后使用 localToGlobal 获取 item 在 ViewPort 这个 ancestor 中的偏移量进行滚动：

当然还有另外一种实现方式，具体可见 scroll_to_index_demo_page.dart

6、findRenderObject

在 Flutter 中是存在 容器 Widget 和 渲染 Widget 的区别的，一般情况下:

Text、Sliver 、ListTile 等都是属于渲染 Widget ，其内部主要是 RenderObjectElement 。
StatelessWidget / StatefulWidget 等属于容器 Widget ，其内部使用的是 ComponentElement ， ComponentElement 本身是不存在 RenderObject 的。

结合前面篇章我们说过 BuildContext 的实现就是 Element，所以 context.findRenderObject() 这个操作其实就是 Element 的 findRenderObject() 。

那么如上图所示，findRenderObject 的实现最终就是获取 renderObject，在 Element 中 renderObject 的获取逻辑就很清晰了，在遇到 ComponentElement 时，执行的是 element.visitChildren(visit); , 递归直到找到 RenderObjectElement 。

所以如下代码所示，print("${globalKey.currentContext.findRenderObject()}"); 最终输出了 SizedBox 的 RenderObject 。

7、行间距

在 Flutter 中，是没有直接设置 Text 行间距的方法的， Text 显示的效果是如下图所示的逻辑组成：

那么我们应该如何处理行间距呢？如下图所示，通过设置 StrutStyle 的 leading , 然后利用 Transform 做计算翻方向位置偏移，因为 leading 是上下均衡的，所以计算后就可以得到我们所需要的行间距大小。 (虽然无法保证一定 100%像素准确，你是否还知道其他方法？)

这里额外提一点，可以通过父节点使用 DefaultTextStyle 来实现局部样式的共享哦。

8、Builder

在 Flutter 中存在 Builder 这样一个 Widget，看源码发现它其实就是 StatelessWidget 的简单封装，那为什么还需要它的存在呢？

如下图所示，相信一些 Flutter 开发者在使用 Scaffold.of(context).showSnackBar(snackbar) 时，可能遇到过如下错误，这是因为传入的 context 属于错误节点导致的，因为此处传入的 context 并不能找到页面所在的 Scaffold 节点。

所以这时候 Builder 的作用就体现了，如下所示，通过 builder 方法返回赋予的 context ，在向上查找 Scaffold 的时候，就可以顺利找到父节点的 Scaffold 了，这也一定程度上体现了 ComponentElement 的作用之一。

9、快速实现动画切换效果

要实现如上图所示动画效果，在 Flutter 中提供了 AnimatedSwitcher 封装简易实现。

如下图所示，通过嵌套 AnimatedSwitcher ，指定 transitionBuilder 动画效果，然后在数据改变时，同时改变需要执行动画的 key 值，即可达到动画切换的效果。

10、多语言显示异常

在官方的 github.com/flutter/flu… issue 中可以发现，Flutter 在韩语/日语与中文同时显示，会导致 iOS 下出现文字渲染异常的问题 ，如下图所示，左边为异常情况。

改问题解决方案暂时有两种：

增加字体 ttf ，全局指定改字体显示。
修改主题下所有 TextTheme 的 fontFamilyFallback ：

getThemeData() {var themeData = ThemeData(primarySwatch: primarySwatch);

var result = themeData.copyWith(textTheme: confirmTextTheme(themeData.textTheme),accentTextTheme: confirmTextTheme(themeData.accentTextTheme),primaryTextTheme: confirmTextTheme(themeData.primaryTextTheme),);return result;}/// 处理 ios 上，同页面出现韩文和简体中文，导致的显示字体异常 confirmTextTheme(TextTheme textTheme) {getCopyTextStyle(TextStyle textStyle) {return textStyle.copyWith(fontFamilyFallback: ["PingFang SC", "Heiti SC"]);}

return textTheme.copyWith(display4: getCopyTextStyle(textTheme.display4),display3: getCopyTextStyle(textTheme.display3),display2: getCopyTextStyle(textTheme.display2),display1: getCopyTextStyle(textTheme.display1),headline: getCopyTextStyle(textTheme.headline),title: getCopyTextStyle(textTheme.title),subhead: getCopyTextStyle(textTheme.subhead),body2: getCopyTextStyle(tex

《Android 学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】完整内容开源分享

tTheme.body2),body1: getCopyTextStyle(textTheme.body1),caption: getCopyTextStyle(textTheme.caption),button: getCopyTextStyle(textTheme.button),subtitle: getCopyTextStyle(textTheme.subtitle),overline: getCopyTextStyle(textTheme.overline),);}

ps ：通过WidgetsBinding.instance.window.locale; 可以获取到手机平台本身的当前语言情况，不需要 context ，也不是你设置后的 Locale 。

11、长按输入框导致异常的情况

如果项目存在多语言和主题切换的场景，可能会遇到长按输入框导致异常的场景，目前可推荐两种解放方法：

1、可以给你的自定义 ThemeData 强制指定固定一个平台，但是该方式会导致平台复制粘贴弹出框没有了平台特性：

///防止输入框长按崩溃问题 platform: TargetPlatform.android

2、增加一个自定义的 LocalizationsDelegate , 实现多语言环境下的自定义支持：

class FallbackCupertinoLocalisationsDelegateextends LocalizationsDelegate<CupertinoLocalizations> {const FallbackCupertinoLocalisationsDelegate();

@overridebool isSupported(Locale locale) => true;

@overrideFuture<CupertinoLocalizations> load(Locale locale) => loadCupertinoLocalizations(locale);

@overridebool shouldReload(FallbackCupertinoLocalisationsDelegate old) => false;}

class CustomZhCupertinoLocalizations extends DefaultCupertinoLocalizations {const CustomZhCupertinoLocalizations();

@overrideString datePickerMinuteSemanticsLabel(int minute) {if (minute == 1) return '1 分钟';return minute.toString() + ' 分钟';}

@overrideString get anteMeridiemAbbreviation => '上午';

@overrideString get postMeridiemAbbreviation => '下午';

@overrideString get alertDialogLabel => '警告';

@overrideString timerPickerHourLabel(int hour) => '小时';

@overrideString timerPickerMinuteLabel(int minute) => '分';

@overrideString timerPickerSecond(int second) => '秒';

@overrideString get cutButtonLabel => '裁剪';

@overrideString get copyButtonLabel => '复制';

@overrideString get pasteButtonLabel => '粘贴';

@overrideString get selectAllButtonLabel => '全选';}

class CustomTCCupertinoLocalizations extends DefaultCupertinoLocalizations {const CustomTCCupertinoLocalizations();

@overrideString datePickerMinuteSemanticsLabel(int minute) {if (minute == 1) return '1 分鐘';return minute.toString() + ' 分鐘';}

@overrideString get anteMeridiemAbbreviation => '上午';

@overrideString get postMeridiemAbbreviation => '下午';

@overrideString get alertDialogLabel => '警告';

@overrideString timerPickerHourLabel(int hour) => '小时';

尾声

开发是需要一定的基础的，我是 08 年开始进入 Android 这行的，在这期间经历了 Android 的鼎盛时期，和所谓的 Android”凉了“。中间当然也有着，不可说的心酸，看着身边朋友，同事一个个转前端，换行业，其实当时我的心也有过犹豫，但是我还是坚持下来了，这次的疫情就是一个好的机会，大浪淘沙，优胜劣汰。再等等，说不定下一个黄金浪潮就被你等到了。