如何動態地將小部件添加到行中？

Question

我在行小部件中有一個DropdownButton（類型為String的條目）和一個IconButton。 每次從DropdownButton中選擇一個條目並點擊IconButton時，都應在初始Row下面的Row小部件中創建一個以選定條目作為其子級的InputChip。 如何才能做到這一點？

Answer 1

class _MyHomePageState extends State<MyHomePage> {
  List<String> templist = new List();

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Wrap(
          children: templist
              .map(
                (f) => Chip(
                  label: Text(f),
                  deleteIcon: CircleAvatar(
                    minRadius: 10.0,
                    child: Icon(
                      Icons.clear,
                      color: Colors.white,
                      size: 20,
                    ),
                  ),
                  deleteIconColor: Colors.red,
                  onDeleted: () {
                    setState(() {
                      templist.remove(f);
                    });
                  },
                ),
              )
              .toList(),
        ),
        new DropdownButton<String>(
          isExpanded: true,
          hint: Text("Click here"),
          items: <String>['A', 'B', 'C', 'D'].map((String value) {
            return new DropdownMenuItem<String>(
              value: value,
              child: new Text(value),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              templist.add(value);
            });
          },
        )
      ],
    ));
  }
}