如何更新 Flutter DropDownButton 中的文本

Question

我想制作一个下拉按钮，您可以在两个类别（收入或支出）之间进行选择，但使用我所做的，它只显示下拉列表的默认状态。如果我尝试单击“收入”进行更改，它仍然在下拉列表中显示“支出”。当我在窗口外部单击以创建新交易并使用添加符号再次打开它时，它会显示之前选择的收入选项。但我想要它，这样当我直接按“收入”时，它会将下拉菜单更改为“收入”，并且我不必重新打开交易创建。

这是我使用的代码（它不是很有组织性，也不是很好，因为这是我的第一个 flutter 项目）：

import 'package:flutter/material.dart';
import 'package:spar_radar/services/database_service.dart';
import 'package:flutter/services.dart'; 
import 'package:date_format_field/date_format_field.dart';

class HomePage extends StatefulWidget{
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}


const List<String> types = <String>['Expence', 'Income'];


class _HomePageState extends State<HomePage> {

  final DatabaseService _databaseService = DatabaseService.instance;

  
  String? _transactionName = null;
  double? _transactionAmount = null;
  String? _transactionDate = null;
  String? _transactionType = types.first;
  @override 
  Widget build(Object context) {
    return Scaffold(

      floatingActionButton: _addTransactionButton(),
    ); 
  }

  Widget _addTransactionButton() {
    return FloatingActionButton(onPressed: () {
      showDialog(context: context, builder: (_) => AlertDialog(
        title: const Text('Add Transaction'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              onChanged: (value,) {
                setState(() {
                  _transactionName = value;
                });
              },
              decoration:  const InputDecoration(border: OutlineInputBorder(),
              labelText: "Name",
              hintText: 'Add The Name of the Transaction'
              ),
            ),
            TextField( 
              onChanged: (value) {
                setState(() {
                  _transactionAmount = double.parse(value);
                });
              },
              decoration: InputDecoration(labelText: "Amount",
              border: OutlineInputBorder(),
              hintText: 'Enter the amount here'), 
              keyboardType: TextInputType.number, 
              inputFormatters: <TextInputFormatter>[ 
              FilteringTextInputFormatter.digitsOnly
              ],
            ),
            DateFormatField(
              type: DateFormatType.type2,
              onComplete: (date){
                  setState(() {
                    _transactionDate = date.toString();
                  });
                }
            ),
            DropdownButton<String>(
                      value: _transactionType,
                      icon: const Icon(Icons.arrow_drop_down),
                      onChanged: (String? NewValue) {
                        setState(() {
                          _transactionType = NewValue;
                        });
                      },
                      items: types.map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
            )
          ],
        )
      ));
    },
    child: const Icon(
      Icons.add,
      )
    );
    
  }

}

我希望有人可以帮助我，并提前致谢！

Answer 1

要更新

AlertDialog

内的状态，您可以使用

StatefulBuilder

，如下所示：

Widget _addTransactionButton() {
    return FloatingActionButton(
      onPressed: () {
        showDialog(
          context: context,
          // add a StatefulBuilder here
          // the first argument is context, and the second argument is the function name to update the state with.
          // You can name this anything. Doesn't need to be setState only
          builder: (_) => StatefulBuilder(
            builder: (context, setState) {
              return AlertDialog(
                  title: const Text('Add Transaction'),
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      TextField(
                        onChanged: (
                          value,
                        ) {
                          setState(() {
                            _transactionName = value;
                          });
                        },
                        decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: "Name",
                            hintText: 'Add The Name of the Transaction'),
                      ),
                      TextField(
                        onChanged: (value) {
                          setState(() {
                            _transactionAmount = double.parse(value);
                          });
                        },
                        decoration: InputDecoration(
                            labelText: "Amount",
                            border: OutlineInputBorder(),
                            hintText: 'Enter the amount here'),
                        keyboardType: TextInputType.number,
                        inputFormatters: <TextInputFormatter>[
                          FilteringTextInputFormatter.digitsOnly
                        ],
                      ),
                      DropdownButton<String>(
                        value: _transactionType,
                        icon: const Icon(Icons.arrow_drop_down),
                        onChanged: (String? NewValue) {
                          setState(() {
                            _transactionType = NewValue;
                          });
                        },
                        items: types.map<DropdownMenuItem<String>>((String value) {
                          return DropdownMenuItem<String>(
                            value: value,
                            child: Text(value),
                          );
                        }).toList(),
                      )
                    ],
                  ));
            }
          ),
        );
      },
      child: const Icon(
        Icons.add,
      ),
    );
  }