将 ListView 嵌套到 DropdownMenu 中

Question

我创建了一个自定义 ListView，我想将它作为项目嵌套到我的 Dropdownmenu 中。目前，我收到“NoSuchMethodError：方法 'map' 被调用为空”。我似乎无法正确映射它。我是 Flutter 的新手。

ListView 的代码

class TheDetails extends StatelessWidget {

  TheDetails({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(8.0),
      itemExtent: 70.0,
      children: <CustomListItem>[
        CustomListItem(
          accName: 'Salary Account',
          accNumber: 'Savings XXX-X-XX563-9',
          accBalance: '56,302.56',
        ),
        CustomListItem(
          accName: 'Salary Account 2',
          accNumber: 'Savings XXX-X-XX563-9',
          accBalance: '89,302.56',
        ),
        CustomListItem(
          accName: 'Vayu Meetang',
          accNumber: 'Savings XXX-X-XX563-9',
          accBalance: '100,505.56',
        ),
      ],
    );
  }
}

DropdownButton 的代码

class SelectAccount extends StatefulWidget {
  @override
  _SelectAccountState createState() => _SelectAccountState();
}

class _SelectAccountState extends State<SelectAccount> {
  var dropdownValue;
  var accountNames;

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints.expand(width: 375.0, height: 120.0),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(20.0),
      ),
      child: DropdownButton<String>(
        value: dropdownValue,
        underline: Container(
          height: 2,
        ),
        icon: Icon(Icons.keyboard_arrow_down,
        color: Colors.blue[500],),
        onChanged: (String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
        },
        items: accountNames.map((item){
          return DropdownMenuItem(
            value: item,
            child: TheDetails(),
          );
        }).toList(),
      ),
    );
  }
}

Answer 1

您在未初始化的 accountNames 上调用 .map()，因此至少在第一次构建时 null。所以这样做 var accountNames = []; 将解决问题。

为列表的每个成员添加小部件的更简洁的方法是：

items: [
    for(var name in accountNames)
        DropdownMenuItem(value: name, child: TheDetails()),
]

编辑： 将所有内容放在一起：

// in top-level or another file
class Account {
  Account(this.name, this.number, this.balance);
  String name;
  String number;
  String balance;
}


// in _SelectAccountState or a provider
var selectedAccount = 'Savings XXX-X-XX563-9';

var accounts = [
  Account(
    'Salary Account',
    'Savings XXX-X-XX563-7',
    '56,302.56',
  ),
  Account(
    'Salary Account 2',
    'Savings XXX-X-XX563-8',
    '89,302.56',
        ),
  Account(
    'Vayu Meetang',
    'Savings XXX-X-XX563-9',
    '100,505.56',
  ),
];

// In the build method
DropdownButton<String>(
  value: selectedAccount,
  items: [
  for(var account in accounts)
    DropdownMenuItem<String>(
      value: account.number,
      child: Text(account.name),),
  ],
  onChanged: (val) => setState(() => selectedAccount = val)
),

将 ListView 嵌套到 DropdownMenu 中

Nesting ListView into DropdownMenu

listview

dart

drop-down-menu

flutter