Flutter故事讲述插件story_time的使用

story_time 插件简介

story_time 是一个 Instagram 故事样式的 UI 插件，具有丰富的动画效果和高度的自定义性。它基于 story 包进行了改进，提供了更多的功能和灵活性。

• pub.dev 上的版本：
• 许可证：MIT License

使用方法

基本用法

StoryPageView 需要至少三个参数：itemBuilder、pageLength 和 storyLength。

return Scaffold(
  body: StoryPageView(
    itemBuilder: (context, pageIndex, storyIndex) {
      return Center(
        child: Text("Index of PageView: $pageIndex Index of story on each page: $storyIndex"),
      );
    },
    storyLength: (pageIndex) {
      return 3;
    },
    pageLength: 4,
  ),
);

• itemBuilder：用于构建故事内容，接收两个索引参数（页面索引和故事索引）。
• storyLength：决定每个页面的故事数量。
• pageLength：StoryPageView 的总页数。

实际应用示例

以下是一个更实际的应用示例，从 example 中提取：

return Scaffold(
  body: StoryPageView(
    itemBuilder: (context, pageIndex, storyIndex) {
      final user = sampleUsers[pageIndex];
      final story = user.stories[storyIndex];
      return Stack(
        children: [
          Positioned.fill(
            child: Container(color: Colors.black),
          ),
          Positioned.fill(
            child: Image.network(
              story.imageUrl,
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 44, left: 8),
            child: Row(
              children: [
                Container(
                  height: 32,
                  width: 32,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage(user.imageUrl),
                      fit: BoxFit.cover,
                    ),
                    shape: BoxShape.circle,
                  ),
                ),
                const SizedBox(
                  width: 8,
                ),
                Text(
                  user.userName,
                  style: TextStyle(
                    fontSize: 17,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      );
    },
    gestureItemBuilder: (context, pageIndex, storyIndex) {
      return Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: const EdgeInsets.only(top: 32),
          child: IconButton(
            padding: EdgeInsets.zero,
            color: Colors.white,
            icon: Icon(Icons.close),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ),
      );
    },
    pageLength: sampleUsers.length,
    storyLength: (int pageIndex) {
      return sampleUsers[pageIndex].stories.length;
    },
    onPageLimitReached: () {
      Navigator.pop(context);
    },
  ),
);

数据模型

推荐使用两层数据模型，例如 UserModel 包含 StoryModel 列表：

class UserModel {
  UserModel(this.stories, this.userName, this.imageUrl);

  final List<StoryModel> stories;
  final String userName;
  final String imageUrl;
}

class StoryModel {
  StoryModel(this.imageUrl);

  final String imageUrl;
}

控制动画

story_time 支持控制特定索引故事的持续时间。可以通过 IndicatorAnimationCommand 来实现：

late ValueNotifier<IndicatorAnimationCommand> indicatorAnimationController;

@override
void initState() {
  super.initState();
  indicatorAnimationController = ValueNotifier<IndicatorAnimationCommand>(
    IndicatorAnimationCommand(resume: true),
  );
}

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

// 在 StoryPageView 中使用
indicatorAnimationController: indicatorAnimationController,
onStoryIndexChanged: (int newStoryIndex) {
  if (newStoryIndex == 1) {
    indicatorAnimationController.value = IndicatorAnimationCommand(
      duration: const Duration(seconds: 20),
    );
  } else {
    indicatorAnimationController.value = IndicatorAnimationCommand(
      duration: const Duration(seconds: 5),
    );
  }
},

回调函数

暂停和恢复故事

支持添加暂停和恢复故事的回调：

onStoryPaused: () {
  print("Story is paused!!");
},
onStoryUnpaused: () {
  print("Story is unpaused!!");
},

页面切换

支持前后翻页的回调：

onPageBack: (int newPageIndex) {
  int oldPage = newPageIndex + 1;
  print("from oldPage:$oldPage to newPage:$newPageIndex");
},
onPageForward: (int newPageIndex) {
  int oldPage = newPageIndex - 1;
  print("from oldPage:$oldPage to newPage:$newPageIndex");
},

故事切换

支持故事索引变化的回调：

onStoryIndexChanged: (int newStoryIndex) {
  print('newStoryInd: $newStoryIndex');
},

提示

此插件仍在开发中，如果有任何请求或问题，请在 GitHub 上提出。

希望这些信息能帮助你更好地理解和使用 story_time 插件！如果你有任何问题或需要进一步的帮助，请随时提问。