Dismissible Height 与儿童身高不匹配答案

【问题标题】：Dismissible Height not matching child heightDismissible Height 与儿童身高不匹配
【发布时间】：2020-05-30 10:17:03
【问题描述】：

我是 Flutter 的新手，但我真的很喜欢这种语言，并希望找到一些答案来解决我可能非常愚蠢的问题 :)

我有一个待办事项列表应用程序，它包含一个带有可关闭磁贴的 ListView。我添加了一个分隔线来分隔瓷砖，但添加分隔线后，Dismissible 的高度不再匹配它的孩子。

如您所见，没有除数的可忽略高度与其子项匹配：

正如您在除数中看到的那样，可忽略的高度与其孩子的高度不匹配。或者至少这是我的想法（请记住我对这种语言的不存在的知识）。可忽略的高度似乎大于孩子的高度。

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

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 的子元素是一个包含两个子元素的 Column：

列表磁贴
分频器

如果有任何帮助，我将不胜感激。谢谢你:)

【问题讨论】：

标签： flutter flutter-layout

【解决方案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))))
      ]);

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

结果如下：

现在它按预期工作了。

【讨论】：