Question

我还在学习Flutter，我正在尝试创建一个自定义下拉列表。下面是我的自定义下拉列表，它似乎工作并返回所选值，但我仍然需要帮助如何在按下墨水池时显示弹出列表。另外，如何传入字符串数组来构建/填充弹出列表项。感谢您的帮助。

return new Expanded(
    flex: 4,
    child: new InputDropdownList(
      labelText: "Select a value",
      valueText: viewModel.selectedValue,
      valueStyle: Theme.of(context).inputDecorationTheme.labelStyle,
      items: <String>["ValueA", "ValueB", "ValueC", "ValueD"],
      onPressed: () { 
      },
      selectedValue: (String value) { 
        setState(() { viewModel.selectedValue= value; });
      },
    ),
),


class InputDropdownList extends StatelessWidget {
  const _InputDropdownList({
    Key key,
    this.labelText,
    this.valueText,
    this.valueStyle,
    this.items,
    this.onPressed,
    this.selectedValue }) : super(key: key);

  final String labelText;
  final String valueText;
  final TextStyle valueStyle;
  final List<String> items;
  final Function() onPressed;
  final ValueChanged<String> selectedValue;

  @override
  Widget build(BuildContext context) {
    return new InkWell(
      onTap: () {},
      child: new InputDecorator(
        decoration: new InputDecoration(
          labelText: labelText,
        ),
        baseStyle: valueStyle,
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new Text(valueText, style: valueStyle),
            new PopupMenuButton<String>(
              icon: new Icon(Icons.arrow_drop_down, color: Theme.of(context).brightness == Brightness.light ? Colors.grey.shade700 : Colors.white70),
              padding: EdgeInsets.zero,
              onSelected: (value) {
                selectedValue(value);
              },
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                new PopupMenuItem<String>(
                  value: "ValueA",
                  child: const Text('ValueA')
                ),
                new PopupMenuItem<String>(
                  value: "ValueB",
                  child: const Text('ValueB')
                ),
              ]
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

所以这里有两个问题：您想使用List<String>来填充PopupMenuButton，而单击InkWell不会打开弹出菜单。

对于第一个问题，可以创建一个用于生成PopupMenuItem列表的函数，以在PopupMenuButton itemBuilder上进行设置。

_popupMenuItems() {
  var popupMenuItemList = <PopupMenuItem<String>>[];
  items.forEach((itemValue) {
    popupMenuItemList.add(
        PopupMenuItem<String>(value: itemValue, child: Text('$itemValue')));
  });
  return popupMenuItemList;
}

在PopupMenuButton itemBuilder中设置_popupMenuItems()。

PopupMenuButton<String>(
  ...
  itemBuilder: (BuildContext context) => _popupMenuItems(),
);

对于第二个问题，您提供的示例中的当前设置基础以InkWell作为父窗口小部件。仅当单击PopupMenuButton时才能显示弹出菜单。使用这种方法，PopupMenuButton只能在小部件的一小部分单击。

InkWell(
  child: InputDecorator(
    child: Row(
      children: <Widget>[
        Text(),
        PopupMenuButton(),
      ],
    ),
  ),
)

作为解决方案，PopupMenuButton可以是InkWell的父窗口小部件。这样，单击PopupMenuButton内的子项仍应显示弹出菜单。

PopupMenuButton(
  child: InkWell(
    child: InputDecorator(
      child: Row(
        children: <Widget>[
          Text(),
          Icon(),
        ],
      ),
    ),
  ),
)

请注意，您只能在child中使用icon或PopupMenuButton，但不能同时使用。由于无法使用icon，因此可以在Icon旁边设置Text。

这是一个完整的工作示例。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var selectedValue = 'Default';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: InputDropdownList(
          labelText: "Select a value",
          valueText: selectedValue,
          valueStyle: Theme.of(context).inputDecorationTheme.labelStyle,
          items: <String>["ValueA", "ValueB", "ValueC", "ValueD"],
          onPressed: () {},
          selectedValue: (String value) {
            setState(() {
              selectedValue = value;
            });
          },
        ),
      ), 
    );
  }
}

class InputDropdownList extends StatelessWidget {
  const InputDropdownList(
      {Key key,
      this.labelText,
      this.valueText,
      this.valueStyle,
      this.items,
      this.onPressed,
      this.selectedValue})
      : super(key: key);

  final String labelText;
  final String valueText;
  final TextStyle valueStyle;
  final List<String> items;
  final Function() onPressed;
  final ValueChanged<String> selectedValue;

  _popupMenuItems() {
    var popupMenuItemList = <PopupMenuItem<String>>[];
    items.forEach((itemValue) {
      print('$itemValue');
      popupMenuItemList.add(
          PopupMenuItem<String>(value: itemValue, child: Text('$itemValue')));
    });
    return popupMenuItemList;
  }

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      child: InkWell(
        // onTap() function overrides the popup displayed from PopupMenuButton
        // onTap: () {
        //   debugPrint('Inkwell tapped');
        // },
        child: InputDecorator(
          decoration: InputDecoration(
            labelText: labelText,
          ),
          baseStyle: valueStyle,
          child: Row(
            children: [
              Text(valueText, style: valueStyle),
              Icon(Icons.arrow_drop_down,
                  color: Theme.of(context).brightness == Brightness.light
                      ? Colors.grey.shade700
                      : Colors.white70),
            ],
          ),
        ),
      ),
      padding: EdgeInsets.zero,
      onSelected: (value) {
        selectedValue(value);
      },
      itemBuilder: (BuildContext context) => _popupMenuItems(),
    );
  }
}

Answer 2

Here is the dropdown with custom UI,
List<String> slots = [
    '1',
    '2',
    '3',
    '4',
    '5',
];

    List<DropdownMenuItem<String>> mItems = new List();
    
        for (int i = 0; i < slots.length; i++) {
          mItems.add(new DropdownMenuItem(
            child: new Text(slots[i]),
            value: slots[i],
          ));
        }
    

    Container(
    height: 50,
    padding: EdgeInsets.only(left: 10, right: 10),
    margin: EdgeInsets.only(
    bottom: 20, left: 15, right: 15),
    alignment: Alignment.center,
        decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: const BorderRadius.all(
        const Radius.circular(12.0),
        ),
        ),
        child: DropdownButton(
        isExpanded: true,
        underline: Container(),
        icon: Icon(
        Icons.keyboard_arrow_down,
        color: textBlue,
        ),
        hint: Text(
        value,
        style: kTextFieldStyleFill,
        ),
        value: value,
        onChanged: (newValue) {
        setState(() {
        value = newValue;
        });
        },
        items: mItems,
        ),
    )

如何在Flutter中创建自定义下拉列表？

2 个答案: