Flutter中如何从DataProvider动态传递URL至PDF阅读器

Hey there! Let's fix this issue step by step. The problem right now is that your PdfItem is loading a hardcoded PDF URL in initState—so no matter which list item you tap, it'll always open the same PDF. We need to adjust the code to dynamically pass the selected item's pdfUrl to getFileFromUrl when the user taps a list tile.

核心修改思路 #

1. 移除initState中提前加载固定URL的逻辑，改为点击时才加载对应项的PDF
2. 在列表项的onTap事件中，获取当前选中PdfBook的pdfUrl，传入getFileFromUrl
3. 添加加载状态，避免重复点击并提升用户体验

第一步：修改PdfItem的状态与初始化逻辑 #

首先，我们要去掉initState里硬编码的getFileFromUrl调用，同时添加一个加载状态变量：

class _PdfItemState extends State<PdfItem> {
  bool _isLoading = false; // 新增：标记是否正在加载PDF

  // 保留原有的getFileFromAsset方法（如果不需要本地PDF可以删除）
  Future<File> getFileFromAsset(String asset) async {
    try {
      var data = await rootBundle.load(asset);
      var bytes = data.buffer.asUint8List();
      var dir = await getApplicationDocumentsDirectory();
      File file = File("${dir.path}/mypdf.pdf");
      File assetFile = await file.writeAsBytes(bytes);
      return assetFile;
    } catch (e) {
      throw Exception("Error opening asset file");
    }
  }

  // 保留getFileFromUrl方法，后面会优化缓存逻辑
  Future<File> getFileFromUrl(String url) async {
    try {
      var data = await http.get(Uri.parse(url)); // 注意：将String转为Uri避免报错
      var bytes = data.bodyBytes;
      var dir = await getApplicationDocumentsDirectory();
      File file = File("${dir.path}/mypdfonline.pdf");
      File urlFile = await file.writeAsBytes(bytes);
      return urlFile;
    } catch (e) {
      throw Exception("Error opening url file: ${e.toString()}");
    }
  }

  @override
  void initState() {
    super.initState();
    // 移除这里的getFileFromUrl调用，不需要提前加载固定URL
    getFileFromAsset("assets/mypdf.pdf").then((f) {
      // 如果你不需要本地PDF，这段代码可以完全删除
    });
  }

  // ... 后续build方法修改见下文
}

第二步：修改onTap事件，动态传递选中项的PDF URL #

在build方法中，我们要在用户点击列表项时，获取当前PdfBook的pdfUrl，调用getFileFromUrl并跳转到阅读器：

@override
Widget build(BuildContext context) {
  final pdf = Provider.of<PdfBook>(context, listen: false);
  
  return ListTile(
    title: Text(pdf.title),
    // 加载状态下禁用点击，避免重复请求
    onTap: _isLoading ? null : () async {
      setState(() {
        _isLoading = true;
      });
      try {
        // 动态传入当前选中项的pdfUrl！
        File pdfFile = await getFileFromUrl(pdf.pdfUrl);
        // 跳转到PDF阅读器页面
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => PdfViewPage(path: pdfFile.path)
          )
        );
      } catch (e) {
        // 处理加载错误，给用户提示
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("加载PDF失败: ${e.toString()}"))
        );
      } finally {
        // 无论成功失败，都恢复加载状态
        setState(() {
          _isLoading = false;
        });
      }
    },
    leading: CircleAvatar(
      child: Text(pdf.avatar),
      backgroundColor: Theme.of(context).accentColor,
    ),
    // 加载时显示小进度条，替代箭头图标
    trailing: _isLoading 
        ? CircularProgressIndicator(size: 20) 
        : Icon(Icons.arrow_right),
  );
}

第三步：（可选）优化PDF缓存逻辑 #

现在每次点击都会重新下载同一个PDF，我们可以修改getFileFromUrl，根据URL生成唯一文件名，实现缓存功能：

Future<File> getFileFromUrl(String url) async {
  try {
    // 从URL中提取原始文件名，避免覆盖不同PDF
    var fileName = Uri.parse(url).pathSegments.last;
    var dir = await getApplicationDocumentsDirectory();
    File file = File("${dir.path}/$fileName");
    
    // 如果文件已经存在，直接返回本地文件，不用重新下载
    if (await file.exists()) {
      return file;
    }
    
    var data = await http.get(Uri.parse(url));
    var bytes = data.bodyBytes;
    File urlFile = await file.writeAsBytes(bytes);
    return urlFile;
  } catch (e) {
    throw Exception("Error opening url file: ${e.toString()}");
  }
}

额外注意事项 #

• 确保你的pubspec.yaml已经添加了必要依赖：http、path_provider，以及你使用的PDF阅读器包（比如pdf_flutter或syncfusion_flutter_pdfviewer）
• Android平台需要在AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET"/>
  

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