如何在WebViewFlutter中顯示LoadingIndicator背景透明？

我是新手，正在制作我的第一個 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>{
 
  int position = 1 ;
 
  final key = UniqueKey();
 
  doneLoading(String A) {
    setState(() {
      position = 0;
    });
  }
 
  startLoading(String A){
    setState(() {
      position = 1;
    });
  }
 
  @override
  Widget build(BuildContext context) {
  return Scaffold(
     appBar: null,
      body: SafeArea(child: IndexedStack(
                            index: position,
                            children: <Widget>[ 
                                              WebView(
                                                initialUrl: 'https://google.com',
                                                javascriptMode: JavascriptMode.unrestricted,
                                                key: key ,
                                                onPageFinished: doneLoading,
                                                onPageStarted: startLoading,
                                                ),
 
                                                Container(
                                                  color: Colors.white70,
                                                  child: Center(
                                                    child: CircularProgressIndicator()),
                                                  ),
        
                                              ])) 
       
                  );
    }
}

任何幫助或指導將不勝感激。

uj5u.com熱心網友回復：

你可以這樣試試。每次進入網路視圖螢屏時。裝載機將顯示。

class WebViewClass extends StatefulWidget {
  WebViewState createState() => WebViewState();
}

class WebViewState extends State<WebViewClass> {

  bool isLoading = false;

  final key = UniqueKey();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: null,
        body: SafeArea(
            child: IgnorePointer(
              ignoring: isLoading,
              child: Stack(
                children: [
                  WebView(
                    initialUrl: 'https://google.com',
                    javascriptMode: JavascriptMode.unrestricted,
                    key: key,
                    onPageFinished: (value) {
                      setState(() {
                        isLoading = false;
                      });
                    },
                    onPageStarted: (value) {
                      setState(() {
                        isLoading = true;
                      });
                    },
                  ),
                  isLoading ? Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    color: Colors.grey.withOpacity(0.5),
                    child: const Center(child: CircularProgressIndicator())  ,
                  ) : Container(),
                ],
              ),
            )),);
  }
}

標籤：扑 镖

上一篇：如何在Flutter中將首選項保存到不同的范圍？

下一篇：Flutter：如何簡單地將相機顯示到螢屏上？