首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在DropdownButton中更改Flutter DropdownMenuItem的宽度/填充?

在Flutter中,可以通过自定义DropdownButton的下拉菜单项来更改DropdownMenuItem的宽度和填充。下面是一种实现方式:

  1. 首先,创建一个自定义的DropdownButtonFormField组件,该组件继承自StatefulWidget。
代码语言:txt
复制
class CustomDropdownButtonFormField<T> extends StatefulWidget {
  final List<DropdownMenuItem<T>> items;
  final T value;
  final ValueChanged<T> onChanged;

  CustomDropdownButtonFormField({
    @required this.items,
    @required this.value,
    @required this.onChanged,
  });

  @override
  _CustomDropdownButtonFormFieldState<T> createState() =>
      _CustomDropdownButtonFormFieldState<T>();
}
  1. 在_CustomDropdownButtonFormFieldState类中,重写build方法,并使用DropdownButtonFormField来构建下拉菜单。
代码语言:txt
复制
class _CustomDropdownButtonFormFieldState<T>
    extends State<CustomDropdownButtonFormField<T>> {
  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<T>(
      value: widget.value,
      items: widget.items,
      onChanged: widget.onChanged,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.zero, // 取消默认的内边距
      ),
      selectedItemBuilder: (BuildContext context) {
        return widget.items.map<Widget>((DropdownMenuItem<T> item) {
          return Container(
            width: 200, // 设置宽度
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), // 设置填充
            child: Text(item.value.toString()),
          );
        }).toList();
      },
    );
  }
}

在上述代码中,我们通过设置selectedItemBuilder来自定义下拉菜单项的宽度和填充。在这个例子中,我们将宽度设置为200,并设置了水平和垂直方向的填充。

  1. 使用自定义的CustomDropdownButtonFormField组件。
代码语言:txt
复制
List<DropdownMenuItem<String>> dropdownItems = [
  DropdownMenuItem(
    value: 'Option 1',
    child: Text('Option 1'),
  ),
  DropdownMenuItem(
    value: 'Option 2',
    child: Text('Option 2'),
  ),
  DropdownMenuItem(
    value: 'Option 3',
    child: Text('Option 3'),
  ),
];

String dropdownValue = 'Option 1';

CustomDropdownButtonFormField<String>(
  items: dropdownItems,
  value: dropdownValue,
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
);

在上述代码中,我们创建了一个包含三个下拉菜单项的列表,并将初始值设置为'Option 1'。然后,我们使用CustomDropdownButtonFormField组件来构建下拉菜单,并在onChanged回调中更新选中的值。

这样,你就可以通过自定义DropdownButtonFormField组件来更改Flutter DropdownMenuItem的宽度和填充了。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙解决方案:https://cloud.tencent.com/solution/metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 专题】74 图解基本 DropdownButton 下拉选项框按钮

