Flutter – 滚动快照列表

scroll_snap_list 包提供了一个包装器，该包装器环绕 ListView.builder 小部件以在列表项上启用捕捉事件。可根据需要修改为水平或垂直捕捉。同样重要的是要注意它不会使用较少或不使用动画。

在本文中，我们将通过一个简单的应用程序来研究 Scroll Snap List 的属性及其实现。

滚动快照列表的主要属性：

• key：用于调用ScrollSnapListState
• listViewKey：它保存 ScrollSnapListState 中 ListView 的键
• 曲线：用于设置捕捉事件期间的曲线动画
• 持续时间：设置动画的持续时间
• margin:设置容器边距
• itemCount：它代表列表中的项目数
• onItemFocus：当项目被捕捉或聚焦时发送回调
• reverse：用于反转ListView
• scrollDirection：设置ListView的滚动方向
• dynamicItemOpacity：设置非焦点项目的不透明度

现在，让我们通过一个简单的应用程序来实现滚动快照列表。要构建应用程序，请按照以下步骤操作：

• 将依赖添加到pubspec.yaml 文件中
• 将依赖项导入到 main.js 中。dart文件
• 创建应用程序的根
• 将根扩展到某种Mainpage
• 实现滚动快照列表
• 将项目添加到ListView

现在让我们详细了解这些步骤。

添加依赖：

要将scroll_snap_list 依赖项添加到pubspec.yaml文件，请按照下图操作：

导入依赖：

使用下面的代码行将依赖项导入到 main.js 中。dart文件：

import 'package:scroll_snap_list/scroll_snap_list.dart';

创建应用程序根：

可以通过创建一个扩展到 StatelessWidget 的类(比如 HorizontalListDemo)来创建应用程序的根，如下所示：

Dart

class HorizontalListDemo extends StatefulWidget {
  @override
  _HorizontalListDemoState createState() => _HorizontalListDemoState();
}

扩展根：

既然应用程序的根已经建立，我们现在可以创建另一个扩展到列表项状态的类(比如，_HorizontalListDemoState)：

Dart

class _HorizontalListDemoState extends State {
  List data = [];
  int _focusedIndex = 0;
  
  @override
  void initState() {
    super.initState();
  
    for (int i = 0; i < 30; i++) {
      data.add(Random().nextInt(100) + 1);
    }
  }
  
  void _onItemFocus(int index) {
    setState(() {
      _focusedIndex = index;
    });
  }
  }

实现滚动快照列表：

要实现滚动快照列表，请使用以下代码行并根据需要进行修改：

Dart

ScrollSnapList(
  onItemFocus: _onItemFocus,
  itemSize: 50,
  itemBuilder: _buildListItem,
  itemCount: data.length,
  key: sslKey,
  scrollDirection: Axis.vertical,
)

添加项目：

在您的buildItem方法中，调用focusToItem方法，如下所示：

Dart

Widget _buildListItem(BuildContext context, int index) {
  //horizontal
  return Container(
    height: 50,
    child: Material(
      color: _focusedIndex == index ? Colors.lightBlueAccent : Colors.white,
      child: InkWell(
        child: Text("Index: $index | Value: ${data[index]}"),
        onTap: () {
          print("Add a statement here");
  
          //trigger
          sslKey.currentState.focusToItem(index);
        },
      ),
    ),
  );
}

完整的源代码：

Dart

import 'dart:math';
  
import 'package:flutter/material.dart';
import 'package:scroll_snap_list/scroll_snap_list.dart';
  
void main() => runApp(HorizontalListDemo());
  
// root of the application
class HorizontalListDemo extends StatefulWidget {
  @override
  _HorizontalListDemoState createState() => _HorizontalListDemoState();
}
  
class _HorizontalListDemoState extends State {
  List data = [];
  int _focusedIndex = 0;
  
  @override
  void initState() {
    super.initState();
  
    for (int i = 0; i < 30; i++) {
      data.add(Random().nextInt(100) + 1);
    }
  }
  
  void _onItemFocus(int index) {
    setState(() {
      _focusedIndex = index;
    });
  }
  
  Widget _buildItemDetail() {
    if (data.length > _focusedIndex)
      return Container(
        height: 150,
        child: Text("index $_focusedIndex: ${data[_focusedIndex]}"),
      );
  
    return Container(
      height: 150,
      child: Text("No Data"),
    );
  }
  
  Widget _buildListItem(BuildContext context, int index) {
    //horizontal
    return Container(
      width: 35,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            height: data[index].toDouble()*2,
            width: 25,
            color: Colors.green,
            child: Text("$index\n${data[index]}"),
          )
        ],
      ),
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal List',
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Colors.green,
        ),
        body: Container(
          child: Column(
            children: [
              Expanded(
                child: ScrollSnapList(
                  onItemFocus: _onItemFocus,
                  itemSize: 35,
                  itemBuilder: _buildListItem,
                  itemCount: data.length,
                  reverse: true,
                ),
              ),
              _buildItemDetail(),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！