2020年12月6日 星期日

如果你們家的 Designer 一點都不想做可以適應各種不同裝置尺寸的設計

如果,你們家的 Designer:

  • 一點都不想要考慮市面上已經出現了無數多種不同品牌不同機種的行動裝置
  • 一點都不打算考慮不同裝置之間的尺寸與長寬變化到底有哪些差異
  • 一點都不打算考慮他的設計稿放在用戶的手機上到底跑起來是什麼樣子
  • 一點都不把用戶拿到手中的體驗當成真正的工作內容
  • 只覺得自己對一個˙畫面只需要畫一張設計稿,之後怎樣把這張美術圖變成真正的 app,完全不關他的事情
  • 而且只有他真正代表用戶,因為就是由他負責使用者體驗的設計工作,其他人都不該置喙,他畫了這張圖就是聖旨

那麼,當你看著一張圖示與背景圖片位置完全無法分隔,你怎麼想都想不出來怎樣可以幫他寫一個比較具有彈性的 layout 時,Flutter 這個框架完美地適合你。

你就寫一個 Container,照著他給你的那張圖填入 width 與 height,在裡頭就直接照著那個畫面做到 pixel 等級精確度刻 UI,最後,在 Container 外面寫一個 Transform.scale,然後直接等比例放大。

如果裝置上的長寬比與設計稿不同,你就給他在周圍留黑邊。

當然你想要留白邊也可以。

2020年12月5日 星期六

怎樣減緩接收 Stream 的速度

 需求是這樣的:我們現在要在 app 裡頭接收一個 stream,在 stream 中資料更新時,要更新 app 畫面中顯示的內容。不過,這個 stream 給資料的速度太快了,至少,比我們想要更新畫面的頻率來得更快,我們想要只根據一定的頻率,依據 stream 更新畫面。

如果原本的 code 像這樣:

myStream.listen((data) {
   // Do something with data
});

我們可以簡單改寫一下,將這個 stream 與另外一個 perodic 的 stream 合併在一起。

import 'package:async/async.dart';

final periodic = Stream.periodic(Duration(milliseconds: 100));
final zip = StreamZip([myStream, periodic]);
zip.listen((data) {
   final desired = data[0]
   // Do something with data
});

StreamZip 可以合併多個 stream,當兩個 stream 都收到更新時,才會觸發,所以,就算 myStream 已經接收到資料,我們的 app 也還是會等到下次 periodic 這個 stream 被觸發時,才會去做我們指定的對應動作。

如果你們家的 Designer 一點都不想做可以適應各種不同裝置尺寸的設計

如果,你們家的 Designer: 一點都不想要考慮市面上已經出現了無數多種不同品牌不同機種的行動裝置 一點都不打算考慮不同裝置之間的尺寸與長寬變化到底有哪些差異 一點都不打算考慮他的設計稿放在用戶的手機上到底跑起來是什麼樣子 一點都不把用戶拿到手中的體驗當成真正的工作內容 只覺...