Flutter完整开发实战详解(十七、实用技巧与填坑二)，阿里Android开发手册

最新推荐文章于 2024-05-13 00:21:04 发布

优秀后端工程师

最新推荐文章于 2024-05-13 00:21:04 发布

阅读量1k

点赞数 24

分类专栏： 2024年程序员学习文章标签： flutter android gitee

本文链接：https://blog.csdn.net/m0_60750088/article/details/136970117

版权

2024年程序员学习专栏收录该内容

199 篇文章

订阅专栏

4、图片高斯模糊

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在 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: 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: [
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(textTheme.body2),
body1: getCopyTextStyle(textTheme.body1),
caption: getCopyTextStyle(textTheme.caption),
button: getCopyTextStyle(textTheme.button),
subtitle: getCopyTextStyle(textTheme.subtitle),
overline: getCopyTextStyle(textTheme.overline),
);
}