Flutter单网页展示插件single_web_page的使用

single_web_page

在 Flutter 中创建一个简单的单页面布局，并通过 single_web_page 插件实现流畅的滚动选项。

如何使用

首先，确保你已经添加了 single_web_page 依赖项到你的 pubspec.yaml 文件中：

dependencies:
  single_web_page: ^x.x.x

接下来，你可以使用以下代码来创建一个带有单页面布局的应用程序。

示例代码

import 'package:flutter/material.dart';
import 'package:single_web_page/single_web_page.dart';
import 'package:single_web_page/single_web_page_controller.dart';

// 创建一个StatefulWidget
class HowToUseSingleWebPage extends StatefulWidget {
  const HowToUseSingleWebPage({super.key});

  [@override](/user/override)
  State<HowToUseSingleWebPage> createState() => _HowToUseSingleWebPageState();
}

class _HowToUseSingleWebPageState extends State<HowToUseSingleWebPage> {
  late final SingleWebPageController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    
    // 初始化控制器
    _controller = SingleWebPageController(
      // 指定每个索引的snap（默认为topSnap）
      snaps: [Snap.topSnap, Snap.centerSnap, Snap.bottomSnap],
      // 指定额外偏移量用于topSnaps
      topSnapExtraOffset: 0,
      // 指定额外偏移量用于centerSnaps
      centerSnapExtraOffset: 0,
      // 指定额外偏移量用于bottomSnaps
      bottomSnapExtraOffset: 0,
      onAnimatedScrollStart: (currentIndex, targetIndex) {
        // 在动画滚动开始时监听当前和目标索引
      },
      onAnimatedScrollEnd: (currentIndex) {
        // 在动画滚动结束时监听当前索引
      },
      onScrollEnd: (lastVisibleIndex) {
        // 在非动画滚动结束时监听最后一个可见索引
      },
      // 如果用户想在同一索引上进行动画，这将触发动画效果。
      triggerSameIndexAnimationEffect: true
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleWebPage(
      // 提供控制器
      controller: _controller,
      // 指定滚动物理属性。您可以根据需要实现自适应版本
      singleWebPagePhysics: SingleWebPagePhysics.stepByStep,
      // 指定sliverAppBar如果需要
      sliverAppBar: null,
      // 指定部分
      sections: [
        Container(
          height: MediaQuery.of(context).size.height,
          alignment: Alignment.center,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Section 1"),
              ElevatedButton(
                // 通过提供snap轻松跳转到指定索引（动画效果）
                onPressed: () => _controller.animateToSectionIndex(1),
                child: const Text("To Section 2"),
              ),
              ElevatedButton(
                onPressed: () => _controller.animateToSectionIndex(2),
                child: const Text("To Section 3"),
              )
            ],
          ),
        ),
        Container(
          height: MediaQuery.of(context).size.height / 2,
          color: Colors.grey,
          alignment: Alignment.center,
          child: const Text("Section 2"),
        ),
        Container(
          height: MediaQuery.of(context).size.height / 2,
          alignment: Alignment.center,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Section 3"),
              ElevatedButton(
                onPressed: () => _controller.animateToSectionIndex(0),
                child: const Text("To Top"),
              )
            ],
          ),
        ),
      ],
    );
  }
}