flutter实现下拉框功能——DropdownButtonFormField

问题背景

客户端日常开发和学习过程，下拉框是一个很常见的组件，本文主要介绍flutter中实现下拉框的一个方案，基于DropdownButtonFormField来进行实现。

问题分析

DropdownButtonFormField 是一个组合控件，将[DropdownButton]包装在[FormField]中，用法如下：

1.  
   var _value='语文';
2.  
    
3.  
   @override
4.  
   Widget build(BuildContext context) {
5.  
   return DropdownButtonFormField(
6.  
   value: _value,
7.  
   items: [
8.  
   DropdownMenuItem(
9.  
   child: Text('语文'),
10.  
    value: '语文',
11.  
    ),
12.  
    DropdownMenuItem(child: Text('数学'), value: '数学'),
13.  
    DropdownMenuItem(child: Text('英语'), value: '英语'),
14.  
    ],
15.  
    onChanged: (String value){
16.  
    setState(() {
17.  
    _value = value;
18.  
    });
19.  
    },
20.  
    );
21.  
    }

问题解决

话不多说，直接上代码，实现下拉框的完整代码如下：

1.  
   import 'package:flutter/material.dart';
2.  
    
3.  
   class Test extends StatefulWidget {
4.  
   _TestState createState() => _TestState();
5.  
   }
6.  
    
7.  
   class _TestState extends State<Test> {
8.  
   String currentSex = '男';
9.  
   @override
10.  
    Widget build(BuildContext context) {
11.  
    const SEX = ['男', '女', '保密'];
12.  
    return Scaffold(
13.  
    appBar: AppBar(
14.  
    // Here we take the value from the MyHomePage object that was created by
15.  
    // the App.build method, and use it to set our appbar title.
16.  
    title: Text("下拉框测试"),
17.  
    ),
18.  
    body: Container(
19.  
    padding: const EdgeInsets.only(top: 10, right: 20, left: 20),
20.  
    child: Row (
21.  
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
22.  
    crossAxisAlignment: CrossAxisAlignment.center,
23.  
    children: [
24.  
    Text("性别"),
25.  
    SizedBox(
26.  
    width:60.0,
27.  
    height: 30.0,
28.  
    child: DropdownButtonFormField<String>(
29.  
    isExpanded: true,
30.  
    iconSize: 20,
31.  
    style: TextStyle(fontSize:15, color: Colors.black),
32.  
    decoration: const InputDecoration(
33.  
    contentPadding: EdgeInsets.only(left: 5, right: 5),
34.  
    border: OutlineInputBorder(gapPadding: 1), labelText: ''),
35.  
    // 设置默认值
36.  
    value: currentSex,
37.  
    // 选择回调
38.  
    onChanged: (String? newPosition) {
39.  
    setState(() {
40.  
    currentSex = newPosition!;
41.  
    print("currentSex: " currentSex);
42.  
    });
43.  
    },
44.  
    // 传入可选的数组
45.  
    items: SEX.map((String sex) {
46.  
    return DropdownMenuItem(value: sex, child: Text(sex));
47.  
    }).toList(),
48.  
    )),
49.  
    ],
50.  
    )),
51.  
    );
52.  
    }
53.  
    }

运行结果如下所示：

问题总结

，本文主要介绍flutter中实现下拉框的一个方案，基于DropdownButtonFormField来进行实现，该方案实现起来较为简单，有兴趣的同学可以进一步深入研究。