Flutter完整开发实战详解：实用技巧与填坑二

2019-09-0218:48:56APP与小程序开发Comments5,136 views字数 7498阅读模式

1、Package get git 失败

Flutter 项目在引用第三库时，一般都是直接引用 pub 上的第三方插件，但是有时候我们为了安全和私密，会选择使用 git 引用，如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

  photo_view:
    git:
      url: https://github.com/CarSmallGuo/photo_view.git
      ref: master
复制代码

这时候在执行 flutter packages get 过程中，如果出现失败后，再次执行 flutter packages get 可能会遇到如下图所示的问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

) 而 flutter packages get 提示 git 失败的原因，主要是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

在下载包的过程中出现问题，下次再拉包的时候，在 .pub_cache 内的 git 目录下会检测到已经存在目录，但是可能是空目录等等，导致 flutter packages get 的时候异常。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

所以你需要清除掉 .pub_cache 内的 git 的异常目录，然后最好清除掉项目下的 pubspec.lock ，之后重新执行 flutter packages get 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

win 一般是在 C:\Users\xxxxx\AppData\Roaming\Pub\Cache 路径下有 git 目录。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html
mac 目录在 ~/.pub-cache 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

2、TextEditingController

如上代码所示，红线部分表示，如果 controller 为空，就赋值一个 TextEditingController ，这样的写法会导致如下图所示问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

弹出键盘时输入成功后，收起键盘时输入的内容消失了！ 这是因为键盘的弹出和收起都会触发页面 build ，而在 controller 为 null 时，每次赋值的 TextEditingController 会导致 TextField 的 TextEditingValue 重置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

如上图所示，因为当 TextField 的 controller 不为空时，update 时是不会执行 value 的拷贝，所以为了避免这类问题，如下图所示， 需要先在全局构建 TextEditingController 再赋值，如果 controller 为空直接给 null 即可，避免 build 时每次重构 TextEditingController 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

3、Scrollable

如上图所示，在之前第七篇的时候分析过，滑动列表内一般都会有 Scrollable 的存在，而 Scrollable 恰好是一个 InheritedWidget ，这就给我们在 children 中调用 Scrollable 相关方法提供了便利。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

如下代码所依，通过 Scrollable.of(context) 我们可以更解耦的在 ListView/GridView 的 children 对其进行控制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

ScrollableState state = Scrollable.of(context)

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

复制代码

4、图片高斯模糊

在 Flutter 中，提供了 BackdropFilter 和 ImageFilter 实现了高斯模糊的支持，如下代码所示，可以快速实现上图的高斯模糊效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

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 的效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

上图为部分代码，完整代码可见 scroll_to_index_demo_page2.dart ，这里主要是给每个 item 都赋予了一个 GlobalKey , 利用 findRenderObject 找到所需 item 的 RenderBox ，然后使用 localToGlobal 获取 item 在 ViewPort 这个 ancestor 中的偏移量进行滚动：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

当然还有另外一种实现方式，具体可见 scroll_to_index_demo_page.dart文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

6、findRenderObject

在 Flutter 中是存在 容器 Widget 和 渲染Widget 的区别的，一般情况下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

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

结合前面篇章我们说过 BuildContext 的实现就是 Element，所以 context.findRenderObject() 这个操作其实就是 Element 的 findRenderObject() 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

那么如上图所示，findRenderObject 的实现最终就是获取 renderObject，在 Element 中 renderObject 的获取逻辑就很清晰了，在遇到 ComponentElement 时，执行的是 element.visitChildren(visit); , 递归直到找到 RenderObjectElement 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

所以如下代码所示，print("${globalKey.currentContext.findRenderObject()}"); 最终输出了 SizedBox 的 RenderObject 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

7、行间距

在 Flutter 中，是没有直接设置 Text 行间距的方法的， Text 显示的效果是如下图所示的逻辑组成：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

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

这里额外提一点，可以通过父节点使用 DefaultTextStyle 来实现局部样式的共享哦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

8、Builder

在 Flutter 中存在 Builder 这样一个 Widget，看源码发现它其实就是 StatelessWidget 的简单封装，那为什么还需要它的存在呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

如下图所示，相信一些 Flutter 开发者在使用 Scaffold.of(context).showSnackBar(snackbar) 时，可能遇到过如下错误，这是因为传入的 context 属于错误节点导致的，因为此处传入的 context 并不能找到页面所在的 Scaffold 节点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

所以这时候 Builder 的作用就体现了，如下所示，通过 builder 方法返回赋予的 context ，在向上查找 Scaffold 的时候，就可以顺利找到父节点的 Scaffold 了，这也一定程度上体现了 ComponentElement 的作用之一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

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

要实现如上图所示动画效果，在 Flutter 中提供了 AnimatedSwitcher 封装简易实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

如下图所示，通过嵌套 AnimatedSwitcher ，指定 transitionBuilder 动画效果，然后在数据改变时，同时改变需要执行动画的 key 值，即可达到动画切换的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

10、多语言显示异常

在官方的 github.com/flutter/flu… issue 中可以发现，Flutter 在韩语/日语与中文同时显示，会导致 iOS 下出现文字渲染异常的问题 ，如下图所示，左边为异常情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

改问题解决方案暂时有两种：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

增加字体 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 。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

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

如果项目存在多语言和主题切换的场景，可能会遇到长按输入框导致异常的场景，目前可推荐两种解放方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

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);
}

作者：恋猫de小郭
链接：https://juejin.im/post/5d6cb579f265da03da24aeb9
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/16022.html