如何为Flutter WebView设置动态初始URL并实现组件参数化复用

实现方法 #

• 在StatefulWidget类中声明final修饰的参数成员，保证不可变性
• 通过构造函数的命名参数接收参数，给参数设置默认值即可实现可选特性
• 在对应的State类中，通过widget.参数名访问该参数

修改后的完整代码 #

// 遵循Dart类名大驼峰规范，修正类名
class DefaultWebpage extends StatefulWidget {
  // 声明可选参数，设置默认值，调用时可传可不传
  final String initialUrl;

  // 构造函数：保留key参数，initialUrl设为可选并指定默认地址
  const DefaultWebpage({
    Key? key,
    this.initialUrl = "https://stackoverflow.com/",
  }) : super(key: key);

  @override
  State<DefaultWebpage> createState() => _DefaultWebpageState();
}

class _DefaultWebpageState extends State<DefaultWebpage> {
  int position = 1;
  // 移除错误的@override标记，controller是自定义成员变量
  WebViewController? controller;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (await controller!.canGoBack()) {
          controller?.goBack();
          return false;
        } else {
          return true;
        }
      },
      child: IndexedStack(
        index: position,
        children: [
          WebView(
              // 用widget.initialUrl获取传入的动态参数
              initialUrl: widget.initialUrl,
              javascriptMode: JavascriptMode.unrestricted,
              onPageStarted: (value) {
                setState(() {
                  position = 1;
                });
              },
              onPageFinished: (value) {
                setState(() {
                  position = 0;

                  controller?.evaluateJavascript(
                      "document.getElementsByClassName('navbar-wrapper')[0].style.display='none'");

                  controller?.evaluateJavascript(
                      "document.getElementsByClassName('footer')[0].style.display='none'");
                });
              },
              onWebViewCreated: (controller) {
                this.controller = controller;
              }),
          Container(
            child: Center(
              child: shimmer_effect(),
            ),
          )
        ],
      ),
    );
  }
}

调用示例 #

• 传入自定义地址：

DefaultWebpage(initialUrl: "https://example.com/")

• 使用默认地址：

DefaultWebpage()

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