和尚对于 Flutter 并不系统,总是遇到问题才会准备尝试,今天和尚准备学习一下下拉选择框;Android 提供了便利 Spinner 而 Flutter 对应DropdownButton...DropdownMenuItem 类型列表; DropdownButton(items: null, onChanged: null); DropdownButton(items: [ DropdownMenuItem...isExpanded 用于是否填充按钮宽度到父控件,true 为填充,false 为默认不填充; // 源码 if (widget.isExpanded) Expanded(child: innerItemsWidget...对于 DropdownButton 选中回调,其中 items value 是必须参数,且不相同;回调返回内容是 DropdownMenuItem child 内容; DropdownButton...---- DropdownButton 案例源码 ---- 和尚对 DropdownButton 尝试仅限于基本属性应用,对于使用 PopupRoute 浮层展示 DropdownMenuItem

7.7K31
  • 你知道吗,Flutter内置了10多种Button控件

    版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们开发速度...value: _dropValue, items: [ DropdownMenuItem(child: Text('语文'),value: '语文',), DropdownMenuItem...效果如下: [strip] 如果你对选中选项样式不满意,可以自定义,用法如下: DropdownButton( selectedItemBuilder: (context){ return...value: null, ... ) 效果如下: [1240] 默认情况下,下拉选项图标是倒立三角,也可以进行自定义,用法如下: DropdownButton( icon: Icon(Icons.add...、宽度、颜色等: ToggleButtons( borderRadius: BorderRadius.circular(30), borderColor: Colors.orange

    2.5K00

    Flutter DropdownButton简单使用及魔改源码

    DropdownButton 则是用来实现稍微简单一点 点击选择 业务场景。...刚才在上面的图也看到了,每次点击更改后,下次展开就会以上次点击 index 作为关键点来展开。 那对于这种需求,我们只能 魔改源码。 俗话说得好: 魔改一时爽,一直魔改一直爽。...传入了一个 selectedIndex,那我们就可以想象到,这肯定就是问题根源。...Flutter 源码真的是给与我们极大方便,每一种控件都在一个文件内,我们直接复制出来就可以改。 最后再说一句:魔改一时爽,一直魔改一直爽。...后续会推出一系列源码分析文章,下一篇就是分析 DropdownButton ,敬请关注。

    4.4K70

    Flutter lesson 6: Flutter组件之基础组件(二)

    取值的话也是前端对其方式几种取值 start end center spaceBetween spaceAround spaceEvenly 唯一不同是,在Flutter中新增加了一个spaceEvenly...,并不是图片宽度,默认图片宽度 this.height, // 用来指定显示图片区域高,并不是图片高度,默认图片高度 this.color, // 图片颜色,这个可以直接修改图片颜色...设置图片颜色,会覆盖图片原有的颜色,像是前端字体图标,可以指定颜色。...fit 图片如何在Image控件显示,有以下几个值可选 enum BoxFit { fill, // 填充整个容器,宽高都不超出容器 contain, // 按宽高中最小那个来放大...cover, // 按宽高中最大那个来放大 fitWidth, // 按照width放大 fitHeight, // 按照高度方法 none, // 不填充 scaleDown,

    2.2K20

    flutter给图片加个好看遮罩层【flutter20个实例之六】

    一、老套路,先看样式 左起图一是我业务样式,左起图二、三是下方源码展示样式(复制可直接运行,无额外组件引入) ? ? ?...这里是一个stack,通过两个组件堆叠实现,外层要设一个颜色透明度 属性要设置自动撑满,这样组件遮罩层才会自动撑满父组件宽度 fit: StackFit.expand 然后要设置一个颜色透明度 decoration...: BoxDecoration(color: Color(0x72000000)), 以下是flutter所有颜色透明 比如完全不透明:0xFF000000 需要将第3第4两个字母,替换为下方列表右侧两个字符即可...); } Widget selectYear(context1, state) { return DropdownButtonHideUnderline( child: DropdownButton...( iconSize: 20.0, //设置三角标icon大小 value: _dropValue, items: [ DropdownMenuItem

    4.2K30

    重走Flutter状态管理之路—Riverpod进阶篇

    这篇文章,我们将真正深入了解,如何在不同场景下,选择合适种类Provider,以及这些不同类型Provider,都有哪些作用。...它存在于flutter_riverpod包,以提供一个简单从package:provider迁移组件,并允许一些flutter特定使用情况,如与一些Navigator 2包集成。...StateProvider在现实世界一个使用案例是管理简单表单组件状态,dropdown/text fields/checkboxes。...更新状态简化 参考下面的这个场景,有时候,我们需要根据前一个状态值,来修改后续状态值,例如Flutter Demo加数器。...ChangeNotifierProvider是一个用来管理FlutterChangeNotifierProvider。

    3.8K11

    Flutter构建布局 顶

    将第一行文本放入Container可以添加填充。 列第二个子项(也是文本)显示为灰色。 标题行最后两项是一个红色星形图标和文字“41”。 将整行放在容器,并沿着每个边缘填充32像素。...将文本放入容器,以便沿每条边添加32像素填充。 softwrap属性指示文本是否应在软换行符(句点或逗号)上断开。...如果您愿意,可以构建仅使用小部件库标准小部件应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单小部件并将其显示在屏幕上。...Container 许多布局会自由使用Container来使用填充分隔小部件,或者添加边框或边距。 您可以通过将整个布局放入Container并更改其背景颜色或图像来更改设备背景。...在Flutter,一张卡片具有稍微圆润角落和阴影,使其具有3D效果。 更改卡片elevation属性可让您控制投影效果。

    43.1K10

    Flutter』常用组件 按钮、图片

    2.常用组件 在Flutter,有多种按钮组件可以用于创建交互式界面。主要按钮组件包括: ElevatedButton:这是一个凸起按钮,常用于主要操作。...FloatingActionButton:这是一个圆形按钮,通常悬浮在内容上方,用于促进应用主要动作,添加、编辑等。...MaterialButton:这是一个更通用按钮组件,可以高度自定义,包括形状、颜色、阴影等。 DropdownButton:这是一个下拉按钮,允许用户从一系列项中选择一个。...这对于一些图标(箭头)非常重要,其方向可能会因语言阅读方向(从左到右或从右到左)而改变。...width (double): 图片宽度。如果不设置,图片会根据其父组件和其他内容自动调整大小。 height (double): 图片高度。同样,如果不设置,会自动调整。

    50331

    Flutter 源码系列:DropdownButton 源码浅析

    DropdownButton 构造函数及简单使用 其实关于 DropdownButton 构造函数和简单使用我在上一篇文章已经有过讲解, 如有不懂怎么用,可以看这篇文章:Flutter DropdownButton...下面重点说一下 DropdownButton 是如何实现DropdownButton 实现 我们需要带着如下几个问题去看源码: 1.DropdownButton 是用什么来实现?...2.在点击 DropdownButton 时候发生了什么?3.为什么每次弹出位置都是我上次选择item位置? 带着如上问题,我们开始。 DropdownButton 是用什么实现?...我们在上一篇文章已经了解到,DropdownButton 是一个 statefulWidget,那我们想要了解他是如何实现,就直接跳转到他 _DropdownButtonState 类。...而且 innerItemsWidget 判断了是否是展开状态,如果是展开状态则套一个 Expanded 来水平填充父级。 ?

    1.7K30

    Flutter 卡片选择器

    **我们将看到如何在flutter应用程序中使用card_selector包来实现带有动画和堆叠卡的卡选择器演示程序。...选择器是完全可配置,动画时间,卡之间间隙,堆叠卡尺寸因子。用户可以从左向右或从右向左滑动卡。特定卡上信息将有所不同。 该演示视频展示了如何在颤动创建卡选择器。...**lastCardSizeFactor:**与第一个元素相比,此属性用于呈现最后一个元素因子。 **mainCardWidth:**此属性用于列表第一个元素宽度。...**onChanged:**此属性用于在卡更改后执行回调。 **mainCardPadding:**此属性用于左填充列表第一个元素。 实现 将依赖项添加到pubspec-yaml文件。...另外,我们将添加mainCardWidth表示列表第一个元素宽度,mainCardHeight表示列表第一个元素高度,onChanged表示要在更改后的卡片上执行回调。

    7.4K20

    Flutter | 思路解析 WPopupMenu 仿微信聊天长按弹出菜单

    child 长度大于 menu 长度,那么则把 menu 放在中间2.如果 child 长度小于 menu 长度,三角形位置在 child 中间 不多说,上图: ?...在当前页面弹出 首先迎面来就是第一个难题,如何在当前页面弹出?...这就涉及到我前面所讲几篇文章: Flutter | 超实用简单菜单弹出框 PopupMenuButton Flutter 源码系列:DropdownButton 源码浅析 这几个控件源码里都有一个类...看到没,这就是阅读源码益处! 既然是一个 Route,那么也可以通过他来返回值,一举两得。 了解了如何在当前页面弹出页面,那就可以自定义样式了。...剩下就是 ListView 和箭头组合,我使用了 Row 来组合这些组件,因为箭头和 ListView item 宽度不一样,并且如果都使用 ListView,那么下标的计算也很烦人。

    4.9K31

    6详解AppBar小部件

    由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 在本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...以下是我们将介绍内容: Flutter AppBar 是什么? 应用栏布局 自定义 AppBar Flutter AppBar 是什么?...工具栏包含文字,图标,按钮,和其他任何公司前景,除了小部件,Container和Image。...如果你已经做到了这一步,你现在应该明白: AppBar 是什么以及它如何在 Flutter 中使用 AppBar 布局 ( leading, title, 和actions) 如何自定义 AppBar...关于 Flutter AppBar 必须提供所有内容完整演练。我希望这篇文章能帮助你在未来所有的 Flutter 应用程序创建漂亮 AppBars。

    16.4K10

    2024年最值得尝试5个CSS框架

    丰富预制组件:Bootstrap 提供了大量预制组件,导航栏、卡片、模态框等,使得开发者可以轻松实现复杂UI设计。...工具优先”设计理念,在前端开发社区引起了广泛关注。...JIT(即时编译)模式:Tailwind JIT 模式使得开发过程样式更改能够即时反映,进一步提升开发效率。...它与其他 UI 框架不同之处在于,Bulma 是基于 Flexbox 构建,Flexbox 是一种 CSS 布局模型,能够根据容器宽度调整页面元素宽度,这使得创建网格等任务变得非常简单,并且是框架轻量化原因之一...组件化:导航栏、模态框、标签页等,Bulma 提供了丰富组件库,方便开发者快速实现常见 UI 功能。

    76810

    【愚公系列】2023年11月 Winform控件专题 MenuStrip控件详解

    对于MenuStrip控件事件处理,可以通过在设计器双击相应子控件来添加事件处理方法,或者在代码中使用事件处理程序来处理相应事件。...,AllowItemReorder和AllowMerge属性只有在MenuStrip控件父容器为Form时有效,对于其他容器控件(Panel等),这两个属性不起作用。...GripMargin属性是用来设置MenuStrip控件边界宽度,默认为2个像素。可以通过设置GripMargin属性来改变MenuStrip控件边界宽度,从而使其更加美观。...当Stretch属性为false时,菜单栏宽度与父容器相同,不会进行拉伸。...我们首先在窗体构造函数调用了InitializeMenu方法,该方法负责动态创建菜单项并添加到MenuStrip

    51211

    Flutter 实现刮刮卡效果

    在这个博客,我们将探讨 Flutter 刮刮卡 效果。我们将了解如何在flutter应用程序中使用scratcher包实现刮板卡。...目录 刮刮卡 属性 引入 如何在dart文件实现代码 代码文件 结论 刮刮卡 刮刮卡是您在不同购物应用程序和支付应用程序上可以看到著名事物之一。这些刮刮卡用于为用户提供奖品和现金返还。...它可以具有广泛使用案例;但是,它基本上用于为应用程序用户创建随机奖品。 该演示视频演示了如何在Flutter创建刮刮卡。它显示了刮卡将如何工作使用scratcher在Flutter应用程序包。...在子属性,添加一个**AnimatedOpacity(),**我们将添加一个duration,opacity和child属性,以添加具有高度和宽度conatiner。...运行应用程序时,我们应该获得屏幕输出,屏幕下方捕获。

    5.3K20

    Flutter】自定义滚动开关

    工作就像房子电源开关。 本文中,我们将探讨Flutter **Custom Rolling Switch in Flutter。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。...它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行切换交互,该开关将滚动到具有动画效果另一侧,并且在滚动该开关时将更改图标和文本。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

    33.4K60

    Flutter布局指南之深入理解BoxConstraints

    因此,在这篇文章,让我们试着了解约束条件是如何工作,以及对Widget尺寸影响。 那么,Flutter约束究竟是什么?...Flutter约束是对一个Widget宽度和高度简单限制 这些限制是通过BoxConstraints对象指定。...所以在这种情况下,当我们通过保持其minWidth、maxWidth等于目标填充宽度,保持其minHeight、maxHeight等于目标填充高度来强制一个Widget填充一个特定尺寸时,我们说我们已经对该...因此,现在任何应用了这些约束Widget都将被强制填充到size.width和size.height精确尺寸。...好吧,首先,你应该知道在不同条件下,Tight约束、Loose约束、Unbounded约束、它有一个孩子或它没有更多孩子或有多个孩子,特定Widget会选择上述三个选择哪一个。

    2.1K20
    领券