警报盒中有多个选择芯片

Question

我的应用程序中有一个多选芯片，但是由于AlertDialog中的数据是动态依赖的，所以它是1或100，所以我在Alert Dialog上添加了SingleChildScrollView以便在还有更多条目时进行滚动，但是当我添加了SingleChildScrollView，警报框也像this一样移到了屏幕顶部，我希望它在中心对齐

如果我删除了SingleChildScrollView，它将像我想要的this一样出现。但是如果有很多条目我不能选择，因为它不能覆盖全部数据？

在启用滚动的情况下，有什么方法可以将其与屏幕中心对齐吗？

谢谢

showDialog(
            context: context,
            builder: (BuildContext context) {
              return SingleChildScrollView(
                  child: AlertDialog(
                title: Text("choose items"),
                content: MultiSelectChip(
                  reportList,
                  onSelectionChanged: (selectedList) {
                    setState(() {
                      listSelectedItem = selectedList;
                    });
                  },
                ),
                actions: <Widget>[
                  FlatButton(
                      child: Text("CANCEL"),
                      onPressed: () {
                        setState(() {
                          dropdownSelected = null;
                          listSelectedItem.clear();
                        });
                        Navigator.of(context).pop();
                      }),

Answer 1

在AlertDialog的内容中使用Container和约束，在Container的子换行中使用SingleChildScrollView，然后再封装MultiSelectChip

代码段

return AlertDialog(
            title: Text("Report Video"),
            content: Container(
              constraints: BoxConstraints(
                  maxHeight: 100.0,
              ),
              child: SingleChildScrollView(
                child: MultiSelectChip(
                  reportList,
                  onSelectionChanged: (selectedList) {
                    setState(() {
                      selectedReportList = selectedList;
                    });
                  },
                ),
              ),
            ),
            actions: <Widget>[
              FlatButton(
                child: Text("Report"),
                onPressed: () => Navigator.of(context).pop(),
              )
            ],
          );
        })

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> reportList = [
    "Not relevant",
    "Illegal",
    "Spam",
    "Offensive",
    "Uncivil",
    "a123",
    "b234",
    "c2314",
    "aaaa",
    "a",
    "1Not relevant",
    "2Illegal",
    "3Spam",
    "4Offensive",
    "5Uncivil",
    "6a123",
    "7b234",
    "8c2314",
    "9aaaa",
    "0a",
    "Not relevant",
    "Illegal",
    "Spam",
    "Offensive",
    "Uncivil",
    "a123",
    "b234",
    "c2314",
    "aaaa",
    "a",
    "1Not relevant",
    "2Illegal",
    "3Spam",
    "4Offensive",
    "5Uncivil",
    "6a123",
    "7b234",
    "8c2314",
    "9aaaa",
    "0a",
  ];

  List<String> selectedReportList = List();

  _showReportDialog() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          //Here we will build the content of the dialog
          return AlertDialog(
            title: Text("Report Video"),
            content: Container(
              constraints: BoxConstraints(
                  maxHeight: 100.0,
              ),
              child: SingleChildScrollView(
                child: MultiSelectChip(
                  reportList,
                  onSelectionChanged: (selectedList) {
                    setState(() {
                      selectedReportList = selectedList;
                    });
                  },
                ),
              ),
            ),
            actions: <Widget>[
              FlatButton(
                child: Text("Report"),
                onPressed: () => Navigator.of(context).pop(),
              )
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("Report"),
              onPressed: () => _showReportDialog(),
            ),
            Text(selectedReportList.join(" , ")),
          ],
        ),
      ),
    );
  }
}

class MultiSelectChip extends StatefulWidget {
  final List<String> reportList;
  final Function(List<String>) onSelectionChanged;

  MultiSelectChip(this.reportList, {this.onSelectionChanged});

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

class _MultiSelectChipState extends State<MultiSelectChip> {
  // String selectedChoice = "";
  List<String> selectedChoices = List();

  _buildChoiceList() {
    List<Widget> choices = List();

    widget.reportList.forEach((item) {
      choices.add(Container(
        padding: const EdgeInsets.all(2.0),
        child: ChoiceChip(
          label: Text(item),
          selected: selectedChoices.contains(item),
          onSelected: (selected) {
            setState(() {
              selectedChoices.contains(item)
                  ? selectedChoices.remove(item)
                  : selectedChoices.add(item);
              widget.onSelectionChanged(selectedChoices);
            });
          },
        ),
      ));
    });

    return choices;
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: _buildChoiceList(),
    );
  }
}