可允许高度与子高度不匹配

Question

我是Flutter的新手，但是我真的很喜欢这种语言，并希望为我可能很愚蠢的问题找到一些答案：）

我有一个待办事项列表应用程序，它包含一个带有可忽略图块的ListView。我添加了一个分隔符来分隔瓷砖，但是在添加分隔符之后，Dismissible的高度不再与它的子对象匹配。

如您所见，没有分隔符时，可允许的高度与其子项之一相匹配：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9nRkZtay5wbmcifQ==” alt =“在此处输入图像描述”>

正如您所看到的，除法器的可允许高度与它的子代之一不匹配。或者至少是我的想法（请记住我对这种语言的现有知识）。可允许的身高似乎大于孩子的身高。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9mN2hBeC5wbmcifQ==” alt =“在此处输入图像描述”>

这是我创建可解雇对象的方式：

return Dismissible(
          key: Key(item.getId()),
          direction: DismissDirection.endToStart,
          background: Container(
            alignment: AlignmentDirectional.centerEnd,
            color: Colors.red,
            child: Padding(
              padding: EdgeInsets.fromLTRB(0.0, 0.0, 20.0, 0.0),
              child: Icon(
                Icons.delete,
                color: Colors.white,
              ),
            ),
          ),
          onDismissed: (direction) {
            toDoRemove(index);
          },
          child: Column(children: <Widget>[
            ListTile(
              leading: Theme(
                  data: ThemeData(unselectedWidgetColor: Colors.white24),
                  child: Checkbox(
                      checkColor: Colors.white,
                      activeColor: Colors.blue,
                      value: item.isDone(),
                      onChanged: (bool newValue) {
                        toDoToggle(index, newValue);
                      })),
              title: Text(item.getTitle()),
            ),
            Divider(
              color: Colors.white24,
              thickness: 0.0,
            ),
          ]));

从代码中可以看出，Dismissible的子项是一个包含两个子项的列：

• 列表图块
• 除数

我将不胜感激。谢谢：）

Answer 1

好，所以我搞砸了。与其将分隔符包装在可解散对象内部，不如将分隔符放在具有可解散对象的列中会更聪明。这样，分隔符就不再包含在可解散的对象中了。

更新的代码：

 return Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
        Dismissible(
          ...
          child: // No Column anymore
            ListTile(
              leading: Theme(
                  data: ThemeData(unselectedWidgetColor: Colors.white24),
                  child: Checkbox(
                      checkColor: Colors.white,
                      activeColor: Colors.blue,
                      value: item.isDone(),
                      onChanged: (bool newValue) {
                        toDoToggle(index, newValue);
                      })),
              title: Text(item.getTitle()),
            ),
          ),
        Container(decoration: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.white24, width: 0.4))))
      ]);

而且显然分隔线总是有一些填充物，因此我使用了带装饰的容器来模仿分隔线。

这里是结果：

现在它可以正常工作了。