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 有更加明显的性能优点。