drop-down-menu - 如何在 Flutter 中创建自定义下拉列表？

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 List的函数，设置在PopupMenuButton itemBuilder上。

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

设置_popupMenuItems()在 PopupMenuButton itemBuilder 中。

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