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

弘樹發表於2019-10-15
WebFlutterView

列表檢視及滾動條。

  • 通過 ListView(列表檢視) 建立可滾動的容器

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

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

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

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

而在原生 app 中並不具備這個效果,即使頁面中本身的內容超出了螢幕, 應用容器也不會為你新增滾動容器及滾動條。

因此, 我們需要使用 Widget 來構造他們。

你可以為頁面中的部分內容新增 Scrollbar 以顯示滾動條, 同時如果你希望區域可被滾動,你需要將他們包裹在ListView內,它會幫你建立可滾動的容器。

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

在後續的例子中依舊可能會有這種情況出現。 如果您閱讀至此提示到之後的章節, 除非另有說明, 我們認為您已經知曉並認可這些差異, 後續將不再針對這類差異性單獨進行贅述說明。*

new ListView(
  //縱向(vertical) 為 ListView 預設的滾動方向,此行可選 ?
  scrollDirection: Axis.vertical,
  //縱向(vertical) 為 ListView 預設的滾動方向,此行可選 ?
  children: [
    new Container(
      height: 700,
      color: Colors.lightBlue
    ),
    new Container(
      height: 700,
      color: Colors.green
    ),
    new 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>
複製程式碼

2、構建橫向滾動區域

new ListView(
  //滾動方向: 允許沿橫向(horizontal) 座標軸滾動
  scrollDirection: Axis.horizontal,
  children: [
    new Container(
      width: 400,
      color: Colors.lightBlue
    ),
    new Container(
      width: 400,
      color: Colors.green
    ),
    new 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>
複製程式碼

相關文章