Flutter : 创建一个覆盖进度条

Posted 2023-02-23

【中文标题】Flutter : 创建一个覆盖进度条

【英文标题】：Flutter : create an overlay progress bar

【发布时间】：2020-02-05 05:36:54

【问题描述】：

如何在 Flutter 中创建覆盖页面。

基本上，今天我的页面中心有一个微调器。现在，我希望当前页面淡出（90% 不透明度）并在我按下按钮时显示动画点

不知道该怎么做。

感谢您的帮助

【问题讨论】：

见api.flutter.dev/flutter/widgets/Overlay-class.html

您可以使用堆栈小部件并将背景颜色不透明度设置为堆栈中的最后一个小部件。

【参考方案1】：

试试这个。

        class SamplePage extends StatefulWidget 
        @override
        _SamplePageState createState() => _SamplePageState();
        

        class _SamplePageState extends State<SamplePage> 
        ProgressBar _sendingMsgProgressBar;

        @override
        void initState() 
            super.initState();
            _sendingMsgProgressBar = ProgressBar();
        

        @override
        void dispose() 
            _sendingMsgProgressBar.hide();
            super.dispose();
        

        void showSendingProgressBar() 
            _sendingMsgProgressBar.show(context);
        

        void hideSendingProgressBar() 
            _sendingMsgProgressBar.hide();
        

        @override
        Widget build(BuildContext context) 
            return Scaffold(
            appBar: AppBar(
                title: Text('Progress Demo'),
            ),
            body: Center(
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                    RaisedButton(
                    child: Text("Start Progress"),
                    onPressed:()
                        showSendingProgressBar();
                        Future.delayed(const Duration(milliseconds: 3000), () 
                        setState(() 
                            hideSendingProgressBar();
                        );
                        );
                    ,
                    )
                ],
                ),
            ),
            );
        
        

进度条类

        import 'package:flutter/material.dart';

        class ProgressBar 
        
        OverlayEntry _progressOverlayEntry;
        
        void show(BuildContext context)
            _progressOverlayEntry = _createdProgressEntry(context);
            Overlay.of(context).insert(_progressOverlayEntry);
        
        
        void hide()
            if(_progressOverlayEntry != null)
            _progressOverlayEntry.remove();
            _progressOverlayEntry = null;
            
        
        
        OverlayEntry _createdProgressEntry(BuildContext context) =>
            OverlayEntry(
                builder: (BuildContext context) =>
                    Stack(
                        children: <Widget>[
                        Container(
                            color: Colors.lightBlue.withOpacity(0.5),
                        ),
                        Positioned(
                            top: screenHeight(context) / 2,
                            left: screenWidth(context) / 2,
                            child: CircularProgressIndicator(),
                        )

                        ],

                    )
            );

        double screenHeight(BuildContext context) =>
            MediaQuery.of(context).size.height;

        double screenWidth(BuildContext context) =>
            MediaQuery.of(context).size.width;
        
        

【讨论】：

我可以在未来的构建器中使用它吗？

我已经尝试过未来的建设者，但没有成功。

您需要为不可为空的变量更新代码