首页
学习
活动
专区
工具
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.6K30

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.5K31

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

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

1.9K20

你知道吗,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.4K00

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

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

66640

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.4K10

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

2.2K20

Flutter』常用组件 按钮、图片

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

34831

电脑图标变成空白图标怎么改回来_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

53810

Flutter 修改应用名称、图标、启动页

虽然flutter可以同时运行在android和ios设备上,但是修改名称、logo、启动页还是需要分开配置的。... 修改应用图标 android 在项目下找到android目录,依次app》src》main》res,然后会有一组mipmap开头的目录,即不同目录存放不同的图标大小,把我们不同大小的图标分别放在对应的目录中...打开AndroidManifest.xml文件,找到application节点,修改icon参数即可 <application android:name="io.<em>flutter</em>.app.FlutterApplication...mipmap-xxxhdpi - 192*192 ios 在项目下找到ios目录,依次Runner》Assets.xcassets》AppIcon.appiconset,然后会有一组后缀为1x、2x、3x的<em>图标</em>...info" : { "version" : 1, "author" : "xcode" } } github https://github.com/yechaoa/wanandroid_flutter

1.7K10
领券