flutter实现下拉框功能——基于DropdownButtonFormField

这篇具有很好参考价值的文章主要介绍了flutter实现下拉框功能——基于DropdownButtonFormField。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题背景

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

问题分析

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

var _value='语文';

@override
Widget build(BuildContext context) {
  return DropdownButtonFormField(
    value: _value,
    items: [
      DropdownMenuItem(
        child: Text('语文'),
        value: '语文',
      ),
      DropdownMenuItem(child: Text('数学'), value: '数学'),
      DropdownMenuItem(child: Text('英语'), value: '英语'),
    ],
    onChanged: (String value){
      setState(() {
        _value = value;
      });
    },
  );
}

问题解决

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

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  String currentSex = '男';
  @override
  Widget build(BuildContext context) {
    const SEX = ['男', '女', '保密'];
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text("下拉框测试"),
      ),
      body: Container(
        padding: const EdgeInsets.only(top: 10, right: 20, left: 20),
        child: Row (
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text("性别"),
            SizedBox(
                width:60.0,
                height: 30.0,
                child: DropdownButtonFormField<String>(
            isExpanded: true,
            iconSize: 20,
            style: TextStyle(fontSize:15, color: Colors.black),
            decoration: const InputDecoration(
                contentPadding: EdgeInsets.only(left: 5, right: 5),
                border: OutlineInputBorder(gapPadding: 1), labelText: ''),
            // 设置默认值
            value: currentSex,
            // 选择回调
            onChanged: (String? newPosition) {
              setState(() {
                currentSex = newPosition!;
                print("currentSex: " + currentSex);
              });
            },
            // 传入可选的数组
            items: SEX.map((String sex) {
              return DropdownMenuItem(value: sex, child: Text(sex));
            }).toList(),
          )),
      ],
        )),
    );
  }
}

运行结果如下所示: flutter 下拉选择框,移动开发,flutter,android

问题总结

,本文主要介绍flutter中实现下拉框的一个方案,基于DropdownButtonFormField来进行实现,该方案实现起来较为简单,有兴趣的同学可以进一步深入研究。文章来源地址https://www.toymoban.com/news/detail-654983.html

到了这里,关于flutter实现下拉框功能——基于DropdownButtonFormField的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】下拉刷新功能实现

    微信小程序开发系列 在开发微信小程序中经常会需要下拉页面进行更新要页面数据的功能,微信小程序提供了onPullDownRefresh函数。该函数作用是监听用户下拉动作。 监听用户下拉刷新事件。 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh: 可以通过wx.startPullD

    2024年02月12日
    浏览(47)
  • 实现微信小程序下拉刷新功能

    方法一:全局设置下拉刷新功能      1、在app.json的\\\"window\\\"中进行配置         (1)把\\\"backgroundTextStyle\\\":“light\\\"改为\\\"backgroundTextStyle”:“dark”         (2)添加\\\"enablePullDownRefresh\\\":true,开启下拉刷新。       2、在app.js中增加两个生命周期函数   方法一:全局设置下拉刷新

    2024年02月13日
    浏览(43)
  • uni-app下拉框 可实现输入下拉框 搜索+选择组合框功能

    插件示例地址

    2024年02月11日
    浏览(52)
  • Vue3 实现下拉选择框多选的功能实现

    项目采用vue3+elmentui-plus +ts 搭建成的。用户界面设计上需要一个带全选的下拉选择框。而element plus 官网 提供的下拉多选框是 这种形式是没有全选按钮的,并且样式也不符合想像中的全选的操作。故开始想法子去结合一个新的条件去封装一个新的组件。 由于用户更加热衷于带

    2024年02月12日
    浏览(37)
  • 实现微信小程序中的下拉刷新功能

    在微信小程序中,可以通过在 scroll-view 组件上添加 enablePullDownRefresh 属性来启用下拉刷新功能。同时需要在页面的 .json 文件中设置 backgroundTextStyle 和 onPullDownRefresh 两个属性。 具体步骤如下: 1.在页面的 .json 文件中添加 enablePullDownRefresh、backgroundTextStyle 和 onPullDownRefresh 三个

    2024年02月12日
    浏览(43)
  • python 实现dcmtk关联pacs功能 推送下拉影像

    1、dcmtk关联pacs的参数介绍 2、dcmtk命令介绍 3、演示工具的功能 4、说明使用的技术 5、遇到的问题 6、工具目前存在的缺点 dcmtk关联pacs的参数介绍:远程pacs说明参数如何添加 需关联的PACS系统信息参数 [被呼叫主机ip] 192.168.10.19 [被呼叫主机pacs系统AE] ebm-pacs [被呼叫主机pacs系统

    2023年04月15日
    浏览(33)
  • vue+el-select下拉实现:全选、反选、清空功能

    问题描述: el-select下拉框要求实现全选功能。具体功能包括: 当选择【全选】时,所有选项全部被勾选; 当选择【反选】时,已选择选项变为未选择选项,未选项变为已选项 当选择【清空】时,所有选项变为未选 如下图: 1、给el-select增加【全选】【清空】【反选】按钮

    2024年02月10日
    浏览(67)
  • vue+antd——table组件实现动态列+表头下拉选择功能——技能提升

    展示行列数据。 当有大量结构化的数据需要展现时; 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。 最近在写 vue+antd 的框架,遇到一个需求:就是要实现 table 表格的动态列,并且相应的表头要实现下拉选择的效果,最后点击保存时,要将下拉的内容拼接

    2024年02月09日
    浏览(55)
  • elementUI之下拉选项加多选框功能实现vue3+ts

    根据 @牛先森家的牛奶 的代码修改后实现 具体参考原博主文章,这里只对部分细节调整,记录一下

    2024年02月17日
    浏览(46)
  • Flutter小功能实现-咖啡店

    效果图:     google_nav_bar: ^5.0.6 使用文档: google_nav_bar | Flutter Package //MyBottomNavBar //HomePage provider 使用文档: provider | Flutter Package Models 数据模型 Coffee 咖啡数据模型:名称、价格、图片 CoffeeShop 咖啡售卖数据模型:coffeeShop 在售咖啡种类,userCart用户购物车 ,addItemToCart添加到

    2024年02月10日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包