【问题标题】:How to give a height to the PopUpMenuButton in Flutter?如何给 Flutter 中的 PopUpMenuButton 一个高度?
【发布时间】:2019-07-23 10:42:29
【问题描述】:

我正在尝试创建PopupMenuButton。我使用了PopupMenuButton class

PopupMenuButton(
  padding: EdgeInsets.only(right: 8.0),
  offset: Offset(-16, 0),
  child: Container(
    decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.all(
          Radius.circular(16.0),
        )),
    padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
    child: Text(
      "Category",
      style: TextStyle(color: Colors.white),
    ),
  ),
  itemBuilder: (_) => <PopupMenuItem<String>>[
    new PopupMenuItem<String>(
        //I want this context to be scrollable with some fixed height on the screen
        child: Row(
          children: <Widget>[
            Icon(Icons.arrow_right),
            Text("Dairy & Bakery")
          ],
        ),
        value: '1'),
  ],
)

我已尝试实现PreferredSizeWidget,但无法处理PopupMenuButton

【问题讨论】:

  • 为 Conrainer 元素添加 height 属性
  • 顺便说一句,我建议您将问题标题更改为“如何为 Flutter 中的 PopUpMenu 赋予高度?”
  • 我建议你使用ListView从头实现你需要的东西
  • 我将如何展示我想要的效果

标签: flutter popupmenu


【解决方案1】:

编辑:我的意思是固定高度:S

PopUpMenuButton 不支持固定高度。但是你可以做的是调整 PopUpMenu 包。 做了类似的事情 here 使用下拉按钮。对于 PopUpMenu,实现应该类似地工作,因为两者都具有相同的效果。 (Route、RouteLayout 和 PopUpMenu)

编辑:

您查看original code of the DropdownButton,然后查看此人在the custom edition 中对其所做的更改。

然后您将code of the PopUpMenuButton 复制到您自己的项目中并像使用 DropDownButton 一样调整它们。

然后你使用带有参数高度的自定义版本的 PopUpMenuButton。

编辑 2:

由于您在执行我的意思时遇到了一些问题,所以我为您做了: 只需将此file 复制到您的目录并将其导入您的代码。 然后使用带有高度的 CustomPopupMenuButton 而不是原来的。

用法:

import 'package:flutter/material.dart';

import 'custom_popup_menu_button.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: Home(),
    );
  }
}
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

enum WhyFarther { harder, smarter, selfStarter, tradingCharter }

class _HomeState extends State<Home> {
  WhyFarther _selection;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'it does work here',
          style: TextStyle(fontSize: 20),
        ),
      ),
      body: Center(
          child: CustomPopupMenuButton<WhyFarther>(
        onSelected: (WhyFarther result) {
          setState(() {
            _selection = result;
          });
        },
        height: 100,
        itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
          const PopupMenuItem<WhyFarther>(
            value: WhyFarther.harder,
            child: Text('Working a lot harder'),
          ),
          const PopupMenuItem<WhyFarther>(
            value: WhyFarther.smarter,
            child: Text('Being a lot smarter'),
          ),
          const PopupMenuItem<WhyFarther>(
            value: WhyFarther.selfStarter,
            child: Text('Being a self-starter'),
          ),
          const PopupMenuItem<WhyFarther>(
            value: WhyFarther.tradingCharter,
            child: Text('Placed in charge of trading charter'),
          ),
        ],
      )),
    );
  }
}

如果有什么不好的,请随时询问,也许我稍后会研究它。

【讨论】:

  • PopupMenuButton 支持可滚动的内容,因为当popupmenu里面的内容变得太大而无法放入设备屏幕时,它变成了可滚动的
  • 我的意思是固定高度:S...这是自定义下拉按钮中实现的内容
猜你喜欢
  • 1970-01-01
  • 2021-11-07
  • 2019-07-30
  • 1970-01-01
  • 1970-01-01
  • 2022-12-13
  • 2023-02-18
  • 2013-01-20
  • 2018-09-07
相关资源
最近更新 更多