Flutter FAQ
约 1 分钟阅读
图标修改和生成
- 图标位于
ios/Runner/Assets.xcassets/AppIcon.appiconset - 生成脚本依赖 imagemagic
- svg 需要编译的时候添加了 librsvg 支持
# macOS 安装 imagemagick
brew install imagemagick --with-librsvg
# 使用指定的图像和目录
# 默认会使用 logo.svg 并输出到当前目录
mkdir out
./gen.sh logo.png outgen.sh
#!/bin/sh
SIZES=${SIZES:-"20x1 20x2 20x3 29x1 29x2 29x3 40x1 40x2 40x3 60x2 60x3 76x1 76x2 83.5x2 1024x1"}
PREFIX=${PREFIX:-"Icon-App"}
source=${1:-logo.svg}
dst=${2:-.}
for s in $SIZES;do
size=${s%x*}
scale=${s##*x}
resize=$(bc <<< ${size}*${scale} )
out=$dst/"$PREFIX-${size}x${size}@${scale}x.png"
echo Generate $out
convert $CONVERT_EXTRA "$source" -resize ${resize}x${resize} -unsharp 1x4 $out
done闪屏修改
- 闪屏图片位于
ios/Runner/Assets.xcassets/LaunchImage.imageset- LaunchImage.png
- [email protected]
- [email protected]
- 可以直接替代图片
- 可以打开
ios/Runner.xcworkspace在 xcode 中选择Runner/Assets.xcassets进行替换 - 闪屏不做全屏可以选择一个合适大小的白色或透明背景即可
# 通过 logo 生成闪屏资源
# -background none 暴露 svg 的透明
CONVERT_EXTRA="-background none" PREFIX=LaunchImage SIZES="120x1 120x2 120x3" ./gen.sh logo2.svg out/
# 拷贝生成的 LaunchImage*.png 到 ios/Runner/Assets.xcassets/LaunchImage.imageset
# 并修改 Contents.json 指向正确的文件闪屏尺寸
| 类型 | 尺寸 |
|---|---|
| 1x | 320 x 480 |
| 2x | 640 x 960 |
| Retina 4 | 640 x 1136 |
| Retina HD 5.5 | 1242 x 2208 |
| Retina HD 4.7 | 750 x 1334 |
| Retina HD 5.5 | 2208 x 1242 (landscape) |
| iPad 1x | 768 x 1024 |
| iPad 2x | 1536 x 2048 |
| iPad 1x | 1024 x 768 (landscape) |
| iPad 2x | 2048 x 1536 (landscape) |
制作 Gif
flutter/flutter/wiki/Making-animated-GIFs-of-Flutter-appsGitHubflutter/flutter/wiki/Making-animated-GIFs-of-Flutter-apps
TabBarView 内容图片会闪烁
- 可以考虑预加载图片
var localImageConfiguration = createLocalImageConfiguration(context);
new AssetImage('assets/slides/2.png').resolve(localImageConfiguration);
new AssetImage('assets/slides/3.png').resolve(localImageConfiguration);滚动监听
- 从 ScrollController 监听 ScrollPosition 来做这样的事, 或者直接监听 ScrollController 再获取 position 即可
- 通过 ScrollNotification 监听来进行布局调整会导致延迟, 因为接收到通知时已经渲染完毕.
嵌入 Web
- dart-flitter/flutter_webview_pluginGitHubdart-flitter/flutter_webview_plugin
- Plugin that allow Flutter to communicate with a native WebView.
- 要求整页为 Web
添加到现有应用
- wiki/Add-Flutter-to-existing-appsGitHubflutter/flutter/wiki/Add-Flutter-to-existing-apps
- #14821GitHub Issueflutter/flutter#14821 Reduce friction encountered when adding Flutter to existing apps
Flutter 可以在网页上运行么
可以
不能, 并且也不打算
Tips
// unfocus
// https://github.com/flutter/flutter/issues/7247
FocusScope.of(context).requestFocus(new FocusNode());
// 不滚动
ListView(
physics: const NeverScrollableScrollPhysics()
)onLongPress 不会释放
- #17072
- onTapUp 不会被触发
- onPointerUp 会触发
Listener(
onPointerUp: (e) {
print("onPointerUp");
},
child: GestureDetector(
onTap: _onTap,
onLongPress: _onLongPress,
child: CircleAvatar(
radius: 30.0,
backgroundColor: Colors.white,
),
),
);裁剪居中
stackoverflow.com/a/49523770/1870054
修改状态栏颜色
Request: API for changing the color of status barGitHub Issueflutter/flutter#7347
多个手势动作同时发生
stackoverflow.com/questions/50824208
ImportError: cannot import name _remove_dead_weakref
Traceback (most recent call last):
File "<input>", line 1, in <module>
File "/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/copy.py", line 52, in <module>
import weakref
File "/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/weakref.py", line 14, in <module>
from _weakref import (
ImportError: cannot import name _remove_dead_weakrefflutter/flutter#17803GitHub Issueflutter/flutter#17803
暂时只能通过卸载 python@2 解决
brew uninstall --ignore-dependencies python@2手动指定 simulator
- flutter/flutter#12345GitHub Issueflutter/flutter#12345
/usr/bin/xcrun simctl list --json devices | grep state关联信息
反向链接、本文链接的其他页面和外部资料。
反向链接
- Flutter笔记 · 常见问题
flutter/flutter · Android/IOS 跨平台应用开发 · 不基于原生组件和 WebView · 自己实现组建和渲染 · 提供一套 MD 组件 · 提供部分 Cupertino(iOS 风格) 组件 · 组件目录 · 主要语言为 Dart, Skia 作为 2D 渲染引擎, 底层引擎由 C++ 实现
参考资料
GitHub7 条
- dart-flitter/flutter_webview_plugingithub.com/dart-flitter/flutter_webview_plugin
- flutter/flutter/wiki/Add-Flutter-to-existing-appsgithub.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
- flutter/flutter/wiki/Making-animated-GIFs-of-Flutter-appsgithub.com/flutter/flutter/wiki/Making-animated-GIFs-of-Flutter-apps
- flutter/flutter#12345github.com/flutter/flutter/issues/12345
- flutter/flutter#14821github.com/flutter/flutter/issues/14821
- flutter/flutter#17803github.com/flutter/flutter/issues/17803
- flutter/flutter#7347github.com/flutter/flutter/issues/7347
其他外链5 条
- docs.flutter.io/flutter/widgets/ScrollNotification-class.htmldocs.flutter.io/flutter/widgets/ScrollNotification-class.html
- stackoverflow.com/a/35213674/1870054stackoverflow.com/a/35213674/1870054
- stackoverflow.com/a/49523770/1870054stackoverflow.com/a/49523770/1870054
- stackoverflow.com/questions/16832459stackoverflow.com/questions/16832459
- stackoverflow.com/questions/50824208stackoverflow.com/questions/50824208