Flutter可滚动页面

Flutter是谷歌开发的一款跨平台开发框架，它可以让开发者使用一份代码同时在iOS和Android上构建高质量的原生应用。Flutter框架提供了丰富的组件和功能，其中可滚动页面是一个十分常见的需求，本文将对Flutter可滚动页面做详细介绍。

四种可滚动方向

Flutter中提供了四种可滚动方向，分别为垂直、水平、垂直和水平双向、自由方向滚动。

垂直滚动

垂直滚动是指页面能够向上或向下滚动，可以使用SingleChildScrollView或ListView进行实现。

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      // ...
    ],
  ),
)

ListView(
  children: <Widget>[
    // ...
  ],
)

水平滚动

水平滚动是指页面能够向左或向右滚动，可以使用SingleChildScrollView或ListView的scrollDirection参数设置为Axis.horizontal进行实现。

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: <Widget>[
      // ...
    ],
  ),
)

ListView(
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    // ...
  ],
)

垂直和水平双向滚动

垂直和水平双向滚动是同时能够垂直和水平方向滚动的页面，可以使用CustomScrollView进行实现。

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return // ...
        },
        childCount: 100,
      ),
    ),
  ],
)

自由方向滚动

自由方向滚动是指页面能够在任意方向上滚动，可以使用SingleChildScrollView或ListView的physics参数设置为AlwaysScrollableScrollPhysics进行实现。

SingleChildScrollView(
  physics: AlwaysScrollableScrollPhysics(),
  child: Column(
    children: <Widget>[
      // ...
    ],
  ),
)

ListView(
  physics: AlwaysScrollableScrollPhysics(),
  children: <Widget>[
    // ...
  ],
)

滚动控制

Flutter中提供了多种滚动控制方式，可以实现多种滚动效果，例如滑动刷新、懒加载、手势控制等。

ScrollController

ScrollController是用来控制可滚动组件的控制器，可以监听滚动事件、滚动到指定位置等。

final _controller = ScrollController();

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return ListView.builder(
    controller: _controller,
    itemCount: 100,
    itemBuilder: (BuildContext context, int index) {
      return // ...
    },
  );
}

ScrollNotification

ScrollNotification是用来监听可滚动组件滚动事件的组件，可以监听滚动的位置、滚动的方向等。

NotificationListener<ScrollNotification>(
  onNotification: (notification) {
    if (notification is ScrollUpdateNotification) {
      // 正在滚动
    } else if (notification is ScrollEndNotification) {
      // 滚动结束
    }
    return true;
  },
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (BuildContext context, int index) {
      return // ...
    },
  ),
)

RefreshIndicator

RefreshIndicator是用来实现滑动刷新的组件，可以下拉刷新与右滑刷新。

RefreshIndicator(
  onRefresh: _handleRefresh,
  child: ListView.builder(
    itemCount: _dataList.length,
    itemBuilder: (BuildContext context, int index) {
      return // ...
    },
  ),
)

ScrollablePositionedList

ScrollablePositionedList是一个基于ListView的可滚动列表，可控制滚动到指定位置等。

final _listController = ItemScrollController();

@override
void dispose() {
  _listController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return ScrollablePositionedList.builder(
    itemScrollController: _listController,
    itemCount: 100,
    itemBuilder: (BuildContext context, int index) {
      return // ...
    },
  );
}

_scrollToIndex() {
  _listController.scrollTo(
    index: 5,
    duration: Duration(seconds: 1),
  );
}

总结

Flutter可滚动页面是一个十分常见的需求，本文介绍了Flutter中四种可滚动方向和多种滚动控制方式，希望能够帮助到读者。Flutter框架致力于提供简单、快速、开源的UI开发框架，期待对Flutter有兴趣的读者加入进来。