Web 開發者如何理解 Flutter 佈局之 —— 5. SingleChildScrollView / ListView + ScrollBar

《Web 開發者如何理解 Flutter 佈局》

本系列旨在幫助 Web 前端開發者更好的理解 Flutter 的佈局組件,只作對應的語法映射描述和最基本的技術說明。

---

列表視圖及滾動條。

• 經過 SingleChildScrollView (單個子組件滾動視圖) 建立滾動視圖

• 經過 ListView(列表視圖) 建立滾動視圖

• 經過 Scrollbar(滾動條) 建立滾動條

• 經過 Axis(座標軸) 指定滾動方向

一、使用 SingleChildScrollView 建立滾動視圖

在 web 應用中, 當 body 中內容的寬高大於屏幕自己寬高時,頁面會被撐開並附加滾動條。

而在原生 app 中並不具有這個效果,即便頁面中自己的內容超出了屏幕, 應用容器也不會爲你添加滾動容器及滾動條。

所以, 咱們須要使用 Widget 來構造他們。

• *下列示例中使用瞭解析器中預存的顏色常量,其中 web 應用使用安全色, 而原生應用使用 Google Material Design 設計規範中的顏色實現, 所以它們可能在展示上有所差別。

在後續的例子中依舊可能會有這種狀況出現。 若是您閱讀至此提示到以後的章節, 除非另有說明, 咱們認爲您已經知曉並承認這些差別, 後續將再也不針對這類差別性單獨進行贅述說明。*

SingleChildScrollView(
    Column(
      children: <Widget>[
        Container(
          color: Colors.red,
          height: 600
        ),
        Container(
          color: Colors.blue,
          height: 600
        )
      ]
    )
  )
複製代碼

等效於:

<div
  style=
  "overflow-y: scroll;"
>
  <div style=
       " height: 600px; background-color: red; "
  ></div>
  <div style=
       " height: 600px; background-color: blue; "
  ></div>
</div>
複製代碼

二、使用 ListView + Scrollbar 構建帶有滾動條的可滾動長列表

你能夠爲頁面中的部份內容添加 Scrollbar 以顯示滾動條, 同時若是你但願區域可被滾動,你須要將他們包裹在ListView內,它會幫你建立可滾動的容器。

ListView(
  //縱向(vertical) 爲 ListView 默認的滾動方向,此行可選 👇
  scrollDirection: Axis.vertical,
  //縱向(vertical) 爲 ListView 默認的滾動方向,此行可選 👆
  children: [
    Container(
      height: 700,
      color: Colors.lightBlue
    ),
    Container(
      height: 700,
      color: Colors.green
    ),
    Container(
      height: 700,
      color: Colors.orange
    )
  ]
)
複製代碼

等效於:

<div
  style=
  "overflow-y: scroll;"
>
  <div style=
       " height: 700px; background-color: lightBlue; "
  ></div>
  <div style=
       " height: 700px; background-color: green; "
  ></div>
  <div style=
       " height: 700px; background-color: orange; "
  ></div>
</div>
複製代碼

三、構建橫向滾動區域

ListView(
  //滾動方向: 容許沿橫向(horizontal) 座標軸滾動
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      width: 400,
      color: Colors.lightBlue
    ),
    Container(
      width: 400,
      color: Colors.green
    ),
    Container(
      width: 400,
      color: Colors.orange
    )
  ]
)
複製代碼

等效於:

<div
  style=
  "overflow-x: scroll;"
>
  <div style=
       " width: 400px; background-color: lightBlue; "
  ></div>
  <div style=
       " width: 400px; background-color: green; "
  ></div>
  <div style=
       " width: 400px; background-color: orange; "
  ></div>
</div>
複製代碼

相比 SingleChildScrollView 建立的滾動視圖而言,若是你須要惰性加載,使用 ListView 有更加明顯的性能優點。