Flutter中如何实现WebView加载指示器的背景透明效果

问题原因 #

你当前用IndexedStack实现加载态切换的逻辑存在问题：IndexedStack同一时间只会渲染对应index的子组件，其余子组件完全不展示。也就是说当position=1显示加载层时，底层的WebView是完全隐藏的，你设置的半透明白色背景自然没有可以透出的底层内容，看起来就像透明度没生效。

解决方案 #

把IndexedStack替换为Stack组件，加载层作为Stack的上层子组件，通过变量控制是否显示即可，这样加载层展示时会浮在WebView之上，半透明背景就能透出底层的WebView内容。

修改后的完整代码如下：

// ignore_for_file: prefer_const_constructors
// ignore: use_key_in_widget_constructors
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
        body: WebViewClass()
       )
      );
  }
}
 
class WebViewClass extends StatefulWidget {
 
  WebViewState createState() => WebViewState();
 
}
 
class WebViewState extends State<WebViewClass>{
 
  bool isLoading = true; // 改为bool类型更直观
 
  final key = UniqueKey();
 
  doneLoading(String A) {
    setState(() {
      isLoading = false;
    });
  }
 
  startLoading(String A){
    setState(() {
      isLoading = true;
    });
  }
 
  @override
  Widget build(BuildContext context) {
  return Scaffold(
     appBar: null,
      body: SafeArea(
        child: Stack( // 替换IndexedStack为Stack
          children: <Widget>[ 
            WebView(
              initialUrl: 'https://google.com',
              javascriptMode: JavascriptMode.unrestricted,
              key: key ,
              onPageFinished: doneLoading,
              onPageStarted: startLoading,
            ),
            // 加载层仅在isLoading为true时展示
            if (isLoading)
              Container(
                color: Colors.white70,
                // 如需自定义透明度可以替换为：color: Colors.white.withOpacity(0.7), 调整0-1区间的数值即可
                child: const Center(
                  child: CircularProgressIndicator()
                ),
              ),
          ],
        )
      )  
    );
  }
}

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