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

flutter DropDownButton移除箭头图标?

在Flutter中,可以通过自定义样式来移除DropDownButton的箭头图标。以下是一种常见的方法:

  1. 创建一个自定义的DropdownButtonFormField组件,该组件继承自FormField类。
  2. 在组件的build方法中,使用DropdownButtonHideUnderline组件来隐藏默认的下拉箭头图标。
  3. 使用DropdownButton组件作为下拉菜单的触发按钮,并设置icon属性为null,以移除箭头图标。
  4. 在DropdownButton的onChanged回调函数中,更新选中的值,并调用setState方法来重新构建界面。

下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class CustomDropdownButtonFormField<T> extends FormField<T> {
  CustomDropdownButtonFormField({
    Key key,
    T value,
    List<DropdownMenuItem<T>> items,
    ValueChanged<T> onChanged,
    InputDecoration decoration = const InputDecoration(),
    FormFieldSetter<T> onSaved,
    FormFieldValidator<T> validator,
  }) : super(
          key: key,
          initialValue: value,
          onSaved: onSaved,
          validator: validator,
          builder: (FormFieldState<T> state) {
            return InputDecorator(
              decoration: decoration.copyWith(
                errorText: state.hasError ? state.errorText : null,
              ),
              child: DropdownButtonHideUnderline(
                child: DropdownButton<T>(
                  value: value,
                  items: items,
                  onChanged: onChanged,
                  icon: null,
                ),
              ),
            );
          },
        );
}

