PhysicalModel
裁剪組件
場(chǎng)景:UI 需要實(shí)現(xiàn)四個(gè)角的圓角,常規(guī)是需要最外層容器設(shè)置borderRadius,然后里層的組件也需要設(shè)置borderRadius。通過PhysicalModel,只需要設(shè)置外層容器的borderRadius,里層組件會(huì)被自動(dòng)裁剪。有點(diǎn)類似overflow:hiden
2.1 Card
Card:一個(gè) Material Design 卡片。擁有一個(gè)圓角和陰影
默認(rèn)情況下 Card 是無限小的。
Card 可識(shí)別為單個(gè)包含的單元。
Card 可以獨(dú)立存在,而不依賴于周圍的元素作為上下文。
一個(gè) Card 不能與另一個(gè) Card 合并,也不能分成多個(gè) Card 。
2.2 ListTile
這個(gè)已經(jīng)被多次使用了,最經(jīng)典的案例就是個(gè)人名片,因?yàn)檫@個(gè)自帶 heading 放頭像, title, subtitle, text 這種可以放不同層級(jí)內(nèi)容的部分。
2.3
SingleChildScrollView
組件是負(fù)責(zé)滾動(dòng)的,里面只能嵌套一個(gè)組件
Column布局超出屏幕后不能滾動(dòng),需要在外層嵌套SingleChildScrollView才可以
可以設(shè)置滾動(dòng)方向,也可以通過reverse 屬性設(shè)置閱讀順序
還可以解決TextField布局溢出問題
FittedBox 縮放
負(fù)責(zé)對(duì)組件進(jìn)行縮放和位置調(diào)整
fit 縮放方式縮放本身占據(jù)FittedBox的大小,默認(rèn)值BoxFit.contain
子組件的寬度或高度被縮放到父容器限定的值時(shí),就會(huì)被停止縮放
2.4
CustomScrollView
兩個(gè)組件結(jié)合起來形成一個(gè)滾動(dòng)區(qū)域
AppBar -> SliverAppBar
GridView -> SliverGrid
ListView -> SliverFixedExtentList
轉(zhuǎn)換后的組件都是以(
Sliver)開頭的,其本身是不具備滾動(dòng)特征的,但是當(dāng)放在CustomScrollView中之后,則可以實(shí)現(xiàn)滾動(dòng)的功能
2.5
PageView
實(shí)現(xiàn)類似輪播圖的效果
數(shù)據(jù)量大可通過PageView.builder優(yōu)化性能
2.6
GestureDetector
手勢(shì)識(shí)別的組件,可以識(shí)別點(diǎn)擊、雙擊、長按事件、拖動(dòng)、縮放等手勢(shì)
2.7
InkWell
作用跟GestureDetector類似。
GestureDetector使用點(diǎn)擊無水波紋出現(xiàn),InkWell可以實(shí)現(xiàn)水波紋效果
2.8
ClipRRect
裁剪圓角