向DropDownButton添加单独的值

时间:2020-04-03 17:30:07

标签: flutter dart flutter-layout

我有一个带有项目构建器的小部件。在项目构建器中,我想为每个项目创建下拉菜单。

对于此value的{​​{1}}属性,我使用 DropdownMenuItem

问题是,当我在 itemBuilder 中声明此SaleRef _selectedRef;时,选择一个项目后该值不变。

当我在此小部件外部声明它但在类中它会更改每个下拉列表的值

我该怎么做才能在每个下拉列表中选择单独的值?

这是用于创建项目的代码

SaleRef _selectedRef;

当我这样声明时

ListView.separated(
                itemBuilder: (context, index) {
                  return Row(
                    children: <Widget>[                      
                      Container(
                        height: 40,
                        width: MediaQuery.of(context).size.width * 1 / 5,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: new BorderRadius.circular(25.0),
                          border: Border.all(
                              color: Colors.grey,
                              style: BorderStyle.solid,
                              width: 0.80),
                        ),
                        child: DropdownButton<SaleRef>(
                          hint: Text("  Select Ref"),
                          value: _selectedRef,
                          onChanged: (SaleRef value) {
                            setState(() {
                              _selectedRef = value;
                              print(_selectedRef.refID);
                            });
                          },
                          items: _filteredSaleRef.map((SaleRef ref) {
                            return DropdownMenuItem<SaleRef>(
                              value: ref,
                              child: Row(
                                children: <Widget>[
                                  Text(
                                    "  " + ref.refName,
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ],
                              ),
                            );
                          }).toList(),
                        ),
                      ),
                    ],
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(height: 16);
                },
                itemCount: filteredShopItem.length,
              )

这是在选择值后发生的

enter image description here

当我在构建器中这样声明时

class _AssignRefPageState extends State<AssignRefPage>
    with  {

  SaleRef _selectedRef;

这就是我得到的提示,即使选择一个也总是提示

enter image description here

2 个答案:

答案 0 :(得分:1)

问题是您为每个下拉按钮使用了相同的变量,并且当您尝试在ListView itemBuilder中对其进行声明并调用setState时,将构建整个Widget,并将其再次设置为null

您可以做的是创建一个值列表(大小应为您拥有的下拉按钮的数量)

喜欢

class _AssignRefPageState extends State<AssignRefPage>
    with  {

  List<SaleRef>_selectedRef = List.generate(numberOfDropDowns, (index) => SaleRef());

然后在setState中使用数组

DropdownButton<SaleRef>(
                          hint: Text("  Select Ref"),
                          value: _selectedRef,
                          onChanged: (SaleRef value) {
                            setState(() {
                              _selectedRef[index] = value;
                              print(_selectedRef[index].refID); //<- The index is from itemBuilder
                            });
                          }

答案 1 :(得分:0)

正如@ Josteve-Adekanbi所说,问题出在使用相同的变量

创建一个超出类的大小的数组可以帮助我解决问题

List<SaleRef> _selectedRef = new List(filteredShopItem.length);

然后我像这样使用它

                         DropdownButton<SaleRef>(
                          hint: Text("  Select Ref"),
                          value: _selectedRef[index],
                          onChanged: (SaleRef value) {
                            setState(() {
                              _selectedRef[index] = value;
                              print(_selectedRef[index].refID);
                            });
                          }