android - Flutter 灵活的警报对话框列表

Question

我正在尝试创建一个包含可滚动列表的对话框。

我的问题是

1. 当项目太少时，对话框不会缩小以适应。
2. 当列表太大时，按钮会溢出。
3. 该列表不知何故不能自由滚动并继续移动到其初始位置。

代码：

  show(){
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
            elevation: constants.dElevation,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(constants.dRadius),
            ),
            title: Text("title"),
            content: getAllSelectedShipments());
      },
    );
  }

  Widget getAllSelectedShipments() {

    return Container(
        width: 300.0, // Change as per your requirement
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            UtilUI.getColorScaffold(
              constants,
              constants.transparent,
              ListView.separated(
                shrinkWrap: true,
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    leading: Icon(Icons.location_on),
                    title: Text("title $index"),
                    subtitle: Text("subtitle $index"),,
                    onTap: () async {},
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider();
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                UtilUI.getButtonSmall(context, constants, Icons.cancel,
                    constants.sCancel, (constants) => null),
                UtilUI.getButtonSmall(context, constants, Icons.check,
                    constants.sDone, (constants) => null),
              ],
            )
          ],
        ));
  }

当项目太少时

物品过多时

Answer 1

试试这些！

添加mainAxisSize:MainAxisSize.min,到Column小部件

并ListView用Flexible

并Row用Expanded

Answer 2

使用Center并给出宽度和高度，double.infinity然后为您的需要留出余量。使用Expandedonlist-view给它最大高度。

通过这样做，该中心将采用容器提供的所有高度和宽度。那么你就不用担心像素溢出了。

 Widget getAllSelectedShipments() {
    return Center(
        child: Container(
          height: double.infinity,
          width: double.infinity,
          margin: EdgeInsets.fromLTRB(20, 50, 20, 50),
          child: Scaffold(
              body: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Expanded(
                        child: ListView.separated(
                          shrinkWrap: true,
                          itemCount: 10,
                          itemBuilder: (BuildContext context, int index) {
                            return ListTile(
                              leading: Icon(Icons.location_on),
                              title: Text("title $index"),
                              subtitle: Text("subtitle $index"),
                              onTap: () async {},
                            );
                          },
                          separatorBuilder: (context, index) {
                            return Divider();
                          },
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Icon(Icons.cancel),
                          Icon(Icons.check),
                        ],
                      )
                    ],
                  ))),
        ));
  }

不要使用内容AlertDialog来Scaffold提供自定义视图。

 showDialog(
                context: context,
                builder: (BuildContext context) {
                  return getAllSelectedShipments();
                },
              );