iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
0
Mobile Development

前端工程師的 Flutter 新手村挑戰系列 第 8

【前端的 Flutter 新手村】Day8-查字典也有技巧,教你如何看懂Flutter官方API

「工欲善其事,必先利其器」要學習新的框架,閱讀API就是一個好方法。繼昨天學寫了簡單的列表介面後,寫的過程中其實是跌跌撞撞,有點清楚又有點模糊。於是今天重新研究了官方API,稍微有點釐清頭緒。可能有些人看到滿滿的英文就直接關掉頁面,不想去看了,所以今天就來分享要怎麼來使用官方的Flutter API。

先前在安裝環境時閱讀的那份文件是比較偏向操作手冊,而這份API對Flutter SDK則有更詳細的解釋。

我們拉昨天的列表當作範例好了(點這裡回去看列表實作),
https://ithelp.ithome.com.tw/upload/images/20190924/20121111jfOHe2AFzf.jpg

Step1.
首先我們import了material Library,直接在API網頁的右手邊Library點進material頁面

Step2.
可以看到material library底下有許多的Class,建議可以用command+F (ctrl+F)搜尋關鍵字或是從右手邊的清單找比較快,基本上可以用Code的橘色字當作關鍵字去搜尋
https://ithelp.ithome.com.tw/upload/images/20190924/201211111FY34VIvzS.jpg

Step3.
假設今天要查DecoratedBox裡面就對DecoratedBox的特性、使用方式、屬性做說明
https://ithelp.ithome.com.tw/upload/images/20190924/20121111G5pg3xd6Tw.jpg

DecoratedBox({Key key, @required Decoration decoration, DecorationPosition position: DecorationPosition.background, Widget child })

上面這行是DecoratedBox這個函式的構造,可以使用DecoratedBox來繪製出decoration、position、child三個屬性。再點進decoration看一下,以昨天的列表來說,我們將decoration 設為BoxDecoration

BoxDecoration({Color color, DecorationImage image, BoxBorder border, BorderRadiusGeometry borderRadius, List<BoxShadow> boxShadow, Gradient gradient, BlendMode backgroundBlendMode, BoxShape shape: BoxShape.rectangle })
Creates a box decoration. [...]

然後使用BoxDecoration拿來繪製colorborder
當然每個Class頁面右側都會有該Class底下可以使用的Constructors、Properties、Method。相反的左側則可以快速切換其他Class的清單。


我覺得API就像是字典一樣,想知道這個Class是什麼東西,就直接去翻找。可能有人會問說:「一開始怎麼知道Flutter有哪些Class可以用?」直接使用右上角的"Search bar"輸入關鍵字,例如今天要改變文字樣式,就直接輸入"text",網站會直接提供與"text"有關的Class在下面,找到可能是你要的功能就點進去看。
https://ithelp.ithome.com.tw/upload/images/20190924/20121111lgM2HS6wWU.jpg

這種方法雖然很笨,但可以對這些功能更加有印象,也是學習的必經之路。


上一篇
【前端的 Flutter 新手村】Day7-Flutter App列表清單
下一篇
【前端的 Flutter 新手村】Day9-在AppBar中添加換頁功能 ft. Material Icons
系列文
前端工程師的 Flutter 新手村挑戰30

尚未有邦友留言

立即登入留言