flutter自定义跟随组件,主要场景为下拉选择菜单
import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';/// 例:///```dart///EolFollowerWidget eolFollower = EolFollowerWidget();///eolFollower.target(/// cont
·
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);
}
}
示例如下
更多推荐
已为社区贡献3条内容
所有评论(0)