單擊 DropdownButton 時應用程序崩潰 (Flutter)

Question

所以我在我的應用程序中創建了一個 DropdownButton。 問題是，每當我單擊下拉菜單時，應用程序就會崩潰。 我很困惑，因為當我在單擊 DropdownButton 之前單擊 TextFormFields 等其他小部件時，它似乎工作正常。

錯誤消息： 'package:flutter/src/material/dropdown.dart': Failed assertion: line 581 pos 12: 'menuHeight == menuBottom - menuTop': is not true.

這是我的下拉按鈕：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DropDownTry(),
    );
  }
}

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

  @override
  _DropDownTryState createState() => _DropDownTryState();
}

class _DropDownTryState extends State<DropDownTry> {
  String dropdownValue = 'Male';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: DropdownButton<String>(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              underline: SizedBox(),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue!;
                });
              },
              items: <String>['Male', 'Female']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            )),
      ),
    );
  }
}

Answer 1

嘗試下面的代碼希望它對您嘗試刪除SizedBox Widget 的const關鍵字有所幫助

為默認下拉值聲明一個字符串變量

  String? dropdownValue;

你的下拉列表

List gender = [
    'Male',
    'Female',
    'Other',
  ];

你的下拉小部件

DropdownButtonHideUnderline(
              child: DropdownButton(
                hint: Text(
                  'Select Gender',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                  textAlign: TextAlign.center,
                ),
                value: dropdownValue,
                onChanged: (String? genderNewValue) {
                  setState(
                    () {
                      dropdownValue = genderNewValue;
                    },
                  );
                },
                items: gender.map<DropdownMenuItem<String>>(
                  (value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(
                        value,
                        style: TextStyle(
                          fontSize: 15,
                        ),
                      ),
                    );
                  },
                ).toList(),
              ),
            ),

您的結果屏幕：

Answer 2

將您的下拉代碼封裝在 SingleChildScrollView 中。

前任。

return Scaffold(
  body: SingleChildScrollView(
    child:Center(
        child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: DropdownButton<String>(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              underline: SizedBox(),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue!;
                });
              },
              items: <String>['Male', 'Female']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            )),
      ),
  )
)

Answer 3

主要是不要讓 DropDown 對頂部很粘。 它喜歡上面的一些空間。 此外，這是由於父小部件的布局錯誤造成的。 也許您已經創建了一個包含單個子項的列，而這個子項是一個堆棧，而崩潰的小部件位於堆棧內。 嘗試使父小部件的布局更清晰。 此外，將屏幕的主要父級放在 Material Widget 中。 問題是因為框架無法計算超出菜單的高度。

Answer 4

我得到了同樣的錯誤。 經過兩天的掙扎，我發現問題出在兩個因素上。 一個是我在 showModalBottomSheet 中使用了下拉菜單，第二個是我沒有在 mydropdown 所在的腳手架中使用 appBar。當我找到包含我的下拉菜單的腳手架時，將其添加到另一個屏幕並添加 appBar。 它工作得很好。