Flutter 中 DropDownMenu 按钮中的 OnTap 函数

Posted 2023-04-13

【中文标题】Flutter 中 DropDownMenu 按钮中的 OnTap 函数

【英文标题】：OnTap Function in the DropDownMenu Button in Flutter

【发布时间】：2020-11-10 20:23:06

【问题描述】：

我尝试使用 SQLite 数据库中的数据填充下拉菜单按钮。 然后在 onTap 函数上，我想导航到所选类别。

当我点击类别时，它不会导航。

我已经在数据库中保存了每个类别的 ID，用于识别所选项目。 代码如下：

'''

class _HomeState extends State<Home> 

  TodoService _todoService;
  var _selectedValue;

  var _categories = List<DropdownMenuItem>();

  List<Todo>_todoList=List<Todo>();

@override
  initState()
    super.initState();
_loadCategories();

  

_loadCategories() async 
    var _categoryService = CategoryService();
    var categories = await _categoryService.readCategory();
    categories.forEach((category) 
      setState(() 
        _categories.add(DropdownMenuItem(
          child: Text(category['name']),
          value: category['name'],
          onTap: ()=>Navigator.of(context).push(MaterialPageRoute(builder:(context)=>TodosByCategory(category: category['name'],))),
        ));
      );
    );
  

@override
  Widget build(BuildContext context) 
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        actions: <Widget>[
          DropdownButtonHideUnderline(
            child: DropdownButton(
              value: _selectedValue,
              items: _categories,
              dropdownColor: Colors.blue,
              style: TextStyle(color: Colors.white,fontSize: 16.0),
              iconDisabledColor: Colors.white,
              iconEnabledColor: Colors.white,
              onChanged: (value) 
                setState(() 
                  _selectedValue = value;
                );
              ,
            ),
          ),

'''

这里是 todosByCategory():

'''

class _TodosByCategoryState extends State<TodosByCategory> 

  List<Todo>_todoList=List<Todo>();

  TodoService _todoService=TodoService();

  @override
  initState()
    super.initState();
    getTodosByCategories();
  

  getTodosByCategories()async
    var todos=await _todoService.readTodoByCategory(this.widget.category);
    todos.forEach((todo)
      setState(() 
        var model= Todo();
        model.title=todo['title'];
        model.dueDate=todo['dueDate'];

        _todoList.add(model);

      );
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos By Category'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: _todoList.length,
              itemBuilder: (context, index)
              return Padding(
                padding: EdgeInsets.only(top:8.0, left: 8.0, right: 8.0),
                child: Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(0),
                  ),
                  elevation: 8.0,
                  child: ListTile(
                    title: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(_todoList[index].title)
                      ],
                    ),
                    subtitle: Text(_todoList[index].dueDate),
//                    trailing: Text(_todoList[index].dueDate),
                  ),
                ),
              );
            ,),
          )
        ],
      ),
    );
  

''' 请帮帮我。

【问题讨论】：

当您点击一个类别但它没有导航时，您是否在控制台中看到任何错误？如果有，是什么？

不，控制台上没有错误。

【参考方案1】：

您可以将导航代码写入onChanged 或DropdownButton 中，而不是将导航代码写入onTap 中DropdownButton 中，您还将获得类别名称字符串作为value。那么它应该可以工作了。

【讨论】：

-在那里不起作用，因为类别是在 _loadCategories 中定义的

您在onChanged 上获得的value 参数等于您刚刚点击的类别的名称。所以你可以像这样将它传递给下一个屏幕的构造函数TodosByCategory(category: value)

谢谢！它有效，但没有在顶部获得类别名称。