Flutter DropDownButton 即使在更新时也不会显示选定的值

Question

所以我创建了我自己的使用 DropDownButton class 的小部件，它曾经工作，它会以一种方式更新，在你 select 一个值之后，它会显示选定的值。 我重构了我的代码以涉及整个模型视图/视图模型技术，现在在你 select 列表中的一个值之后，它仍然只在你单击它后显示列表的默认第一个值。

这是我的 DropDownWidget class 的代码：

class DropDownWidget extends StatefulWidget {
  //const DropDownWidget({Key? key}) : super(key: key);

  List<String> dropdownOptions = [];
  String? dropdownValue;

  DropDownWidget(List<String> options) {
    dropdownOptions = options;
    dropdownValue = dropdownOptions.isNotEmpty ? dropdownOptions[0] : null;
  }

  @override
  State<DropDownWidget> createState() => _DropDownWidgetState();
}

class _DropDownWidgetState extends State<DropDownWidget>
    with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..addListener(() {
        setState(() {});
      });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var dropdownOptions = widget.dropdownOptions;
    var dropdownValue = widget.dropdownValue;
    if (dropdownOptions.isEmpty) {
      return LinearProgressIndicator(
        value: controller.value, //0.75,
        color: const Color(0xFFFFA663),
        backgroundColor: const Color(0x3498DBA5),
      );
    }
    return DropdownButton<String>(
      value: dropdownValue, //?? dropdownOptions[0],
      icon: const Icon(
        Icons.agriculture_rounded,
        color: Color(0xFF773608), //Color(0xFF2E7D32), //Colors.green,
      ),
      elevation: 16,
      underline: Container(
        height: 2,
        color: vo.shade200,
      ),
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue = newValue!;
          print(newValue);
        });
      },
      items: dropdownOptions.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

让我知道是否需要更多代码。

Answer 1

因此，从我看到的代码中，您正在构建方法中初始化变量，而您必须在 initState 中进行初始化。

为什么该项目没有得到改变：

该项目正在更改，但 setstate 方法会将其重新分配给列表中的第一项。

因为 setstate 将重建构建方法，并且您确实在构建方法中分配了项目。 这就是它没有改变的原因。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: DropDownWidget(['one', 'two']),
      ),
    );
  }
}

class DropDownWidget extends StatefulWidget {
  //const DropDownWidget({Key? key}) : super(key: key);

  List<String> dropdownOptions = [];
  String? dropdownValue;

  DropDownWidget(List<String> options) {
    dropdownOptions = options;
    dropdownValue = dropdownOptions.isNotEmpty ? dropdownOptions[0] : null;
  }

  @override
  State<DropDownWidget> createState() => _DropDownWidgetState();
}

class _DropDownWidgetState extends State<DropDownWidget>
    with TickerProviderStateMixin {
  late AnimationController controller;
  late List<String> dropdownOptions;
  late String? dropdownValue;

  @override
  void initState() {
    dropdownOptions = widget.dropdownOptions;
    dropdownValue = widget.dropdownValue;
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..addListener(() {
        setState(() {});
      });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (dropdownOptions.isEmpty) {
      return LinearProgressIndicator(
        value: controller.value, //0.75,
        color: const Color(0xFFFFA663),
        backgroundColor: const Color(0x3498DBA5),
      );
    }
    return DropdownButton<String>(
      value: dropdownValue, //?? dropdownOptions[0],
      icon: const Icon(
        Icons.agriculture_rounded,
        color: Color(0xFF773608), //Color(0xFF2E7D32), //Colors.green,
      ),
      elevation: 16,
      underline: Container(
        height: 2,
        color: Colors.black,
      ),
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue = newValue!;
          print(newValue);
        });
      },
      items: dropdownOptions.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}