flutter - Flutter PopupMenuButton 缺少波纹效果

Question

上图中的按钮是我试图复制的。当它被点击时，它应该显示一个不同温度单位的列表。我从一个凸起的按钮开始，发现仅仅显示一个弹出列表并不容易。所以我将其更改为使用容器。除了点击按钮时的涟漪效应外，它可以工作。如果我删除 BoxDecoration 颜色，它确实有效，但我确实希望按钮的颜色为白色。有没有办法做到这一点？

                      Expanded(
                        flex: 2,
                        child: PopupMenuButton(
                          elevation: 3.0,
                          onSelected: (String value) {
                            setState(() {
                              _selection = value;
                            });
                          },
                          child: Container(
                            height: double.maxFinite,
                            width: double.maxFinite,
                            child: Center(
                              child: Text(
                                'C\n\nCelsius',
                                textAlign: TextAlign.center,
                              ),
                            ),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(10),
                                border: Border.all(
                                    color: Colors.grey[kButtonBorderShade],
                                    width: 0.5)),
                          ),
                          itemBuilder: (BuildContext context) =>
                              <PopupMenuEntry<String>>[
                            const PopupMenuItem<String>(
                              value: 'Value1',
                              child: Text('Choose value 1'),
                            ),
                            const PopupMenuItem<String>(
                              value: 'Value2',
                              child: Text('Choose value 2'),
                            ),
                            const PopupMenuItem<String>(
                              value: 'Value3',
                              child: Text('Choose value 3'),
                            ),
                          ],
                        ),
                      ),

编辑：感谢您在下面的回答。根据给出的建议，我完全按照我想要的方式工作。这是我的最后一个按钮：

                      Expanded(
                        flex: 2,
                        child: ClipRRect(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                          child: Material(
                            color: Colors.white,
                            child: PopupMenuButton(
                              onSelected: (String value) {
                                setState(() {
                                  _selection = value;
                                });
                              },
                              child: Container(
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    border: Border.all(
                                        color:
                                            Colors.grey[kButtonBorderShade],
                                        width: 0.5)),
                                child: Center(
                                  child: Text(
                                    'C\n\nCelsius',
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              ),
                              itemBuilder: (BuildContext context) =>
                                  <PopupMenuEntry<String>>[
                                const PopupMenuItem<String>(
                                  value: 'Value1',
                                  child: Text('Choose value 1'),
                                ),
                                const PopupMenuItem<String>(
                                  value: 'Value2',
                                  child: Text('Choose value 2'),
                                ),
                                const PopupMenuItem<String>(
                                  value: 'Value3',
                                  child: Text('Choose value 3'),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

标签： flutterflutter-layoutflutter-widget

Answer 1

您可以实现包装PopupMenuButtonwithMaterial并将color属性放入Material小部件而不是BoxDecoration，如下所示：

Material(
    color: Colors.white,
    child: PopupMenuButton(...