美文网首页
Flutter Widget篇

Flutter Widget篇

作者: AndyDufres_0e9c | 来源:发表于2019-06-06 09:22 被阅读0次

    异常火热的跨平台开发Flutter,不知道吸引了多少人,Flutter中各式各样的Widget既让人欢喜,也让开发者忧愁,太特么多了,了解不过来,不过作为21世纪杰出程序员,必须学会借鉴别人的成果,事实上很多Widget在百度Google里面都能查到,我这里只是补充开发中遇到,但是网上还没有解释翻译的Wiget。

    Visibility 控件的显示或者隐藏

    Visibility({
    Key key,
    @required this.child, 
    this.replacement = const SizedBox.shrink(), //用于替换的Widget,如果不复写那么就是默认空的SizedBox
    this.visible = true, //控制child 是否可见,当为false的时候显示replacement
    this.maintainState = false,  //是否在不可见的情况下维护Widgetstate
    this.maintainAnimation = false, //是否在widget不可见时保持动画
    this.maintainSize = false,// 是否预留位置
    this.maintainSemantics = false,// 可访问性
    this.maintainInteractivity = false, // 是否在隐藏时维持交互
    }
    

    1、实现Android中的 invisible

    Visibility(
    child: Text("Invisible"),
    maintainSize: true, 
    maintainAnimation: true,
    maintainState: true,
    visible: false, 
    ),
    

    2、实现gone

    Visibility(
    child: Text("Gone"),
    visible: false,
    ),
    

    Vibility部分源码实现

    @override
    Widget build(BuildContext context) {
    if (maintainSize) {
      Widget result = child;
      if (!maintainInteractivity) {
        result = IgnorePointer(
          child: child,
          ignoring: !visible,
          ignoringSemantics: !visible && !maintainSemantics,
        );
      }
      return Opacity(
        opacity: visible ? 1.0 : 0.0,
        alwaysIncludeSemantics: maintainSemantics,
        child: result,
      );
    }
    assert(!maintainInteractivity);
    assert(!maintainSemantics);
    assert(!maintainSize);
    if (maintainState) {
      Widget result = child;
      if (!maintainAnimation)
        result = TickerMode(child: child, enabled: visible);
      return Offstage(
        child: result,
        offstage: !visible,
      );
    }
    assert(!maintainAnimation);
    assert(!maintainState);
    return visible ? child : replacement;
    }
    

    这样看起来其实就很清楚了,实在弄不明白请参考 https://www.cnblogs.com/pjl43/p/9615685.html


    抽象类PopupRoute

    最近在实现类似于Android的PopupWindow效果即可固定位置的弹窗过程中,发现了PopupRoute抽象类。
    这个类可以实现将弹出一个透明的页面页面(其实也不全是 颜色由barierColor控制 如果为null 那么就是透明的 )

    abstract class PopupRoute<T> extends ModalRoute<T> {
    /// Initializes the [PopupRoute].
    PopupRoute({
    RouteSettings settings,
    }) : super(settings: settings);
    
    @override
    bool get opaque => false;//转换完成是否覆盖以前的路由
    
    @override
    bool get maintainState => true;//处于非活动状态时是否应保留在内存中
    
    }
    

    当然在实现Popup的时候肯定不止这两个属性可以设置,在他的父类或者爷爷类里面会有太多了请移步 PopupRoute<T> class参考

    具体使用

    class CustomRoute extends PopupRoute {
    Widget child;
    
    CustomRoute({@required this.child});
    
    @override
    Color get barrierColor => null;
    
    @override
    bool get barrierDismissible => true;
    
    @override
    String get barrierLabel => null;
    
    @override
    Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return child;
    }
    
    @override
    Duration get transitionDuration => Duration(milliseconds: 200);
    }
    

    onLongPress: () => Navigator.push(
            context,
            //调用
            CustomRoute(
              child: _buildContainer(context),
            ),
          ),

    相关文章

      网友评论

          本文标题:Flutter Widget篇

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