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