跳至正文
Wener Notes

Flutter FAQ

约 1 分钟阅读

图标修改和生成

  • 图标位于 ios/Runner/Assets.xcassets/AppIcon.appiconset
  • 生成脚本依赖 imagemagic
    • svg 需要编译的时候添加了 librsvg 支持
bash
# macOS 安装 imagemagick
brew install imagemagick --with-librsvg

# 使用指定的图像和目录
# 默认会使用 logo.svg 并输出到当前目录
mkdir out
./gen.sh logo.png out

gen.sh

bash
#!/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
  • 可以直接替代图片
  • 可以打开 ios/Runner.xcworkspace 在 xcode 中选择 Runner/Assets.xcassets 进行替换
  • 闪屏不做全屏可以选择一个合适大小的白色或透明背景即可
bash
# 通过 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 指向正确的文件

闪屏尺寸

类型尺寸
1x320 x 480
2x640 x 960
Retina 4640 x 1136
Retina HD 5.51242 x 2208
Retina HD 4.7750 x 1334
Retina HD 5.52208 x 1242 (landscape)
iPad 1x768 x 1024
iPad 2x1536 x 2048
iPad 1x1024 x 768 (landscape)
iPad 2x2048 x 1536 (landscape)

制作 Gif

TabBarView 内容图片会闪烁

  • 可以考虑预加载图片
dart
var localImageConfiguration = createLocalImageConfiguration(context);
new AssetImage('assets/slides/2.png').resolve(localImageConfiguration);
new AssetImage('assets/slides/3.png').resolve(localImageConfiguration);

滚动监听

  1. 从 ScrollController 监听 ScrollPosition 来做这样的事, 或者直接监听 ScrollController 再获取 position 即可
  2. 通过 ScrollNotification 监听来进行布局调整会导致延迟, 因为接收到通知时已经渲染完毕.

嵌入 Web

添加到现有应用

Flutter 可以在网页上运行么

可以

不能, 并且也不打算

Tips

dart
// unfocus
// https://github.com/flutter/flutter/issues/7247
FocusScope.of(context).requestFocus(new FocusNode());

// 不滚动
ListView(
  physics: const NeverScrollableScrollPhysics()
)

onLongPress 不会释放

  • #17072
    • onTapUp 不会被触发
  • onPointerUp 会触发
dart
Listener(
    onPointerUp: (e) {
        print("onPointerUp");
    },
    child: GestureDetector(
        onTap: _onTap,
        onLongPress: _onLongPress,
        child: CircleAvatar(
            radius: 30.0,
            backgroundColor: Colors.white,
        ),
    ),
);

裁剪居中

stackoverflow.com/a/49523770/1870054

修改状态栏颜色

多个手势动作同时发生

stackoverflow.com/questions/50824208

ImportError: cannot import name _remove_dead_weakref

text
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_weakref

暂时只能通过卸载 python@2 解决

bash
brew uninstall --ignore-dependencies python@2

手动指定 simulator

bash
/usr/bin/xcrun simctl list --json devices | grep state

关联信息

反向链接、本文链接的其他页面和外部资料。

反向链接

  • Flutter
    笔记 · 常见问题

    flutter/flutter · Android/IOS 跨平台应用开发 · 不基于原生组件和 WebView · 自己实现组建和渲染 · 提供一套 MD 组件 · 提供部分 Cupertino(iOS 风格) 组件 · 组件目录 · 主要语言为 Dart, Skia 作为 2D 渲染引擎, 底层引擎由 C++ 实现

参考资料

GitHub7 条
其他外链5 条
最近更新commit 4716d97编辑