警报对话框导致颤动中的“渲染框已布局”

问题描述 投票:0回答:2
The relevant error-causing widget was
AlertDialog
lib\pages\DoctorPage.dart:157
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#a3b64 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
AlertDialog
lib\pages\DoctorPage.dart:157
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#5185b relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
AlertDialog
lib\pages\DoctorPage.dart:157
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 348 pos 12: 'child!.hasSize': is not true.
package:flutter/…/rendering/shifted_box.dart:348
The relevant error-causing widget was
AlertDialog
lib\pages\DoctorPage.dart:157
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#5185b relayoutBoundary=up2
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
AlertDialog

当我将警报框放入颤振中时,会显示这个长错误

这是我的警报框代码

class DoctorButtonBar extends StatelessWidget {
  const DoctorButtonBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      alignment: MainAxisAlignment.spaceBetween,
      children: [
        IconButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    scrollable: true,
                    title: "title".text.make(),
                  );
                });
          },
          icon: Icon(
            Iconsax.award5,
            color: AutiTheme.white,
            semanticLabel: "Autisure Assured",
          ),
        ),
        IconButton(
            onPressed: () {},
            icon: Icon(
              CupertinoIcons.arrow_right_circle_fill,
              color: AutiTheme.white,
            ))
      ],
    );
  }
}

注意:我将其与列表视图一起使用,我不知道这是否导致问题,但关于列表视图的错误中没有提到它

我的 DoctorButtonBar 代码

 return VxBox(
            child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        DoctorListImage(image: item.imageUrl),
        Expanded(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            "Dr. ${item.name}".text.lg.color(AutiTheme.white).bold.make(),
            item.specialist.text.color(AutiTheme.creamColor).make(),
            10.heightBox,
            const DoctorButtonBar()
          ],
        ))
      ],
    ))
        .color(AutiTheme.primary)
        .shadow2xl
        .rounded
        .square(150)
        .make()
        .onTap(() {})
        .py16();

关于该页面,我从映射它的 JSON 文件中获取一些数据,并将其显示在 listview.builder() 中。在其中,我创建了一个批次作为经过验证的批次,它是一个图标按钮,因此当用户单击时,我想通过为奖励按钮提供一些上下文来显示一个警报框。

flutter user-interface flutter-layout
2个回答
2
投票

尝试使用对话框而不是 AlertDialog

    showDialog(
                context: context,
                builder: (context){
                  return Dialog(
                    backgroundColor: Color(0xFFfafafa),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                    elevation: 20,
                    child: Container(
                      height: 120, //use height 
                      child: child,
                  );
                });

0
投票

只是为了复合 Sharyu 的答案。

如果你去官方文档你会看到:

由于对话框尝试根据内容调整自身大小,因此内容必须支持报告其内在尺寸。特别是,这意味着延迟渲染的小部件(例如 ListView、GridView 和 CustomScrollView)将无法在 AlertDialog 中工作,除非它们被包装在强制特定大小的小部件(例如 SizedBox)中。 要更细粒度地控制对话框的大小,请考虑直接使用 Dialog。

所以基本上 AlertDialog 不支持 ListView 或 GridView,除非它们被包装到指定其大小的小部件中。

© www.soinside.com 2019 - 2024. All rights reserved.