Flutter中如何在InAppWebView用自定义文本替换URL标题

首先明确：你当前使用的ChromeSafariBrowser调用的是系统原生浏览器组件（iOS为Safari、Android为Chrome），这类组件的顶部栏属于系统级UI，无法直接修改URL显示为自定义文本。

要实现自定义顶部栏标题的需求，需改用InAppWebView内嵌组件替代系统浏览器调用，具体步骤如下：

• 1. 创建包含InAppWebView的独立页面，通过自定义AppBar替换系统浏览器顶部栏
• 2. 在AppBar中设置目标自定义标题，比如“欢迎来到Stack Overflow”
• 3. 通过Navigator.push跳转至该页面，替代原有的ChromeSafariBrowser.open调用

示例代码如下：

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

class CustomWebViewPage extends StatefulWidget {
  final String url;
  final String customTitle;

  const CustomWebViewPage({super.key, required this.url, required this.customTitle});

  @override
  State<CustomWebViewPage> createState() => _CustomWebViewPageState();
}

class _CustomWebViewPageState extends State<CustomWebViewPage> {
  late InAppWebViewController webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.customTitle),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () async {
            if (await webViewController.canGoBack()) {
              await webViewController.goBack();
            } else {
              if (mounted) Navigator.pop(context);
            }
          },
        ),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse(widget.url)),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
      ),
    );
  }
}

// 调用方式
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const CustomWebViewPage(
      url: 'https://stackoverflow.com/',
      customTitle: '欢迎来到Stack Overflow',
    ),
  ),
);

补充说明：

• 若必须使用ChromeSafariBrowser，目前无官方API支持修改系统浏览器顶部栏的URL显示文本，这是因为该UI属于系统浏览器原生范畴，第三方应用无权干预。
• 改用内嵌InAppWebView不仅能实现自定义标题，还能更灵活地控制WebView的各类行为与UI样式。

内容的提问来源于stack exchange，提问作者Anna R.