如何使用webview_flutter在App Bar中显示网页标题

你的问题出在FutureBuilder只在组件build时执行一次controller.getTitle()：网页导航到新页面后，不会自动重新触发这个Future请求，所以AppBar的标题不会跟着更新；而热重载会触发组件重新build，这时候才会再次调用getTitle()，所以偶尔能显示新标题。

正确的做法是监听WebView的页面加载完成事件，每次页面加载完成后主动获取标题并更新状态，而不是只在build时获取一次。

修改后的完整代码示例 #

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

  @override
  State<YourWebViewPage> createState() => _YourWebViewPageState();
}

class _YourWebViewPageState extends State<YourWebViewPage> {
  final WebViewController controller = WebViewController();
  String _pageTitle = "Loading";

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

  void initWebViewController() {
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse("https://example.com")) // 替换成你的初始URL
      ..setNavigationDelegate(
        NavigationDelegate(
          // 页面开始加载时重置标题
          onPageStarted: (String url) {
            setState(() {
              _pageTitle = "Loading";
            });
          },
          // 页面加载完成后获取最新标题并更新
          onPageFinished: (String url) async {
            String? title = await controller.getTitle();
            setState(() {
              _pageTitle = title ?? "Loading";
            });
          },
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_pageTitle),
        backgroundColor: const Color.fromARGB(255, 0, 0, 0),
        actions: [
          PopupMenuButton(itemBuilder: (context) {
            return [
              const PopupMenuItem<int>(
                value: 0,
                child: Text("Dashboard"),
              ),
            ];
          }, onSelected: (value) {
            if (value == 0) {
              // 处理菜单点击逻辑
            }
          }),
        ],
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

关键说明 #

1. 通过NavigationDelegate的onPageFinished事件，在每次页面加载完成后主动调用getTitle()获取最新标题
2. 用setState()触发UI更新，让AppBar的标题自动跟随网页变化
3. 新增onPageStarted事件重置标题为"Loading"，优化页面切换时的视觉体验

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