Flutter体验 Day 15-滚动组件

滚动组件

滚动组件是具有可滚动(Scroll)效果的内容区块，可以透过滚动的方式提供更多可浏览的内容。

而且在装置平台不一样时，View的宽高限制通常不一样，例如先前的范例在不同模拟器显示的状况，虽然我们可以使用 Wrap 避免有提醒画面的出现，但装置的大小会让我们无法看到完整的画面，Flutter提供了多种滚动组件，让我们可以处理这种状况。

scroll_overflow

挑战目标

SingleChildScrollView
Scrollbar
ListView
GridView

SingleChildScrollView

对於内容不会超过 View 太多的状况，我们可以使用 SingleChildScrollView 包装想要的内容；不过若内容较多的状况，可以改用 ListView 动态载入效能上会比较好。

我们改写一下先前布局组件的范例改用 SingleChildScrollView 包装过内容，这边预留一个开关可以查看使用前後的差异。

    var isScrollable = true;

    if (isScrollable) {
      content = Scrollbar(
        isAlwaysShown: true,
        child: SingleChildScrollView(
          child: content,
        ),
      );
    }

Scrollbar 的组件可以用来显示右侧的拖拉条。

原先在 iphone 6 simulator 画面会被切掉的状况，目前已可正常显示。

widget_scrollview

ListView

ListView 是一个垂直可滚动的区块，提供列表的方式显示每一列的内容，例如：功能选单、商品清单、连络人清单或是聊天室讯息的呈现。

它的使用方式也很简单，只需要定义好列表里children的Widget内容即可

ListView(children: items);

不过上述的方式较适用在数量不多的情境上，若要呈现的内容较多且画面空间有限的状况，会建议改采用的 ListView.builder 的方式延迟内容的载入，透过 lazy load 提升效能。

这边我们使用 ListView 呈现一个具有无限内容的选单列表

class ListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("${index + 1}"));
      },
    );
  }
}

效果如下

listview

GridView

GridView 是一种以网格方式呈现的列表画面，比起 ListView 多了列的排列方式，在使用上与 ListView 大同小异，不过多了属性 gridDelegate 定义列要显示内容的数量crossAxisCount，也提供网格间距childAspectRatio相关的设定。

我们一样使用 itemBuilder 来建立一个无限内容的网格列表

class GridViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        childAspectRatio: 1.0,
      ),
      itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Center(child: Text("${index + 1}")));
      },
    );
  }
}

效果如下

widget_gridviw