final GlobalKey _noticeKey = GlobalKey();
OverlayEntry _overlayEntry;
final LayerLink _layerLink = LayerLink();
void initState() {
_linkFocusNode.addListener(() {
if (_linkFocusNode.hasFocus ) {
_showOverlay(context);
} else {
_dismissOverlay();
}
});
}
_showOverlay(BuildContext context) {
final overlay = Overlay.of(context);
_overlayEntry = OverlayEntry(builder: (ctx) {
final renderBox =
_noticeKey?.currentContext?.findRenderObject() as RenderBox;
final size = renderBox.size;
final offset = renderBox.localToGlobal(Offset.zero);
//使用CompositedTransformFollower,可以不对Positioned 设置left,top
return Positioned(
// left: offset.dx,
// top: offset.dy + size.height,
width: size.width,
child: CompositedTransformFollower(
link: _layerLink,
showWhenUnlinked: false,
offset: Offset(0, size.height + 8),
child: Material(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("第一条"),
Text("第而条"),
Text("第三条"),
],
),
),
),
);
});
overlay?.insert(_overlayEntry);
}
_dismissOverlay() {
if (_overlayEntry != null) {
_overlayEntry?.remove();
_overlayEntry = null;
}
}
使用
CompositedTransformTarget(
link: _layerLink,
child: Container(
key: _noticeKey,
height: 60.h,
decoration: BoxDecoration(
color: JadeColors.grey_5,
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: [
GestureDetector(
child: Container(
height: double.infinity,
padding: EdgeInsets.only(left: 20.w,right: 10.w),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(_inStation?'站内':'站外',style: TextStyle(color: JadeColors.grey_2,fontSize: setFontSize(24)),),
Icon(Icons.keyboard_arrow_down,size: 16,color: JadeColors.grey_2,)
],
),
),
onTap: (){
setState(() {
_inStation = !_inStation;
});
},
),
Container(
width: 1.5,
height: double.infinity,
color: JadeColors.grey_6,
),
Expanded(child:
TextField(
textAlign: TextAlign.start,
controller: _linkTextEditingController,
focusNode: _linkFocusNode,
style: TextStyle(fontSize: 35.sp, color: JadeColors.grey),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
maxLines: 1,
decoration: InputDecoration(
filled: true,
fillColor: JadeColors.lightGrey,
contentPadding: EdgeInsets.only(
left: 20.w,
right: 20.w,
top: 10.w,
bottom: 10.w
),
hintText:'请输入跳转的商品链接',
hintStyle: TextStyle(
fontSize: 28.sp,
color: JadeColors.grey,
),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(8.w)),
// enabledBorder: OutlineInputBorder(
// // borderSide: BorderSide.none,
// borderRadius: BorderRadius.circular(8.w)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(8.w)),
),
cursorColor: JadeColors.grey,
onEditingComplete: (){
if(_inStation){
FocusScope.of(context).requestFocus(_goodsNameFocusNode);
}else{
FocusScope.of(context).requestFocus(_contactsFocusNode);
}
},
)
)
],
),
),
)