flutter widget

Posted 2020-12-22 qqcc1388

目录

• Overlay 自定义弹窗 悬浮窗
• Hero 页面过渡动画
• BackdropFilter 高斯模糊

Overlay 自定义弹窗 悬浮窗

意思是Overlay是一个Stack组件，可以将OverlayEntry插入到Overlay中，使其独立的child窗口悬浮于其它组件之上，利用这个特性可以自定义弹窗或者悬浮窗

  OverlayEntry entry = OverlayEntry(builder: (context) {
      return Positioned(
        top: 64,
        left: 0,
          child: Material(
            color: Colors.white,
            child: Container(
              height: 40,
              width: MediaQuery.of(context).size.width,
             color: Colors.orange,
              alignment: Alignment.center,
              child: Text(‘我是弹窗‘),
            ),
          ));
    });
    Overlay.of(context).insert(entry);
    Future.delayed(Duration(seconds: 2)).then((res) {
      entry.remove();
    });

Hero 页面过渡动画

Hero的使用非常的简单，需要关联的两个组件用Hero组件包裹，并指定相同的tag参数,代码如下：

///列表item
InkWell(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Hero(
          tag: widget.data,
          child: LoadImage(
            ‘${widget.data.img}‘,
            width: 81.0,
            height: 81.0,
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => GoodsDetailsPage(data: widget.data)));
      },
    );
///详情
 Hero(
    tag: tag,
    child: LoadImage(
        imageUrl,
        width: double.infinity,
        height: 300,
        fit: BoxFit.cover,
        ),
    )

BackdropFilter 高斯模糊

ClipRect(
    BackdropFilter(
        filter: ImageFilter.blur(sigmaX, sigmaY),
        child: ...)
)