高亮显示DropdownButton中的选定值(如PopupMenuButton)

Question

当按下PopupMenuButton时，当前选择的值被突出显示，

​

但当按下DropdownButton时，当前选定的值不会突出显示。

​

有没有办法突出显示DropdownButton的选定值

下面是一些示例代码以供参考：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  String letter = 'A';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Popup Menu Button')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(height: 16.0),
          Text('PopupMenuButton'),
          buildPopupMenuButton(),
          SizedBox(height: 16.0),
          Text('DropdownButton'),
          buildDropdownButton(),
        ],
      ),
    );
  }

  Widget buildPopupMenuButton() {
    return PopupMenuButton<String>(
      padding: EdgeInsets.zero,
      initialValue: letter,
      onSelected: (val) => setState(() => letter = val),
      child: ListTile(
        title: Text('The letter $letter'),
      ),
      itemBuilder: (BuildContext context) {
        return <PopupMenuItem<String>>[
          PopupMenuItem<String>(
            value: 'A',
            child: Text('The letter A'),
          ),
          PopupMenuItem<String>(
            value: 'B',
            child: Text('The letter B'),
          ),
        ];
      },
    );
  }

  Widget buildDropdownButton() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: DropdownButton<String>(
        value: letter,
        onChanged: (val) => setState(() => letter = val),
        items: [
          DropdownMenuItem<String>(
            value: 'A',
            child: Text('The letter A'),
          ),
          DropdownMenuItem<String>(
            value: 'B',
            child: Text('The letter B'),
          ),
        ],
      ),
    );
  }
}

这是一段视频，展示了这个问题：

​

​

Answer 1

DropdownMenuItem并不支持对子元素进行很多自定义修改，因为实际上DropdownMenuItem属性中没有任何样式、背景等内容来帮助您完成这些修改。看一下代码，它真的不是为此而构建的，

但是，您还可以添加一些东西，对DropdownMenuItem的child属性进行简单的检查，并将Text子元素包装在其他元素中，或者在选中的情况下设置Text元素本身的样式。

举个例子：

Widget buildDropdownButton() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: DropdownButton<String>(
        value: letter,
        onChanged: (val) => setState(() => letter = val),
        items: [
          DropdownMenuItem<String>(
            value: 'A',
            child: Container(
              color: letter == 'A' ? Colors.black12 : null,
              child: Text('The letter A'),
            ),
          ),
          DropdownMenuItem<String>(
            value: 'B',
            child: Container(
              color: letter == 'B' ? Colors.black12 : null,
              child: Text('The letter B'),
            ),
          ),
        ],
      ),
    );
}

请注意，在真实的场景中，您将有一个带有参数的方法来构建每个下拉项，这样验证就不必像letter == 'A'那样被硬编码。

这将是输出：

​

​

这种方法允许您设置一些样式，但在某些情况下会产生丑陋的结果。虽然它是可定制的，但项目周围总是有一个白色边距，而且当下拉列表关闭时，它也会显示相同的样式，所以它在主页上变得有点丑陋。

除了改变背景之外，你还可以改变文本的颜色，下划线，边上的图标，诸如此类的东西会让它变得更好，比如：

DropdownMenuItem<String>(
  value: 'A',
  child: Text('The letter A',
    style: TextStyle(
      color: letter == 'A' ? Colors.red : Colors.black87,
    ),
  ),
)

Answer 2

据我所知，这个灰色的覆盖层是材料设计库中的一种所谓的“波纹效果”。似乎Flutter还没有适应所有小部件的完整设计。

但是，您可以尝试使用InkWell小部件将此类动画/颜色添加到当前小部件中：

https://flutter.io/docs/cookbook/gestures/ripples

例如：

PopupMenuItem<String>(
    value: 'B',
    child: InkWell(child: Text('The letter B'))
),

我不确定宽度是否正确，但至少当您按下条目时，它应该显示灰色覆盖。

您还可以查看颤动源：https://github.com/flutter/flutter/blob/237fc2fb45639312001e947bf7465ef9f23bb699/packages/flutter/lib/src/material/popup_menu.dart#L933

在这里，您可以看到用于PopupMenuButton的Inkwell是标准的。

Answer 3

您最初的问题是：“当所有值都显示时，我对当前所选值的较暗背景感兴趣。”

您的PopupMenuButton将在每次打开时查看其initialValue:参数--与该值对应的项将突出显示。每次都需要使用onSelected函数更新initialValue参数。

确保父小部件是一个StatefulWidget小部件，并创建一个对initialValue的引用。PopupMenuButton有一个onSelected参数，该参数接受一个带有String参数的函数。

每当从PopupMenuButton中选择一个选项时，调用

setState(() {
        ...
        this.initialValue = value;
});

完整的类看起来像这样。

Class YourClass extends StatefulWidget {
  @override
  createState() => _YourClassState();
}

class _YourClassState extends State<YourClass> {
  ...
  String initialValue = 'foo';

  @override
  Widget build(BuildContext context) {
    final items = [
      PopupMenuItem(
        value: 'foo',
        child: Text('foo'),
      ),
      PopupMenuItem(
        value: 'nice',
        child: Text('nice'),
      ),
    }
    return Scaffold(
      appBar: ...,
      drawer: ...,
      body: PopupMenuButton(
        icon: ...,
        itemBuilder: (_) => items,
        initialValue: this.initialValue,
        onSelected: (value) => bar(value),
      ),
    );
  }

  void bar(String value) {
    setState(() {
      ...
      this.initialValue = value;
    });
  }
}