flutter 如何解决警报对话框抖动中的溢出问题

8cdiaqws  于 2023-02-25  发布在  Flutter
关注(0)|答案(1)|浏览(125)

我正在使用flutter,无法解决警报对话框中的溢出问题。
下面是我的代码实现:

AlertDialog(
    title: Text('$action Account'),
    content: SingleChildScrollView(
      child: Form(
        key: formKey,
        child: Column(
          children: [
            TextFormField(
              controller: nameController,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter saving account name';
                }
                return null;
              },
              decoration: const InputDecoration(labelText: 'Name'),
            ),
            TextFormField(
              controller: balanceController,
              keyboardType:
                  const TextInputType.numberWithOptions(decimal: true),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter saving account balance';
                }
                return null;
              },
              decoration: const InputDecoration(labelText: 'Balance'),
            ),
          ],
        ),
      ),
    ),
    actions: widget,
  );

问题截图:

我尝试使用单个子滚动视图,但它似乎不为我工作。

ni65a41a

ni65a41a1#

为了避免AlertDialog中的底部溢出问题,您可以将对话框的内容 Package 在一个Flexible小部件中。

AlertDialog(
  title: Text('$action Account'),
  content: Flexible(
    child: SingleChildScrollView(
      child: Form(
        key: formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextFormField(
              controller: nameController,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter saving account name';
                }
                return null;
              },
              decoration: const InputDecoration(labelText: 'Name'),
            ),
            TextFormField(
              controller: balanceController,
              keyboardType:
                  const TextInputType.numberWithOptions(decimal: true),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter saving account balance';
                }
                return null;
              },
              decoration: const InputDecoration(labelText: 'Balance'),
            ),
          ],
        ),
      ),
    ),
  ),
  actions: widget,
);

除了将内容 Package 在一个Flexible小部件中之外,我们还将Column的mainAxisSize设置为MainAxisSize.min,以确保列只占用所需的垂直空间。

相关问题