flutter - ListTile tileColor 溢出其容器外，Flutter

Question

我试图解决这个问题，我的 ListTile 的颜色 (1) 没有显示在每个图 block 后面，而是 (2) 在父容器后面显示为溢出。

问题截图如下:

我使用的是 Flutter 2.2.3 版和 Dart 2.13.4。一开始我以为我的模拟器有问题(Pixel 2 API 30)，所以我在 Pixel 3 API 30 上试了一下。问题仍然存在。

我请一位 friend 测试我的代码是否存在问题，他说他找不到任何问题，而且代码在他的屏幕上按预期运行。我不明白为什么会这样，我相信他在我身后也只使用Flutter一个版本。应用不同的颜色，它看起来像 this在他的屏幕上，这正是我的目标。

这只会让我更难理解这个问题，也让我感到困惑，因为他没有做任何改动就运行我的代码，而问题只出现在我的屏幕上。

如果您需要查看 ListView 构建器和父容器的代码，我会在下面附加它。

这是 ListView 构建器的小部件:

Widget _buildTodoList() {
    return ListView.builder(
        itemBuilder: (context, i) {
          return _buildRow(i + 1, _todoItems[i]);
        },
        itemCount: _todoItems.length,
    );
  }

这是 ListTile 的小部件:

Widget _buildRow(int key, String value) {
    return Container(
      margin: EdgeInsets.only(bottom: 5),
      child: ListTile(
        // item tile
        tileColor: Colors.blueGrey,
        leading: Container(
          height: 35,
          width: 35,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.grey.shade800,
          ),
          child: Center(
            child: Text(
              key.toString(),
              style: TextStyle(
                color: Colors.grey.shade300,
              ),
            ),
          ),
        ),

        title: Text(value),
      ),
    );
  }

这是父容器:

Expanded(
                  child: Container(
                    // for list of items
                    child: _buildTodoList(),
                    height: 250,
                    decoration: BoxDecoration(
                      color: Colors.blueGrey.shade50,
                      border: Border.all(
                          width: 0.6,
                          color: Colors.black,
                          style: BorderStyle.solid),
                    ),
                  ),
                ),

谢谢!

Answer 1

它似乎显示了可视行，因为有空格。在我们的例子中，我们有 height:250 的 listView。但是如果你用 Expanded 包装它会占用额外的屏幕空间。我正在基于 Scaffold>Column>Container>ListView 进行测试。如果用另一个 Container 包装 Column 并提供颜色，它将解决问题。像这样:

    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Container(
          color: Colors.white,
          child: Column(
            children: [
              Container(
                // for list of items
                child: ListView.builder(
                  itemCount: _todoItems.length,
                  itemBuilder: (context, i) {
                    return _buildRow(i + 1, _todoItems[i]);
                  },
                ),

                ///50% of screen
                height: constraints.maxHeight * .5,
                decoration: BoxDecoration(
                  color: Colors.blueGrey.shade50,
                  border: Border.all(
                    width: 0.6,
                    color: Colors.black,
                    style: BorderStyle.solid,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

不过，我更喜欢使用 LayoutBuilder。

此外，您可以添加另一个 Expanded>Container 作为 Column 子项，这将解决问题。顺便说一句，我希望您对第一个解决方案感到满意。如果元素比较多，这里也可以使用stack。