Question

我有这样的布局：

integrand() missing 1 required positional argument: 'B'

哪个给我这个用户界面：

现在，我不想为TextField设置硬编码的宽度和高度，而是让它们仅采用所需的高度以及列提供的所有剩余宽度。我尝试使用以下布局，但由于出现以下消息而崩溃：“ RenderFlex子代的弹性为非零值，但传入的高度限制是不受限制的”，所以请您帮我解释一下如何在Flutter中做到这一点？

Answer 1

关于此处采用的方法，有些事情很有趣。另外，我的依据是您尝试使覆盖图每次都显示在屏幕顶部的同一位置，而不是覆盖您所点击的内容，因为显示为{{3} }您发布了另一个问题。

第一个有趣的事情是，您已经从调用_createOverlayEntry函数的位置获得了一个渲染框：

RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
var offset = renderBox.localToGlobal(Offset.zero);

这意味着您实际上正在使用renderbox的偏移量来调用此函数，而这可能并非您要尝试的。如果将其放入可以显示整个屏幕的小部件的构建中，则可能工作得很好，但这是需要考虑的事情，并且可能会有所变化。

您正在做的第二件事是

top: offset.dy + 38.0,

这可能是有原因的，但是当我在没有特殊原因的情况下看到代码中的任意大小时，通常会有些警惕。如果您想避开顶部栏，我建议使用kToolbarHeight + ??，如果您要避开屏幕顶部的状态栏等，则应使用SafeArea。

最后，您可能根本不需要使用位置。如果您使用路线，则可以执行以下操作：

OverlayEntry(
  builder: (context) {
    return SafeArea(
      child: Padding(
        padding: EdgeInsets.only(top: 38, left: 10, right: 10),
        child: Align(
          child: Material(
            elevation: 6.0,
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(right: 8.0),
                    child: Icon(Icons.check_box_outline_blank),
                  ),
                  Expanded(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Container(
                          color: Colors.green,
                          child: TextField(
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "New To-Do"),
                          ),
                        ),
                        Container(
                          color: Colors.blue,
                          child: TextField(
                            decoration: InputDecoration(
                                border: InputBorder.none, hintText: "Notes"),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
          alignment: Alignment.topCenter,
        ),
      ),
    );
  },
);

其中的两个重要部分是该列的mainAxisSize-如果未设置，则它会扩展以显示整个屏幕；以及包裹该列的Expanded，以确保该行的子级占用所有可用空间。

此外，您应该从容器对象中删除宽度。我也删除了高度，但这取决于您。

Answer 2

不指定容器的高度和宽度（列的子级），然后尝试：

宽度

为您的列设置crossAxisAlignment: CrossAxisAlignment.stretch,。也许这可以使列的宽度扩展到其所在行的宽度。

要设置行的宽度，可以将行包装在容器中并使用width: MediaQuery.of(context).size.width,。这将获得屏幕尺寸的宽度。

高度

您可以在Expanded中包装每个子列，并指定它们在列高中应具有的弹性。

要设置列的高度，可以将行包装在容器中并使用height: MediaQuery.of(context).size.height,。这将获得屏幕尺寸的高度。您可能需要将其除以10这样的值，所以width: MediaQuery.of(context).size.height/10,

这里有一个有用的备忘单：Cheat Sheet

我如何在column中给TextField全宽

2 个答案: