我尝试将叠加层与容器结合使用,但是叠加层占据了整个页面的位置。如何从上一个小部件定位到重叠
```import 'package:flutter/material.dart';
List titles = ['a','b','c','d',];
class sample extends StatefulWidget {
@override
CountriesFieldState createState() => CountriesFieldState();
}
class CountriesFieldState extends State<sample> {
final FocusNode _focusNode = FocusNode();
OverlayEntry _overlayEntry;
final LayerLink _layerLink = LayerLink();
OverlayEntry _createOverlayEntry() {
RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
var offset = renderBox.localToGlobal(Offset.zero);
return OverlayEntry(
builder: (context) => Positioned(
child: Container(
height: 240,
width: 320,
child: Scaffold(
body: Container(
margin: EdgeInsets.only(top: 8),
//color: Colors.red,
child: Column(
children: <Widget>[
new Expanded(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Container(
//width: (320/360)*screenWidth,
decoration: new BoxDecoration(
border: new Border.all(color: Colors.white),
color: Colors.white),
child: new ListTile(
//dense: true,
contentPadding: EdgeInsets.only(
bottom: 0, left: 15, top: 0),
onTap: () {
_overlayEntry.remove();
},
title: new Text(
titles[index],
textAlign: TextAlign.left,
style: new TextStyle(
fontSize: 15,
fontFamily: "IBM Plex Sans Medium",
fontWeight: FontWeight.w500,
color: const Color(0xFF999aab)),
),
),
);
},
itemCount: titles.length,
)),
],
),
),
),
),
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
new InkWell(
child: Align(
alignment: Alignment.center,
child: Container(
margin: EdgeInsets.only(top: 100),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1.0, color: Colors.lightBlue.shade900),
),
// color: Colors.red,
),
height: 50.0,
width: 300.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("abc")],
),
),
),
onTap: () {
this._overlayEntry = this._createOverlayEntry();
Overlay.of(context).insert(this._overlayEntry);
})
],
),
);
}
}```
我已经使用覆盖概念来实现这一目标。
还有其他解决方案可以实现自定义下拉菜单吗?
答案 0 :(得分:1)
这将有助于实现您的目标。
RAILS_MASTER_KEY
答案 1 :(得分:-1)
使用DropdownButton
小部件,您可以在其中传递任何自定义小部件作为项
Container(
width: 200,
child: DropdownButton(
isExpanded: true,
hint: Text('Select Working Time'),
value: selectedVal,
items: List.generate(
titles.length, (i) {
return DropdownMenuItem(
value:titles[i],
child: Text(
titles[i],
style: Theme.of(context)
.primaryTextTheme
.caption,
));
}),
onChanged: (c) {
selectedVal = c.toString().toLowerCase();
setState(() {});
}),
)