flutter基礎(chǔ)組件2

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

裁剪圓角

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 開場(chǎng)白 諸位簡友,有緣相聚;走過路過,千萬不要錯(cuò)過!今日評(píng)論第五十八場(chǎng)開場(chǎng)了,有錢的打個(gè)賞,無錢的捧個(gè)場(chǎng),喜歡的點(diǎn)...
    陳良心閱讀 14,886評(píng)論 324 306
  • 《閉上眼睛才能看清楚自己》這本書是香海禪寺主持賢宗法師的人生體悟,修行心得及講學(xué)錄,此書從六個(gè)章節(jié)講述了禪修是什么...
    宜均閱讀 10,356評(píng)論 1 25
  • 前言 Google Play應(yīng)用市場(chǎng)對(duì)于應(yīng)用的targetSdkVersion有了更為嚴(yán)格的要求。從 2018 年...
    申國駿閱讀 66,282評(píng)論 15 98
  • 本文轉(zhuǎn)載自微信公眾號(hào)“電子搬磚師”,原文鏈接 這篇文章會(huì)以特別形象通俗的方式講講什么是PID。 很多人看到網(wǎng)上寫的...
    這個(gè)飛宏不太冷閱讀 7,231評(píng)論 2 15
  • 《來,我們說說孤獨(dú)》 1·他們都在寫孤獨(dú) 一個(gè)詩人 如果 不說說 內(nèi)心的孤獨(dú) 不將孤獨(dú) 寫進(jìn)詩里 是不是很掉價(jià)呢 ...
    聽太陽升起閱讀 4,643評(píng)論 1 7

友情鏈接更多精彩內(nèi)容