在 Flutter 中使用下拉按钮制作 AlertDialog 可滚动答案

【问题标题】：Making an AlertDialog with Dropdownbuttons in Flutter scrollable在 Flutter 中使用下拉按钮制作 AlertDialog 可滚动
【发布时间】：2020-09-13 09:33:02
【问题描述】：

我在 Flutter 中有一个 AlertDialog，它通过下拉按钮显示一些不同的过滤和排序选项。但是，一旦要显示的元素太多，我希望它可以滚动。将 Listview 放入其中会导致 Dropdownbuttons 出现灰色框（参见图片）。我怎样才能得到这个可滚动的？

代码：

showDialog(
    context: context,
    builder: (BuildContext context){
      return Consumer<VillagerFilter>(
        builder: (context, filter, _child) {
              return AlertDialog(
                title: Text(localization.filterTitleFilterSearch),
                content: Container(
                  height: 500,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      //FIlterbereich
                      Text("Filter:", textAlign: TextAlign.left,),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterObtained(), onChanged: (newIsCaught){filter.setFilterObtained(newIsCaught);}
                          ),
                          Text(localization.filterLivingHere)
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterFavourite(), onChanged: (newIsCaught){filter.setFilterFavourite(newIsCaught);}
                          ),
                          Text(localization.filterFavourite)
                        ],
                      ),
                      //personalityfilter
                      ListTile(
                        title: 
                          Text(localization.filterPersonality + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterPersonality(),
                                onChanged: (String newValue){
                                  filter.setFilterPersonality(newValue);
                                },
                                items: [
                                    '-',
                                    localization.filterPersonalityCranky,
                                    localization.filterPersonalityJock,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),
                    //Genderfilter
                    ListTile(
                        title: 
                          Text(localization.gender + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterGender(),
                                onChanged: (String newValue){
                                  filter.setFilterGender(newValue);
                                },
                                items: [
                                    '-',
                                    localization.male,
                                    localization.female,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),

                    ],
                  ),
                ),
                elevation: 24,
                backgroundColor: nookDefaultBackgroundColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0))
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Okay'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
        }
      );
    },
  );

【问题讨论】：

标签： listview flutter flutter-alertdialog

【解决方案1】：

你可以使用 SingleChildScrollView 小部件

    import 'package:flutter/cupertino.dart';

showDialog(
    context: context,
    builder: (BuildContext context){
      return Consumer<VillagerFilter>(
        builder: (context, filter, _child) {
              return AlertDialog(
                title: Text(localization.filterTitleFilterSearch),
                content: Container(
                  height: 500,
                  child:SingleChildScrollView(
                    child:  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      //FIlterbereich
                      Text("Filter:", textAlign: TextAlign.left,),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterObtained(), onChanged: (newIsCaught){filter.setFilterObtained(newIsCaught);}
                          ),
                          Text(localization.filterLivingHere)
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterFavourite(), onChanged: (newIsCaught){filter.setFilterFavourite(newIsCaught);}
                          ),
                          Text(localization.filterFavourite)
                        ],
                      ),
                      //personalityfilter
                      ListTile(
                        title: 
                          Text(localization.filterPersonality + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterPersonality(),
                                onChanged: (String newValue){
                                  filter.setFilterPersonality(newValue);
                                },
                                items: [
                                    '-',
                                    localization.filterPersonalityCranky,
                                    localization.filterPersonalityJock,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),
                    //Genderfilter
                    ListTile(
                        title: 
                          Text(localization.gender + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterGender(),
                                onChanged: (String newValue){
                                  filter.setFilterGender(newValue);
                                },
                                items: [
                                    '-',
                                    localization.male,
                                    localization.female,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),

                    ],
                  ),
          ,
                  )      ),
                elevation: 24,
                backgroundColor: nookDefaultBackgroundColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0))
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Okay'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
        }
      );
    },
  );

【讨论】：

在 SingleChildScrollView 中使用 Column 是 Futter 反模式。改为使用带有 shrink = true 的 ListView。
为什么在 SingleChildScrollView 中使用 Column 是 Futter 反模式。 ?
这是一种反模式，因为这是使用 ListView 的完美用例，ListView 是一个用于在可滚动列表中容纳多个子项的小部件。 ListView 只会在需要时构建其子项，因此在大多数情况下，它比 SingleChildScrollView 中的 Column 更有效。如果您知道您将有多个需要滚动的孩子，那么（通常）没有理由不使用 ListView。
我将对此进行测试。然而，我之前使用 Listview 的实验以图片上的灰色框结束