使用Flutter webview_flutter插件如何在个人中心收藏页展示已收藏链接

你当前的收藏逻辑仅做了操作提示，没有对收藏链接做持久化存储，因此要实现收藏列表展示按以下步骤操作即可：

1 新增本地存储依赖 #

我们用官方维护的shared_preferences做收藏数据本地持久化，先在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^你的现有版本号
  shared_preferences: ^2.2.2 # 用官方最新稳定版即可

2 修改现有收藏逻辑，持久化存储链接 #

修改你现有NewsScreen中favoriteButton的点击逻辑，把收藏的url存入本地：

// 先导入依赖
import 'package:shared_preferences/shared_preferences.dart';

Widget favoriteButton() {
  return FutureBuilder<WebViewController>(
    future: _controller.future,
    builder: (BuildContext context,
        AsyncSnapshot<WebViewController> controller) {
      if (controller.hasData) {
        return FloatingActionButton(
          onPressed: () async {
            final String url = (await controller.data!.currentUrl())!;
            final prefs = await SharedPreferences.getInstance();
            // 读取已有的收藏列表，无数据时返回空数组
            List<String> favorites = prefs.getStringList('favorites') ?? [];
            // 去重避免重复收藏
            if(!favorites.contains(url)){
              favorites.add(url);
              await prefs.setStringList('favorites', favorites);
              Scaffold.of(context).showSnackBar(
                SnackBar(content: Text('收藏成功 $url')),
              );
            }else{
              Scaffold.of(context).showSnackBar(
                const SnackBar(content: Text('该链接已被收藏')),
              );
            }
          },
          child: const Icon(
            Icons.favorite,
            color: Colors.white,
          ),
          backgroundColor: Colors.red,
        );
      }
      return Container();
    });
}

同时修改NewsScreen支持传入自定义跳转链接，方便后续从收藏列表点击跳转到对应网页：

class NewsScreen extends StatefulWidget {
  // 新增可选参数，默认值保留原来的谷歌地址
  final String? initialUrl;
  const NewsScreen({Key? key, this.initialUrl}) : super(key: key);

  @override
  _NewsScreenState createState() => _NewsScreenState();
}

// 替换WebView的initialUrl配置
WebView(
  initialUrl: widget.initialUrl ?? 'https://www.google.com',
  // 其余原有配置不变
  ...
)

3 实现收藏列表页面 #

新建favorite_screen.dart文件，代码如下：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'news_screen.dart'; // 导入你自己的NewsScreen页面

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

  @override
  State<FavoriteScreen> createState() => _FavoriteScreenState();
}

class _FavoriteScreenState extends State<FavoriteScreen> {
  List<String> _favorites = [];

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

  // 加载本地存储的收藏列表
  Future<void> _loadFavorites() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _favorites = prefs.getStringList('favorites') ?? [];
    });
  }

  // 删除指定收藏
  Future<void> _deleteFavorite(int index) async {
    final prefs = await SharedPreferences.getInstance();
    _favorites.removeAt(index);
    await prefs.setStringList('favorites', _favorites);
    setState(() {});
    if(mounted){
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('已取消收藏')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的收藏'),
        backgroundColor: Colors.white,
        titleTextStyle: const TextStyle(color: Colors.red, fontSize: 20),
        iconTheme: const IconThemeData(color: Colors.red),
      ),
      body: _favorites.isEmpty
          ? const Center(child: Text('暂无收藏内容', style: TextStyle(color: Colors.grey, fontSize: 16)))
          : ListView.builder(
              itemCount: _favorites.length,
              itemBuilder: (context, index) {
                final url = _favorites[index];
                return ListTile(
                  leading: const Icon(Icons.link, color: Colors.red),
                  title: Text(url, maxLines: 1, overflow: TextOverflow.ellipsis),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete_outline, color: Colors.grey),
                    onPressed: () => _deleteFavorite(index),
                  ),
                  onTap: () {
                    // 点击跳转到WebView页打开对应链接
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => NewsScreen(initialUrl: url),
                      ),
                    );
                  },
                );
              },
            ),
    );
  }
}

4 个人中心添加收藏入口 #

在你的个人中心页面的功能列表中添加跳转入口即可：

ListTile(
  leading: const Icon(Icons.favorite, color: Colors.red),
  title: const Text('我的收藏'),
  trailing: const Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey),
  onTap: (){
    Navigator.push(context, MaterialPageRoute(builder: (context) => const FavoriteScreen()));
  },
)

扩展说明 #

如果需要存储网页标题、收藏时间等更多信息，可以把对应数据转成JSON字符串存入本地，不用单纯存URL字符串列表；如果需要跨设备同步收藏，把存储逻辑替换成对接自己的后端接口即可。

内容的提问来源于stack exchange，提问作者Mıktad Tahir Durak