在Fluttr中单击按钮滚动开始 - 任何

在Flutter中，滚动是常见的功能，如何在页面中实现滚动呢？本文将介绍如何在Flutter中通过点击按钮来实现滚动。

步骤

1.引入依赖

在pubspec.yaml文件中引入依赖：

dependencies:
  flutter:
    sdk: flutter
  ...
  flutter_staggered_grid_view: ^0.4.0

2.实现布局

本文将实现一个简单的布局，如下图所示，这是一个具有很多图片的网格布局。我们将使用flutter_staggered_grid_view依赖来实现此布局。

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class ScrollStartPage extends StatefulWidget {
  @override
  _ScrollStartPageState createState() => _ScrollStartPageState();
}

class _ScrollStartPageState extends State<ScrollStartPage> {
  final List<String> _imageList = [
    'https://images.unsplash.com/photo-1582778955090-1726fd2a6d71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1584305065970-0341d47daa94?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1584766726600-5e39ede32942?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1579374969973-610b7241dbd0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1582710213509-59e0256f2a6e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1581015854467-57b33051e716?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1583256681632-ac1acb84d713?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1583967764525-559e897c5add?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1561771670-de3a3dc63ae9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1579675521424-54bf3f4d0280?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1582465085995-948b91c508ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1581673100888-f84a453b3dfd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1580992334648-707788f21d19?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1582810185209-65c04a64a1c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1584236121828-76f51e12d5e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
    'https://images.unsplash.com/photo-1580390915808-e768e65d9514?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Start'),
      ),
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 2,
        itemCount: _imageList.length,
        itemBuilder: (BuildContext context, int index) => Container(
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(10),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(
              _imageList[index],
              fit: BoxFit.cover,
            ),
          ),
        ),
        staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
      ),
    );
  }
}

我们可以看到，代码中使用了StaggeredGridView.countBuilder来实现网格布局，每个单元格中包含了一张网络图片。

3.添加按钮

在页面中添加一个按钮，用于执行滚动操作：

...
body: Column(
  children: <Widget>[
    RaisedButton(
      child: Text('滚动开始'),
      onPressed: () {
        // TODO: 滚动开始
      },
    ),
    Expanded(
      child: StaggeredGridView.countBuilder(
        ...
      ),
    ),
  ],
),
...

4.实现滚动

当点击“滚动开始”按钮时，我们希望页面自动向下滚动。我们可以通过ScrollController来实现这个功能：

...
class _ScrollStartPageState extends State<ScrollStartPage> {
  ScrollController _scrollController = ScrollController();

  final List<String> _imageList = ['...'];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Start'),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('滚动开始'),
            onPressed: () {
              _scrollController.animateTo(
                _scrollController.position.maxScrollExtent,
                duration: Duration(milliseconds: 500),
                curve: Curves.easeInOut,
              );
            },
          ),
          Expanded(
            child: StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              itemCount: _imageList.length,
              itemBuilder: (BuildContext context, int index) => Container(
                ...
              ),
              staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
              controller: _scrollController,
            ),
          ),
        ],
      ),
    );
  }
}

当点击按钮时，我们调用了_scrollController.animateTo方法，将滚动位置设置为最大位置，从而实现了滚动。

结论

在Flutter中，实现滚动是很简单的，通过使用ScrollController，我们可以实现页面滚动。本文介绍了如何通过点击按钮来实现滚动，希望对你有所帮助。