美文网首页
flutter 加载loading导航按钮可以返回

flutter 加载loading导航按钮可以返回

作者: sj1910 | 来源:发表于2020-12-09 11:22 被阅读0次

    用flutter系统的loading的话遮罩是全屏的,导航按钮就无法点击,所以做了一个wiget添加在导航栏下方的屏幕上
    Animation.dart

    import 'package:flutter/material.dart';
    
    class LoadingAnimation extends StatefulWidget {
      LoadingAnimation(
          {Key key,
          @required this.image,
          this.duration = const Duration(milliseconds: 800),
          this.controller});
    
      final Image image;
      final Duration duration;
      final AnimationController controller;
    
      @override
      State<StatefulWidget> createState() {
        return _LoadingAnimationState();
      }
    }
    
    class _LoadingAnimationState extends State<LoadingAnimation>
        with SingleTickerProviderStateMixin {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: RotationTransition(
            //设置动画的旋转中心
            alignment: Alignment.center,
            //动画控制器
            turns: _controller,
            //将要执行动画的子view
            child: widget.image,
          ),
        );
      }
    
      AnimationController _controller;
    
      @override
      void initState() {
        super.initState();
        _controller = (widget.controller ??
            AnimationController(vsync: this, duration: widget.duration))
          ..repeat();
      }
    
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
    }
    
    

    LoadingWidget.dart

    import 'package:flutter/material.dart';
    import 'package:sj_ui/style/widget_style.dart';
    import 'package:sj_ui/toast/loading_animation.dart';
    
    class SJLoadingWidget extends StatelessWidget {
      SJWidgetStyle style = SJWidgetStyle.sj;
      String text;
    
      SJLoadingWidget({this.style, this.text});
    
      @override
      Widget build(BuildContext context) {
        /********* 根据 style 设置司乘不同样式:*******/
    
        // 最小宽度,
        double _toastMinWidth = 120;
        // 最大宽度,注:最大宽度增大80才正常显示!,最小宽度没有效果
        double _toastMaxWidth = 120;
        // 文字大小,
        double _textSize = 12;
        // 背景不透明度
        double _backgroundOpacity = 0.7;
        // icon 与文字距离
        double _blankHeight = 8;
        // toast 文字图标与背景 padding, 
        EdgeInsetsGeometry _padding =
            const EdgeInsets.symmetric(horizontal: 20, vertical: 10);
        // icon 大小
        double _iconSize = 30;
        if (style == SJWidgetStyle.sj) {
          _toastMinWidth = 200;
          _toastMaxWidth = 200;
          _textSize = 24;
          _backgroundOpacity = 0.9;
          _blankHeight = 16;
          _padding = const EdgeInsets.symmetric(horizontal: 20, vertical: 20);
          _iconSize = 44;
        }
        /***********************************************/
    
        final List<Widget> children = <Widget>[];
        // 添加loading 图标
        children.add(_buildLoadingIcon(style, _iconSize));
        if (text != null && text.trim() != '') {
          // 图标与文字距离
          children.add(SizedBox(height: _blankHeight));
        }
    
        // add text
        if (text != null && text.trim() != '') {
          children.add(Text(text,
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: _textSize,
                  decoration: TextDecoration.none)));
        }
    
        return Center(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: _toastMinWidth,
              maxWidth: _toastMaxWidth,
            ),
            child: Container(
              padding: _padding,
              decoration: BoxDecoration(
                color: Color(0xb3000000).withOpacity(_backgroundOpacity),
                borderRadius: BorderRadius.all(
                  Radius.circular(4.0),
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: children,
              ),
            ),
          ),
        );
      }
    
      Widget _buildLoadingIcon(SJWidgetStyle style, double iconSize) {
        var image = 'images/sj_loading.png';
        if (style == SJWidgetStyle.sj) {
          image = 'images/sj_loading.png';
        }
    
        var loadingIcon = Image.asset(
          image,
          package: 'sj_ui',
          width: iconSize,
          height: iconSize,
        );
        return LoadingAnimation(
          duration:  const Duration(milliseconds: 800),
          image: loadingIcon,
        );
      }
    }
    
    

    调用

    return Center(
            child: SJLoading.loadingWidget(
              text: '加载中',
            ),
          );
    

    相关文章

      网友评论

          本文标题:flutter 加载loading导航按钮可以返回

          本文链接:https://www.haomeiwen.com/subject/xgfhgktx.html