Flutter DropdownButton简单使用及魔改源码

本文介绍了Flutter中的DropdownButton组件,包括其简单使用方法和构造函数的参数解析。通过修改源码,展示了如何实现点击弹出列表在下方的效果,强调了Flutter源码的可定制性,并预告了接下来的源码分析系列文章。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们一般在写业务的时候多会用到下拉菜单,

前面讲过 ExpansionPanel, ExpansionPanel大部分情况用来实现展开列表等稍微复杂的业务逻辑。

而 DropdownButton 则是用来实现稍微简单一点的 点击选择 业务场景。

简单上手

按照惯例我们查看一下官方文档上的说明:

A material design button for selecting from a list of items.

用于从 item 列表中进行选择的 material 按钮。

说明的下方就是一大段的 demo,我们先来看一下效果:

640?wx_fmt=gif

没错,不要怀疑,One, Two, Free, Four,这就是官方 demo 上写的。

代码如下:

 
 
String dropdownValue = 'One';	
	
// ...	
	
Widget build(BuildContext context) {	
  return Scaffold(	
    body: Center(	
      child: DropdownButton<String>(	
        value: dropdownValue,	
        onChanged: (String newValue) {	
          setState(() {	
            dropdownValue = newValue;	
          });	
        },	
        items: <String>['One', 'Two', 'Free', 'Four']	
          .map<DropdownMenuItem<String>>((String value) {	
            return DropdownMenuItem<String>(	
              value: value,	
              child: Text(value),	
            );	
          })	
          .toList(),	
      ),	
    ),	
  );	
}

这样就简单的实现了上图的效果,现在先来看一下他的构造函数。

构造函数

构造函数代码如下:

 
 
DropdownButton({	
  Key key,	
  @required this.items,	
  this.value,	
  this.hint,	
  this.disabledHint,	
  @required this.onChanged,	
  this.ele
### 如何在 Flutter使用 `DropdownButton2` 示例 为了创建一个带有自定义样式的下拉菜单,在 Flutter 应用程序中可以采用 `dropdown_button2` 这一插件[^2]。 #### 导入依赖项 首先,需确保项目中的 pubspec.yaml 文件已添加了对 `dropdown_button2` 插件的支持。接着执行命令来安装新的依赖关系: ```yaml dependencies: flutter: sdk: flutter dropdown_button2: ^0.3.0 # 版本号可能有所不同,请查阅最新文档获取确切版本 ``` #### 创建 DropdownButton2 小部件 下面是一个简单的例子展示如何构建并配置 `DropdownButton2`: ```dart import 'package:flutter/material.dart'; import 'package:dropdown_button2/dropdown_button2.dart'; class CustomDropDown extends StatefulWidget { @override _CustomDropDownState createState() => _CustomDropDownState(); } class _CustomDropDownState extends State<CustomDropDown> { String? selectedValue; List<String> items = ['Item1', 'Item2', 'Item3']; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Dropdown Button Example')), body: Center( child: DropdownButtonFormField2( decoration: InputDecoration( isDense: true, contentPadding: EdgeInsets.zero, border: OutlineInputBorder(), ), hint: const Text('Select Item'), icon: Icon(Icons.arrow_drop_down), buttonHeight: 40, itemHeight: 40, onChanged: (value){ setState(() { selectedValue=value; }); }, onSaved: (newValue) {}, value: selectedValue, items: items.map((item) => DropdownMenuItem<String>( value: item, child: Text(item, style: TextStyle(fontSize: 14),), ) ).toList(), ), ), ); } } ``` 此代码片段展示了如何通过设置不同的属性来自定义外观以及行为方式,比如变提示文字、图标样式等参数。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值