// 使用示例
class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  String dropdownValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Form(
          child: CustomDropdownButtonFormField<String>(
            value: dropdownValue,
            items: [
              DropdownMenuItem(
                value: 'Option 1',
                child: Text('Option 1'),
              ),
              DropdownMenuItem(
                value: 'Option 2',
                child: Text('Option 2'),
              ),
              DropdownMenuItem(
                value: 'Option 3',
                child: Text('Option 3'),
              ),
            ],
            onChanged: (value) {
              setState(() {
                dropdownValue = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

在上述示例中,我们创建了一个CustomDropdownButtonFormField组件,它继承自FormField类,并在build方法中使用InputDecorator和DropdownButtonHideUnderline来隐藏默认的下拉箭头图标。然后,我们使用DropdownButton作为下拉菜单的触发按钮,并将icon属性设置为null,以移除箭头图标。在onChanged回调函数中,我们更新选中的值,并调用setState方法来重新构建界面。

这是一个基本的示例,你可以根据自己的需求进行修改和扩展。关于Flutter的更多信息和相关产品,你可以参考腾讯云的官方文档:腾讯云Flutter开发

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 源码系列:DropdownButton 源码浅析

DropdownButton 构造函数及简单使用 其实关于 DropdownButton 的构造函数和简单使用我在上一篇文章中已经有过讲解, 如有不懂怎么用的,可以看这篇文章:Flutter DropdownButton...下面重点说一下 DropdownButton 是如何实现的。 DropdownButton 的实现 我们需要带着如下几个问题去看源码: 1.DropdownButton 是用什么来实现的?...2.在点击 DropdownButton 的时候发生了什么?3.为什么每次弹出的位置都是我上次选择item的位置? 带着如上问题,我们开始。 DropdownButton 是用什么实现的?...其中 One 就是 innerItemsWidget ,箭头就是 Icon。 而且 innerItemsWidget 判断了是否是展开状态,如果是展开状态则套一个 Expanded 来水平填充父级。...那看到这我们也就明白了,其实 DropdownButton 就是一个 IndexedStack。 那这样来说,主要的逻辑应该在点击事件里。 在点击 DropdownButton 的时候发生了什么?

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

    和尚对于 Flutter 并不系统,总是遇到问题才会准备尝试,今天和尚准备学习一下下拉选择框;Android 提供了便利的 Spinner 而 Flutter 对应的是 DropdownButton...this.iconDisabledColor, // 禁用状态下图标颜色 this.iconEnabledColor, // 启动时图标颜色 this.iconSize...icon 为下拉按钮右侧图标,iconSize 为下拉按钮图标尺寸,禁用和启动状态下均可设置;若 icon 设置尺寸以 icon 尺寸为准; icon: Icon(Icons.arrow_right),...对于 DropdownButton 选中回调,其中 items 中 value 是必须参数,且不相同;回调返回的内容是 DropdownMenuItem 中 child 内容; DropdownButton...---- DropdownButton 案例源码 ---- 和尚对 DropdownButton 的尝试仅限于基本属性的应用,对于使用 PopupRoute 浮层展示 DropdownMenuItem

    7.7K31

    Flutter 专题】104 图解自定义 ACEDropdownButton 下拉框

    和尚之前尝试过 Flutter 自带的 DropdownButton 下拉框,简单方便;但仅单纯的原生效果不足以满足各类个性化设计;于是和尚以 DropdownButton 为基础,调整部分源码...; 下拉框在展示时不会遮挡 DropdownButton 按钮,默认在按钮顶部或底部展示; 下拉框展示效果调整为默认由上而下; 对于 DropdownButton 整体的功能是非常完整的,包括路由管理...DropdownButton 源码 DropdownButton 源码整合在一个文件中,文件中有很多私有类,不会影响其它组件; 以和尚的理解,整个下拉框包括三个核心组件,分别是 DropdownButton...3. isChecked & iconChecked 下拉框选中状态及图标 和尚想实现在下拉框展示时,突显出选中状态 item,于是在对应 item 位置添加一个 iconChecked 图标...避免遮挡 和尚选择自定义 ACEDropdownButton 下拉框最重要的原因是,Flutter 自带的 DropdownButton 在下拉框展示时会默认遮挡按钮,和尚预期的效果是: 若按钮下部分屏幕空间足够展示所有下拉

    2K20

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

    版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度...DropdownButton为下拉选择按钮,基本用法如下: var _dropValue = '语文'; _buildButton() { return DropdownButton(...( hint: Text('请选择'), value: null, ... ) 效果如下: [1240] 默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下: DropdownButton...PopupMenuButton( child: Text('学科'), ... ) child组件将会被InkWell包裹,点击弹出菜单,效果如下: [1240] 也可以设置其他图标...), borderRadius: BorderRadius.circular(10) ), ... ) 效果如下: [1240] IconButton IconButton是一个图标按钮

    2.5K00

    Flutter 绘制探索 | 箭头端点的设计

    ---- theme: cyanosis 上一篇 《Flutter 绘制探索 | 来一起画箭头吧》 ,实现了一个可以自由拓展的箭头绘制小体系。...线和箭头的旋转已经封装好了,只需要在矩形端点矩形域中提供路径即可。本文我们就来对端点的箭头路径进行拓展,丰富箭头的样式,同时也更方便使用者调用。...这个箭头小系列就是为了打造一个小巧、便捷的箭头绘制库。所以丰富箭头样式是其中主要的一环。 ---- draw.io 是我最喜欢的绘制软件,没有之一,本文就其中的一些常用箭头端点样式进行实现。...就像本文,我只想专注做一件事,就是如何在一块矩形区域内,来创建各种各样的箭头路径。 为了让我们对箭头的生产有那么一点 设计感 ,这里画个如下的辅助路径,对矩形区域进行示意。...对看过 《Flutter 绘制指南 - 妙笔生花》的朋友来说,这些都是小菜一碟: void main() { runApp(const ColoredBox(color: Colors.white,

    72640

    Flutter Icon IconFont(图标控件)

    1、优势 Flutter中,可以像Web开发一样使用iconfont,iconfont即“字体图标”,它是将图标做成字体文件,然后通过指定不同的字符而显示不同的图片。...在Flutter开发中,iconfont和图片相比有如下优势: 1.体积小:可以减小安装包大小。 2.矢量的:iconfont都是矢量图标,放大不会影响其清晰度。...3、 使用字体库图标 Flutter默认包含了一套Material Design的字体图标,在pubspec.yaml文件中的配置如下 (默认配置就有) flutter: uses-material-design...但是,像"uE914"、" uE000"、" uE90D"这样的图标码并不易懂,也不好记。所以,Flutter封装了IconData和Icon来专门显示字体图标。...本文参考:《Flutter中文网》

    3.6K10

    Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

    文章目录 一、加载 Flutter 内置的图标 三、完整代码示例 三、相关资源 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) 一、加载 Flutter 内置的图标 ---- Flutter...中的图标组件 Icon , 专门用于显示图标 ; Flutter 中内置了一些默认图标 , 可以在 https://material.io/resources/icons/ 界面进行查询 ; 使用 Icon...组件加载 Flutter 内置图标时 , 所在的 dart 源码文件中 , 需要导入材料设计包 , import 'package:flutter/material.dart'; 使用 Icon 示例...: Center( // 加载 Flutter 内置图标 child: Icon(Icons.threed_rotation, size: 200,), ), 运行效果 : 三、完整代码示例.../download/han1202012/16073006 ( 本篇博客的源码快照 , 可以找到本博客的源码 ) 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) ---- Flutter

    3K20

    Flutter』常用组件 按钮、图片

    IconButton:这是一个图标按钮,常用于工具栏和对话框中。它可以包含图标而不是文本,适用于空间有限或需要图形化表示的地方。...DropdownButton:这是一个下拉按钮,允许用户从一系列项中选择一个。通常用于表单或需要选择性输入的界面。 PopupMenuButton:这个按钮在用户点击时会显示一个弹出菜单。...常见属性及其作用: icon (IconData): 必需的属性,用于指定要显示的图标。通常从 Icons 类中选择一个图标。 size (double): 图标的大小。默认大小是 24.0。...color (Color): 图标的颜色。 semanticLabel (String): 用于辅助技术的标签。如果图标不仅仅是装饰性的,这个标签可以提供关于图标的更多信息。...textDirection (TextDirection): 图标的文本方向。这对于一些图标(如箭头)非常重要,其方向可能会因语言的阅读方向(从左到右或从右到左)而改变。

    50331

    电脑图标变成空白图标怎么改回来_win7去掉桌面图标箭头

    在桌面添加常用软件快捷图标对我们平时使用程序更加快捷,但在使用过程中难免会遇到一些棘手问题。...近日有用户使用的win7操作系统发现桌面图标变异常,桌面软件图标都变得白色或未知图标(如下图所示),导致无法正常打开软件程序,出现这种现象很有可能是桌面图标缓存出现问题,下面是豆豆整理的各种纠结方法,如果用户也出现此种故障问题的话...这样,Windows7就会自动更新图标缓存,自然也就解决了这个问题,简单吧。...解决方法四: 1、打开腾讯电脑管家—电脑诊所—桌面图标 2、打开之后在里面搜索您的问题 其他图标缓存技巧分享: 在Windows7系统中图标缓存文件的位置是:C:\Users\用户名\AppData...关于桌面图标变成未知白色图标的解决方法大全就介绍到这里,建议使用第四种方法来修复,快速方便,如果问题实在无法解决的话,那么很有可能是系统文件或病毒问题,最好是重装系统,希望对大家遇到的桌面图标显示异常有所帮助

    2.3K20

    win10 uwp 如何给 DropDownButton 一个很小的宽度

    在 UWP 的 Microsoft.UI.Xaml 提供了一个带下箭头的按钮,这就是 DropDownButton 这个按钮继承 Button 按钮,基本表现相同,但是如果给这个按钮一个很小的宽度,将会看不到下箭头图片...原因是如果最小宽度那么下箭头将没有足够空间显示,虽然左边依然有空白地方,但是空白地方有最小宽度要求 解决方法是通过 Padding 属性,让整个按钮的内容移动,让空白地方移动到按钮外,让下箭头移动到可以显示的地方... 上面代码核心就是...Padding="-15,0,0,0" 通过 Padding 可以设置按钮的左上右下各个内容边距的值 现在看起来的效果如下图 更多关于 DropDownButton 请看 DropDownButton...Class - Windows UWP applications 这是在堆栈网小伙伴问的问题,请看 c# - Change the width of DropDownButton in UWP - Stack

    55210
    领券