import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


/// 例:
///```dart
///EolFollowerWidget eolFollower = EolFollowerWidget();
///eolFollower.target(
/// context,
/// child: Row(
///   mainAxisAlignment: MainAxisAlignment.spaceAround,
///   children: <Widget>[
///     RaisedButton(
///       child: Text("点击三"),
///       onPressed: () {
///         eolFollower.follower(
///           context,
///           child: Container(
///             height: 400,
///             decoration: BoxDecoration(
///               border: Border(top: BorderSide(
///                 color: Colors.black,
///                 width: 2
///               )),
///               color: Colors.white,
///             ),
///             child: ListView(
///               children: [1, 2, 3, 4, 1, 1, 7, 7, 7].map((v) {
///                 return InkWell(
///                   onTap: () {
///                     setState(() {
///                       tt = 44564;
///                     });
///                   },
///                   child: Container(
///                     height: 30,
///                     child: Text(
///                       "$v",
///                       style: TextStyle(color: Colors.black),
///                      ),
///                    ),
///                 );
///                }).toList(),
///              ),
///            ),
///          );
///        },
///      ),
///    ],
///  ),
///)
///```
class EolFollowerWidget {
  OverlayEntry _overlayEntry;
  GlobalKey _gkey = GlobalKey();
  LayerLink _layerLink = LayerLink();
  // 工厂模式,此类暂不需要
  // static final EolFollowerWidget _eolFollowerWidget = EolFollowerWidget._internal();
  // factory EolFollowerWidget() {
  //   return _eolFollowerWidget;
  // }
  // EolFollowerWidget._internal();

  /// 取消
  void cancel() {
    if (_overlayEntry != null) {
      _overlayEntry.remove();
      _overlayEntry = null;
    }
  }

  /// target组件
  Widget target(BuildContext context, {@required Widget child}) {
    return CompositedTransformTarget(
      link: _layerLink,
      child: Container(
        key: _gkey,
        width: 750.w,
        child: child,
      ),
    );
  }

  /// follower组件
  follower(BuildContext context, {@required Widget child}) {
    if (_overlayEntry != null) {
      cancel();
    }
    RenderBox renderBox = _gkey.currentContext.findRenderObject();
    Size size = renderBox.size;
    var vector3 = renderBox.getTransformTo(null).getTranslation();

    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        width: size.width,
        // width: MediaQuery.of(context).size.width,
        child: CompositedTransformFollower(
          link: _layerLink,
          showWhenUnlinked: false,
          offset: Offset(0, size.height),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {
                cancel();
              },
              child: Container(
                height: MediaQuery.of(context).size.height-vector3.y,
                decoration: BoxDecoration(
                  color: Colors.black38,
                ),
                child: Container(
                  alignment: Alignment.topCenter,
                  padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
                  child: child,
                ),
              ),
            ),
          ),
        ),
      ),
    );
    var overlayState = Overlay.of(context);
    overlayState.insert(_overlayEntry);
  }
}

示例如下

示例图片

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