flutter - 带有多选芯片的警告框在 flutter 中

Question

我的应用程序中有一个多选芯片，但是当 AlertDialog 中的数据动态依赖时，它将是 1 或 100，所以我在警报对话框上添加了 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的content中使用Container和constraints，在Container的child中包裹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(),
    );
  }
}