从下拉列表中选择并在颤动中同时更新相同的列表

Posted

技术标签:

【中文标题】从下拉列表中选择并在颤动中同时更新相同的列表【英文标题】:Selecting from a dropdown list and updating the same list the same time in flutter 【发布时间】:2021-11-23 11:17:56 【问题描述】:

如何通过隐藏最初选择的问题而不出现在第二个下拉按钮中来确保用户不会两次选择相同的安全问题,反之亦然?我正在向相同的 api 提出问题的请求。 用一些代码 sn-ps 更新了问题。谢谢

                     Container(
                      height: 60,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.black, 
                      width: 1),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: DropdownButtonHideUnderline(
                        child: DropdownButton(
                          hint: Padding(
                            padding: const EdgeInsets.only(left: 
                            20.0),
                            child: Text(
                              "Security Question Two",
                              style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 16,
                                  letterSpacing: 0.3,
                                  fontWeight: FontWeight.w300),
                            ),
                          ),
                          itemHeight: 100,
                          isExpanded: true,
                          value: dropDownSecurityQuestionTwo,
                          icon: Padding(
                            padding: const EdgeInsets.only(right: 
                         10.0),
                            child: 
                         Icon(Icons.keyboard_arrow_down_outlined),
                          ),
                          iconEnabledColor: Colors.black,
                          iconSize: 30,
                          style: TextStyle(
                            color: Colors.black,
                          ),
                          items: questions.map((value) 
                            return DropdownMenuItem(
                              value: value['ID'].toString(),
                              child: Padding(
                                padding: const EdgeInsets.only(left: 
                                  20.0),
                                child: Text(
                                  value['question'].toString(),
                                ),
                              ),
                            );
                          ).toList(),
                          onChanged: (newValue) async 
                            setState(() 
                              dropDownSecurityQuestionTwo = 
                              newValue.toString();
                              print(dropDownSecurityQuestionTwo);
                              checkSelectedQuestion();
                            );
                          ,
                        ),
                      ),
                    ),

               void checkSelectedQuestion()
               List newQuestions = [];
               for(int i = 0; i<questions.length; i++)
               print(questions[i]['ID']);
               questions.removeWhere((value) => value['ID'] == 
              int.parse(dropDownSecurityQuestionOne!) );
              newQuestions.add(questions);
                  setState(() 
                  questions = newQuestions ;
                      );

                                                                                  

【问题讨论】:

你能提供你的代码sn-p吗? 是的,当然,做到了 【参考方案1】:

您可以将where 过滤器添加到items 到每个DropDownButton 的映射中,具体取决于另一个DropDownButton 的选定值。作为setState 的结果,如果在另一个DropDownButton 中选择了任何内容,则将重新创建项目。

注意:这很容易实现,但效率不高。每次都会创建和过滤项目。它适用于少量项目,但如果您想对许多项目执行类似的操作,您可能需要一种更有效的方法。例如保留两个项目列表,并且只添加/删除受影响的项目。

检查此代码并将其应用于您的案例:

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);
  @override
  Widget build(BuildContext context) 
    return const MaterialApp(
      home: MyPage(),
    );
  


class MyPage extends StatefulWidget 
  const MyPage(Key? key) : super(key: key);
  @override
  State<MyPage> createState() => _MyPageState();


class _MyPageState extends State<MyPage> 
  String? _selected1;
  String? _selected2;
  final List<String> _set = ['Alpha', 'Bravo', 'Charlie'];
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(children: [
            DropdownButton<String>(
                value: _selected1,
                onChanged: (String? newValue) 
                  setState(() 
                    _selected1 = newValue!;
                  );
                ,
                items: _set
                    .map((value) 
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      );
                    )
                    .where((e) => _selected2 == null || e.value != _selected2)
                    .toList()),
            DropdownButton<String>(
                value: _selected2,
                onChanged: (String? newValue) 
                  setState(() 
                    _selected2 = newValue!;
                  );
                ,
                items: _set
                    .map((String value) 
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      );
                    )
                    .where((e) => _selected1 == null || e.value != _selected1)
                    .toList()),
          ]),
        ),
      ),
    );
  


【讨论】:

过滤器在哪里发挥了魔力,就像魅力一样......非常感谢

以上是关于从下拉列表中选择并在颤动中同时更新相同的列表的主要内容,如果未能解决你的问题,请参考以下文章

下拉列表不会根据范围值angularjs进行更新

通过在下拉列表中选择数据库列调用 jsp 进行自动建议搜索框

想要同时更改具有相同值的两个下拉列表

如何在数据来自 API 的颤动中创建下拉列表?

基于下拉列表中选项的选择动态更新表格的Angularjs代码

如何在页面加载时隐藏所有表单字段并在从下拉列表中选择时启用