Flutter故事页浏览插件stories_page_view的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter故事页浏览插件stories_page_view的使用

描述

这是一个用于创建类似Instagram故事页面的Flutter包。现有的的一些包要么工作不正常，要么定制化程度不够。这个包解决了这些问题。你只需要关注UI即可。该包仅抽象了手势和控制器的负担，使其高度可定制且易于使用。

示例代码

class StoriesPage extends StatefulWidget {
  final int index;
  const StoriesPage({
    super.key,
    required this.index,
  });

  @override
  State<StoriesPage> createState() => _StoriesPageState();
}

class _StoriesPageState extends State<StoriesPage> {
  List<Story> storiesData = [];

  Future<void> getData() async {
    storiesData = await getStoryData();

    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    getData();
  }

  Widget getChild(
    int storyPageIndex,
    int snapIndex,
    StoryController controller,
  ) {
    final snap = storiesData[storyPageIndex].snaps[snapIndex];
    return SnapView.fromSnap(controller: controller, snap: snap);
  }

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

  @override
  Widget build(BuildContext context) {
    if (storyData.isEmpty) {
      return const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }
    return Scaffold(
      body: StoryPageView(
        pageCount: storyData.length,
        outOfRangeCompleted: () {
          Navigator.of(context).pop();
        },
        durationBuilder: (pageIndex, snapIndex) {
          return storyData[pageIndex].snaps[snapIndex].duration;
        },
        snapCountBuilder: (pageIndex) {
          return storyData[pageIndex].snaps.length;
        },
        snapInitialIndexBuilder: (pageIndex) {
          return 0;
        },
        itemBuilder: (context, pageIndex, snapIndex, animation, controller) {
          return Stack(
            children: [
              Scaffold(
                body: getChild(pageIndex, snapIndex, controller),
              ),
              SafeArea(
                child: StoryProgressBars(
                  snapIndex: snapIndex,
                  snapCount: storyData[pageIndex].snaps.length,
                  animation: animation,
                  builder: (progress) {
                    return Expanded(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 4,
                          vertical: 8,
                        ),
                        child: ProgressBarIndicator(
                          progress: progress,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

完整示例

要使用stories_page_view插件，请按照以下步骤操作：

  1. 首先，确保你已经安装了stories_page_view插件。你可以通过运行以下命令来安装：
    flutter pub add stories_page_view

更多关于Flutter故事页浏览插件stories_page_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter故事页浏览插件stories_page_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用stories_page_view插件来创建一个故事页浏览功能的示例代码。stories_page_view是一个流行的Flutter插件，用于实现类似于Instagram和Snapchat中的故事浏览效果。

首先，确保你已经在pubspec.yaml文件中添加了stories_page_view依赖：

dependencies:
  flutter:
    sdk: flutter
  stories_page_view: ^latest_version  # 请替换为最新的版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用StoriesPageView：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StoryPageScreen(),
    );
  }
}

class StoryPageScreen extends StatefulWidget {
  @override
  _StoryPageScreenState createState() => _StoryPageScreenState();
}

class _StoryPageScreenState extends State<StoryPageScreen> {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    // 添加更多图片URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: StoriesPageView.builder(
                itemCount: imageUrls.length,
                itemBuilder: (context, index) {
                  return StoryItem(
                    imageProvider: NetworkImage(imageUrls[index]),
                    isLastPage: index == imageUrls.length - 1,
                    onPageChange: (int page) {
                      // 页面更改时的回调，可选
                      print('当前页面: $page');
                    },
                    onStoryComplete: () {
                      // 故事结束时的回调，可选
                      print('故事结束');
                    },
                  );
                },
                controller: StoriesPageViewController()..addListener(() {
                  // 监听控制器的变化，可选
                  print('当前索引: ${controller.currentPage}');
                }),
              ),
            ),
            // 可以在这里添加其他控件，例如底部导航栏或按钮
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个使用StoriesPageView.builder构建的故事页面。itemBuilder函数用于为每个页面生成一个StoryItem，这里我们简单地使用网络图片作为故事的内容。

关键点解释：

  1. StoriesPageView.builder：用于构建多个故事页面。它接受itemCount和itemBuilder参数，类似于ListView.builder。

  2. StoryItem：每个故事页面的组件。它接受imageProvider（图片提供者），isLastPage（标记是否为最后一页），以及其他可选的回调函数，如onPageChange和onStoryComplete。

  3. StoriesPageViewController：用于控制故事页面的导航。你可以通过监听它的变化来获取当前页面的索引。

你可以根据需要自定义每个StoryItem的外观和行为，例如添加文本、按钮或其他交互元素。希望这个示例能帮你快速上手stories_page_view插件的使用！

回到顶部