如何在 Flutter 中自定义 DropDown？

Question

在颤振中，我尝试修改下拉列表，如下所示

我尝试过将叠加层与容器一起使用，但叠加层是从整个页面定位的。如何从上一个小部件定位到覆盖

```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);
          })
    ],
  ),
);
}
 }```

我使用覆盖概念来实现这一点。 有没有其他解决方案可以实现自定义下拉？？？

Answer 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(() {});
                          }),
                    )

Answer 2

这将有助于实现您的目标。

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;
 GlobalObjectKey  _globalObjectKey = GlobalObjectKey(ValueKey('a_key_that_different_from_any_other'));   // ADD THIS LINE
 
final LayerLink _layerLink = LayerLink();

OverlayEntry _createOverlayEntry() {
   RenderBox renderBox =_globalObjectKey.currentContext?.findRenderObject(); //EDIT THIS LINE
    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(
              key: _globalObjectKey, // ADD THIS LINE
              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);
          })
    ],
  ),
);
}
 }