Flutter:创建叠加进度条 [英] Flutter : create an overlay progress bar

问题描述

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

How do I create an overlay page in Flutter.

基本上，今天我的页面中央有一个微调框.现在，我希望当前页面褪色(不透明度为90％)，并在按下按钮时显示动画点.

Basically, today I have a spinner in the center of my page. Now, I want the current page to fade (90% opacity) and show the animated dots when I press a button

不确定如何执行此操作.

Not sure how to do this.

感谢您的帮助

推荐答案

尝试一下.

        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();
        }

        @override
        void showSendingProgressBar() {
            _sendingMsgProgressBar.show(context);
        }

        @override
        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();
                        });
                        });
                    },
                    )
                ],
                ),
            ),
            );
        }
        }

ProgressBar类

ProgressBar class

        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;

        }

这篇关于Flutter:创建叠加进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！