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

如何以编程方式清除Flutter DropdownButton?

为了在Flutter中以编程方式清除DropdownButton,您需要了解其内部状态

下面是如何实现它的步骤:

  1. 首先,在DropdownButton的StatefulWidget中创建一个 GlobalKey 和一个对应的 SelectedItem。
代码语言:javascript
复制
class MyDropdown extends StatefulWidget {
  @override
  _MyDropdownState createState() => _MyDropdownState();
}

class _MyDropdownState extends State<MyDropdown> {
  GlobalKey<_MyDropdownState> _dropdownKey = GlobalKey();
  String _selectedItem;

  @override
  Widget build(BuildContext context) {
    // ... 
  }
}
  1. 接下来,在DropdownButton的ValueChanged回调中更新_selectedItem。
代码语言:javascript
复制
String _selectedItem;

void _onSelectChanged(String newValue) {
  setState(() {
    _selectedItem = newValue;
  });
}
  1. 然后,在build方法中创建DropdownButton,并将_key和_onSelectChanged回调传给它。
代码语言:javascript
复制
@override
Widget build(BuildContext context) {
  return DropdownButton<String>(
    key: _dropdownKey,
    value: _selectedItem,
    onChanged: _onSelectChanged,
    items: [
      DropdownMenuItem(value: 'Item 1', child: Text('Item 1')),
      DropdownMenuItem(value: 'Item 2', child: Text('Item 2')),
      DropdownMenuItem(value: 'Item 3', child: Text('Item 3')),
    ],
  );
}
  1. 最后,创建一个方法来清空DropdownButton。这个方法需要获取DropdownButton的GlobalKey,然后调用setState来触发UI重建。
代码语言:javascript
复制
void clearDropdown() {
  setState(() {
    _selectedItem = null;
  });
}

现在,每当你调用clearDropdown()方法时,DropdownButton的值将被清空并触发UI重建。

以下是完整示例代码:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('DropdownButton Example')),
        body: MyDropdown(),
      ),
    );
  }
}

class MyDropdown extends StatefulWidget {
  @override
  _MyDropdownState createState() => _MyDropdownState();
}

class _MyDropdownState extends State<MyDropdown> {
  GlobalKey<_MyDropdownState> _dropdownKey = GlobalKey();
  String _selectedItem;

  void _onSelectChanged(String newValue) {
    setState(() {
      _selectedItem = newValue;
    });
  }

  void clearDropdown() {
    setState(() {
      _selectedItem = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DropdownButton<String>(
          key: _dropdownKey,
          value: _selectedItem,
          onChanged: _onSelectChanged,
          items: [
            DropdownMenuItem(value: 'Item 1', child: Text('Item 1')),
            DropdownMenuItem(value: 'Item 2', child: Text('Item 2')),
            DropdownMenuItem(value: 'Item 3', child: Text('Item 3')),
          ],
        ),
        ElevatedButton(
          onPressed: clearDropdown,
          child: Text('Clear Dropdown'),
        ),
      ],
    );
  }
}

现在,当你点击"Clear Dropdown"按钮时,DropdownButton的值将被清空。

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

相关·内容

  • dart:失之东隅收之桑榆

    一个月前,如果我要为自己最看不上的三个半语言排个名,dart 恐怕会位列其中。dart 是 google 在 2011 年就推出的编程语言,目标是成为一个结构化的 web 编程语言,暗藏着取代人们天天用又天天骂的 javascript 的野心。记得大约 2014 年前后,我在 youtube 上看了 goto conference 的一个关于 dart 语言的 keynote[1],于是就对 dart 有些关注了。当时我的感觉是:这特么又一个「编译成 js」的语言 —— 天知道我们需要多少这样的语言。2014 年前后的前端生态还没有今天这么百花齐放 —— 如今一个编程语言没有对应的「编译成 js」的方案,就像没有化妆的女孩儿,都不好意思出门。那个时代 TypeScript 还没有什么人用,「编译成 js」语言里最火的是 CoffeeScript,以及叫好不叫座的 Elm。当然,google 推出 dart 更多的是从工程实践上的考量:在此之前,google 已经从其 GWT(Google Web Toolkit)和 Closure compier(用于优化 js,清除死代码)中得到了一个宝贵的经验:如果有静态类型系统,javascript 的性能优化和大项目工程化可以大大提升一个台阶。

    01
    领券