ListTile的tileColor溢出容器外，Flutter

Question

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

下面是问题的截图:

我正在使用Flutter 2.2.3和Dart 2.13.4版本。 起初我认为是模拟器有问题(Pixel 2 API 30)，所以我尝试在Pixel 3 API 30上测试。问题仍然存在。

我请朋友帮忙检查代码是否有问题，他说他找不到任何问题，代码在他的屏幕上运行正常。我不明白为什么会这样，我相信他也只比我用Flutter晚一个版本。使用不同的颜色应用，他的屏幕上看起来像这样，这正是我所期望的。

这让我更难理解问题所在，并且也让我感到困惑，因为他没有更改我的代码，这个问题只在我的屏幕上出现。

如果您需要查看ListView builder和父容器的代码，我将在下面附上它。

这是ListView builder的Widget:

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),
                    ),
                  ),
                ),

谢谢你！

- Sofia

---

你在那里设置了一个边距。移除 margin: EdgeInsets.only(bottom: 5),。你是指列表项底部的颜色还是按钮和其他小部件的背景颜色？ - Midhun MP

你好。我正在谈论List Tile的瓷砖颜色。它应该显示为容器内的瓷砖，但实际上它会溢出到其父容器周围。 - Sofia

请查看此链接：https://github.com/flutter/flutter/issues/83108，它可能会有所帮助。 - linxie

Answer 1

看起来，它显示的是可视行，因为空格的缘故。在我们的情况下，我们有一个高度为250的列表视图。但是，如果你用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的子元素，这将解决问题。顺便说一下，我希望你会满意第一个解决方案。如果你有更多元素，你也可以在这里使用堆栈。

- Yeasin Sheikh