Flutter Widget篇

2019-06-06  本文已影响0人  AndyDufres_0e9c

异常火热的跨平台开发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),
        ),
      ),
上一篇下一篇

猜你喜欢

热点阅读