Flutter网页滚动优化插件opscroll_web的使用

Flutter网页滚动优化插件opscroll_web的使用

OPScroll

OPScroll 是一个简单且易于使用的库，用于为 Flutter Web 开发者创建单页网站。 使用 OPScroll 可以在几分钟内创建美观且流畅的落地页面。 请尝试我们的 Web Demo App。

安装

1. 添加到您的包的 pubspec.yaml 文件中：

dependencies:
  opscroll_web: ^0.0.2

1. 通过命令行安装：

• 使用 pub：

$ pub get

• 使用 Flutter：

$ flutter pub get

1. 在 Dart 代码中使用：

import 'package:opscroll_web/opscroll_web.dart';

使用

OPScroll 是一个状态管理的 Widget，用于生成单页滚动机制。将其包含在您的 build 方法中：

OpscrollWeb({
  onePageChildren: [],
  pageController: PageController(),
  scrollCurve: Curves.easeIn,
  scrollSpeed: const Duration(milliseconds: 900),
  floatingButtonBackgroundColor: Colors.white,
  floatingButtonSplashColor: Colors.white,
  isFloatingButtonActive: false,
  isTouchScrollingActive: false,
  scrollingAnimationOptions: ScrollingAnimationOptions.Default,
  scrollDirection = Axis.vertical,
})

卷动选项

你可以允许触摸卷动。 给 isTouchScrollingActive 设置为 true:

isTouchScrollingActive: true,

你可以允许通过浮动按钮进行卷动. 给 isFloatingButtonActive 设置为 true, 同时可以更改背景和溅射颜色:

isTouchScrollingActive: true, //Optional
floatingButtonBackgroundColor: Colors.white, //Optional
floatingButtonSplashColor: Colors.white, //Optional

卷动动画

OPScroll 提供了四种卷动动画选项:

enum ScrollingAnimationOptions { Fading, Drop, Circle, Default }

只能选择一种卷动动画选项:

scrollingAnimationOptions: ScrollingAnimationOptions.Fading,

示例代码

import 'package:flutter/material.dart';
import 'package:opscroll_web/opscroll_web.dart';
import 'package:opscroll_web_example/pages/homePage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await OpscrollWeb.platformVersion ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: HomePage());
  }
}

示例 demo

import 'package:flutter/material.dart';
import 'package:opscroll_web/opscroll_web.dart';
import 'package:opscroll_web_example/pages/homePage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final OpscrollWebController _controller = OpscrollWebController();

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller.init();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OPScroll Example'),
      ),
      body: Center(
        child: OpscrollWeb(
          onePageChildren: [
            HomePageWidget(),
            SecondPageWidget(),
          ],
          pageController: PageController(),
          scrollCurve: Curves.easeIn,
          scrollSpeed: const Duration(milliseconds: 900),
          floatingButtonBackgroundColor: Colors.white,
          floatingButtonSplashColor: Colors.white,
          isFloatingButtonActive: true,
          isTouchScrollingActive: true,
          scrollingAnimationOptions: ScrollingingAnimationOptions.Fading,
          scrollDirection: Axis.vertical,
        ),
      ),
    );
  }
}

class HomePageWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('Home Page'),
          SizedBox(height: 50),
          ElevatedButton(
            onPressed: () {
              _controller.nextPage();
            },
            child: Text('Next Page'),
          ),
        ],
      ),
    );
  }
}

class SecondPageWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('Second Page'),
          SizedBox(height: 50),
          ElevatedButton(
            onPressed: () {
              _controller.previousPage();
            },
            child: Text('Previous Page'),
          ),
        ],
      ),
    );
  }
}