Flutter完整开发实战详解(十七、 实用技巧与填坑二)

作为系列文章的第十七篇，本篇再一次带来 Flutter 开发过程中的实用技巧，让你继续弯道超车，全篇均为个人的日常干货总结，以实用填坑为主，让你少走弯路狂飙车。

前文：

• 一、 Dart语言和Flutter基础
• 二、 快速开发实战篇
• 三、 打包与填坑篇
• 四、 Redux、主题、国际化
• 五、 深入探索
• 六、 深入Widget原理
• 七、 深入布局原理
• 八、 实用技巧与填坑
• 九、 深入绘制原理
• 十、 深入图片加载流程
• 十一、全面深入理解Stream
• 十二、全面深入理解状态管理设计
• 十三、全面深入触摸和滑动原理
• 十四、混合开发打包 Android 篇
• 十五、全面理解State与Provider
• 十六、详解自定义布局实战

image

1、Package get git 失败

Flutter 项目在引用第三库时，一般都是直接引用 pub 上的第三方插件，但是有时候我们为了安全和私密，会选择使用 git 引用，如：

  photo_view:
    git:
      url: https://github.com/CarSmallGuo/photo_view.git
      ref: master

这时候在执行 flutter packages get 过程中，如果出现失败后，再次执行 flutter packages get 可能会遇到如下图所示的问题：

image )

而 flutter packages get 提示 git 失败的原因，主要是：

在下载包的过程中出现问题，下次再拉包的时候，在 .pub_cache 内的 git 目录下会检测到已经存在目录，但是可能是空目录等等，导致 flutter packages get 的时候异常。

所以你需要清除掉 .pub_cache 内的 git 的异常目录，然后最好清除掉项目下的 pubspec.lock ，之后重新执行 flutter packages get 。

win 一般是在 C:\Users\xxxxx\AppData\Roaming\Pub\Cache 路径下有 git 目录。

mac 目录在 ~/.pub-cache 。

2、TextEditingController

image.png

如上代码所示，红线部分表示，如果 controller 为空，就赋值一个 TextEditingController ，这样的写法会导致如下图所示问题：

image

弹出键盘时输入成功后，收起键盘时输入的内容消失了！ 这是因为键盘的弹出和收起都会触发页面 build ，而在 controller 为 null 时，每次赋值的 TextEditingController 会导致 TextField 的 TextEditingValue 重置。

image.png

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

image

3、Scrollable

image

如上图所示，在之前第七篇的时候分析过，滑动列表内一般都会有 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、图片高斯模糊

image

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

class BlurDemoPage extends StatelessWidget {
  @override
  Widget 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 的效果：

image

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

image

当然还有另外一种实现方式，具体可见 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() 。

image

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

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

image

7、行间距

image

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

image

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

image

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

8、Builder

image

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

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

image

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

image

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

image

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

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

image

10、多语言显示异常

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

image

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

• 增加字体 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),
  );
}

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

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

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

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

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

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

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

  @override
  bool isSupported(Locale locale) => true;

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

  @override
  bool shouldReload(FallbackCupertinoLocalisationsDelegate old) => false;
}

class CustomZhCupertinoLocalizations extends DefaultCupertinoLocalizations {
  const CustomZhCupertinoLocalizations();

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

  @override
  String get anteMeridiemAbbreviation => '上午';

  @override
  String get postMeridiemAbbreviation => '下午';

  @override
  String get alertDialogLabel => '警告';

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

  @override
  String timerPickerMinuteLabel(int minute) => '分';

  @override
  String timerPickerSecond(int second) => '秒';

  @override
  String get cutButtonLabel => '裁剪';

  @override
  String get copyButtonLabel => '复制';

  @override
  String get pasteButtonLabel => '粘贴';

  @override
  String get selectAllButtonLabel => '全选';
}

class CustomTCCupertinoLocalizations extends DefaultCupertinoLocalizations {
  const CustomTCCupertinoLocalizations();

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

  @override
  String get anteMeridiemAbbreviation => '上午';

  @override
  String get postMeridiemAbbreviation => '下午';

  @override
  String get alertDialogLabel => '警告';

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

  @override
  String timerPickerMinuteLabel(int minute) => '分';

  @override
  String timerPickerSecond(int second) => '秒';

  @override
  String get cutButtonLabel => '裁剪';

  @override
  String get copyButtonLabel => '復制';

  @override
  String get pasteButtonLabel => '粘貼';

  @override
  String get selectAllButtonLabel => '全選';
}

Future<CupertinoLocalizations> loadCupertinoLocalizations(Locale locale) {
  CupertinoLocalizations localizations;
  if (locale.languageCode == "zh") {
    switch (locale.countryCode) {
      case 'HK':
      case 'TW':
        localizations = CustomTCCupertinoLocalizations();
        break;
      default:
        localizations = CustomZhCupertinoLocalizations();
    }
  } else {
    localizations = DefaultCupertinoLocalizations();
  }
  return SynchronousFuture<CupertinoLocalizations>(localizations);
}

自此，第十七篇终于结束了！(///▽///)

资源推荐

• Github ： https://github.com/CarGuo
• 开源 Flutter 完整项目：https://github.com/CarGuo/GSYGithubAppFlutter
• 开源 Flutter 多案例学习型项目: https://github.com/CarGuo/GSYFlutterDemo
• 开源 Fluttre 实战电子书项目：https://github.com/CarGuo/GSYFlutterBook
• 开源 React Native 项目：https://github.com/CarGuo/GSYGithubApp

文章

《Flutter完整开发实战详解系列》

《移动端跨平台开发的深度解析》

image