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

2020-12-09  本文已影响0人  sj1910

用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: '加载中',
        ),
      );
上一篇下一篇

猜你喜欢

热点阅读