将DropdownButtons和TextField选择的数据保存到一个列表中。

Question

我试图创建一个AlertDialog，它将从这些Alert里面的Dropdownbuttons和TextField接收一个未来列表或数据列表。在我的应用程序中，当我调用这些功能的AlertDialog时，将有3个DropdownButtons和1个TextField，所以用户可以选择他想要的信息，然后当他从AlertDialog中按下 "OK "时，他选择的数据将在列表中，所以我可以用Firestore来使用它。这就是我的AlertDialog。

Future<List> createAlertDialog(BuildContext context){

  return showDialog(context: context, builder: (ctx){
    return AlertDialog(
      title: Text('Text'),
      content: Column(
        children: [
          DropdownButton(
            value: iconNameSelected,
            items: iconlistdrop,
            hint: Text('Select Icon'),
            onChanged: (value) {
              iconNameSelected = value;
              setState(() {});
            },
          ),
          DropdownButton(
            value: activelabelSelected,
            items: activelistdrop,
            hint: Text('Select Active label'),
            onChanged: (value1) {
              activelabelSelected = value1;
              setState(() {});
            },
          ),
          DropdownButton(
            value: inactivelabelSelected,
            items: inactivelistdrop,
            hint: Text('Select InActive label'),
            onChanged: (value2) {
              inactivelabelSelected = value2;
              setState(() {});
            },
          ),
          TextField(
          ),
        ],
      ),
      actions: <Widget>[
        MaterialButton(
          elevation: 5.0,
          child: Text("OK"),
          onPressed: (){
            final values = [];
            Navigator.of(ctx).pop(values);
          },
        )
      ],
    );
  });
}

这是我试图在InkWell部件中调用它的方法。

createAlertDialog(context).then((value){
   printf(value[0]);  
   printf(value[1]);
   printf(value[2]);
   printf(value[3]);
}

这是我在DropdownButtons中插入的数据中的一些额外的东西:

List<DropdownMenuItem<String>> iconlistdrop = [];
List<DropdownMenuItem<String>> activelistdrop = [];
List<DropdownMenuItem<String>> inactivelistdrop = [];

String iconNameSelected = null;
String activelabelSelected = null;
String inactivelabelSelected = null;

void loadIcon () {
  iconlistdrop = [];
  iconlistdrop.add(DropdownMenuItem(
    child: Text('LightBulb'),
    value: 'lightbulbOutline',
  ));
  iconlistdrop.add(DropdownMenuItem(
    child: Text('Lock'),
    value: 'lock',
  ));
  iconlistdrop.add(DropdownMenuItem(
    child: Text('Check'),
    value: 'check',
  ));
}

void activelbl () {
  activelistdrop = [];
  activelistdrop.add(DropdownMenuItem(
    child: Text('On'),
    value: 'On',
  ));
  activelistdrop.add(DropdownMenuItem(
    child: Text('Locked'),
    value: 'Locked',
  ));
}

void inactivelbl () {
  inactivelistdrop = [];
  inactivelistdrop.add(DropdownMenuItem(
    child: Text('Off'),
    value: 'Off',
  ));
  inactivelistdrop.add(DropdownMenuItem(
    child: Text('Locked'),
    value: 'Unlocked',
  ));
}

loadIcon();
activelbl();
inactivelbl();

我的类：

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
var temperature;
var humidity;

Future getWeather() async {
http.Response response = await 
 http.get('http://api.openweathermap.org/data/2.5/weather? 
q=Curitiba&units=metric&appid=8c1ce29a0b974e97562564d892cd5a97');
var results = jsonDecode(response.body);
setState(() {
  this.temperature = results['main']['temp'];
  this.humidity = results['main']['humidity'];
});
}

@override
void initState () {
this.getWeather();
super.initState();
}

@override
Widget build(BuildContext context) {

final AuthService _auth = AuthService();

final user = Provider.of<User>(context);

Future getSubCollection(){
  return Firestore.instance.collection('dadosusuarios').document(user.uid).collection('buttons').getDocuments(); 
}

Answer 1

我会使用一个地图来显示值，并将对话框分离到另一个widget，并给它一个构造函数，以防你可能希望它有初始值。

import 'package:flutter/material.dart';

class MyAlertDialog extends StatefulWidget {
  final Map<String, dynamic> initialValues;
  const MyAlertDialog({
    Key key,
    this.initialValues,
  }) : super(key: key);
  @override
  _MyAlertDialogState createState() => _MyAlertDialogState();
}

class _MyAlertDialogState extends State<MyAlertDialog> {
  Map<String, dynamic> _values;
  TextEditingController _controller;
  @override
  initState() {
    super.initState();
    _values = widget.initialValues ??
        {'input1': 'One', 'input2': 'Two', 'input3': 'Free', 'input4': 'Four'};
    _controller = TextEditingController(text: _values['input4']);
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('Text'),
      content: Column(
        children: [
          DropdownButton(
            value: _values['input1'],
            items: <String>['One', 'Two', 'Free', 'Four']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            hint: Text('Select Icon'),
            onChanged: (value1) {
              setState(() {
                _values['input1'] = value1;
              });
            },
          ),
          DropdownButton(
            value: _values['input2'],
            items: <String>['One', 'Two', 'Free', 'Four']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            hint: Text('Select Active label'),
            onChanged: (value2) {
              setState(() {
                _values['input2'] = value2;
              });
            },
          ),
          DropdownButton(
            value: _values['input3'],
            items: <String>['One', 'Two', 'Free', 'Four']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            hint: Text('Select InActive label'),
            onChanged: (value3) {
              setState(() {
                _values['input3'] = value3;
              });
            },
          ),
          TextField(
            controller: _controller,
          ),
        ],
      ),
      actions: <Widget>[
        MaterialButton(
          elevation: 5.0,
          child: Text("OK"),
          onPressed: () {
            _values['input4'] = _controller.text.trim();
            Navigator.of(context).pop(_values);
          },
        )
      ],
    );
  }
}

在这里，我看看是否有一个从构造函数传递的值。如果没有，就放一些默认值。在每次用户输入变化时更新地图，最后一旦对话框弹出就返回地图。在我看来，在这里使用map更好，而且会让推送值到Firestore更容易。

 var result = await showDialog(
             context: context,
             builder: (ctx) {
         return MyAlertDialog(initialValues: /* Your default values if exist*/ );
                              });
 print(result);