求助：基于flip_widget实现JSON文本翻书式分页显示功能

步骤1：配置依赖与资源 #

在pubspec.yaml中添加flip_widget依赖，并配置你的JSON资源路径：

dependencies:
  flutter:
    sdk: flutter
  flip_widget: ^latest_version # 替换为包的最新版本

assets:
  - assets/your_book_data.json # 你的JSON文件路径

步骤2：读取并解析JSON数据 #

创建工具方法加载JSON，将数据解析为页面文本列表：

import 'dart:convert';
import 'package:flutter/services.dart';

Future<List<String>> loadBookPages() async {
  String jsonString = await rootBundle.loadString('assets/your_book_data.json');
  Map<String, dynamic> jsonData = json.decode(jsonString);
  // 假设JSON结构为 {"pages": ["第一页内容", "第二页内容", ...]}
  return List<String>.from(jsonData['pages']);
}

步骤3：实现翻书核心逻辑 #

使用FlipWidget构建翻书界面，管理当前页码，切换页面时更新显示内容：

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

class BookFlipPage extends StatefulWidget {
  const BookFlipPage({super.key});

  @override
  State<BookFlipPage> createState() => _BookFlipPageState();
}

class _BookFlipPageState extends State<BookFlipPage> {
  late List<String> _pages;
  int _currentPageIndex = 0;
  bool _isLoading = true;

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

  void _loadBookData() async {
    _pages = await loadBookPages();
    setState(() => _isLoading = false);
  }

  void _flipToNextPage() {
    if (_currentPageIndex < _pages.length - 1) {
      setState(() => _currentPageIndex++);
    }
  }

  void _flipToPreviousPage() {
    if (_currentPageIndex > 0) {
      setState(() => _currentPageIndex--);
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Scaffold(body: Center(child: CircularProgressIndicator()));
    }

    return Scaffold(
      appBar: AppBar(title: const Text('翻书效果')),
      body: Center(
        child: FlipWidget(
          frontWidget: _buildPage(_currentPageIndex),
          backWidget: _currentPageIndex < _pages.length - 1 
              ? _buildPage(_currentPageIndex + 1) 
              : _buildPage(_currentPageIndex), // 最后一页不触发新内容翻转
          onFlipCompleted: (isFront) {
            if (!isFront) _flipToNextPage();
          },
          flipDirection: FlipDirection.HORIZONTAL,
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: const Icon(Icons.arrow_back),
              onPressed: _flipToPreviousPage,
            ),
            Text('第 ${_currentPageIndex + 1}/${_pages.length} 页'),
            IconButton(
              icon: const Icon(Icons.arrow_forward),
              onPressed: _flipToNextPage,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPage(int index) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.8,
      height: MediaQuery.of(context).size.height * 0.7,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        boxShadow: const [BoxShadow(color: Colors.grey, blurRadius: 5)],
      ),
      child: SingleChildScrollView(
        child: Text(
          _pages[index],
          style: const TextStyle(fontSize: 16, height: 1.5),
        ),
      ),
    );
  }
}

说明 #

• JSON文件保持原结构不变，仅通过解析将内容拆分为页面列表
• 翻转动画由flip_widget包提供，支持水平翻转方向
• 底部导航栏提供页码显示与前后页切换按钮，也可通过点击页面触发翻转

内容的提问来源于stack exchange，提问作者Mehar