Flutter：ListTile 定位在图像上 - 抛出异常 - BoxConstraints 强制无限宽度

Question

我有一个全屏图像，我想在它上面显示一个 ListTile，位于屏幕底部。我不断收到异常 BoxConstraints forces an infinite width

Widget build(BuildContext context) {
    return Stack(
      children: [
        Image(
          alignment: Alignment.center,
          image: Image.file(File(filePath)).image,
          fit: BoxFit.fill,
          height: double.infinity,
          width: double.infinity,
        ),
        Container(
          child: const Positioned(
            bottom: 0,
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage(
                    'https://image_sample.jpg'),
              ),
              title: Text("Sample Text"),
              subtitle: Text('@user1'),
            ),
          ),
        ),
      ],
    );
  }

获得的异常是：

我尝试使用 ConstrainedBox 来约束 ListTile，但仍然不断出现异常。如果我删除 ListTile 并使用简单的文本小部件，它就可以正常工作。我知道 ListTile 有无限的约束，那么如何让它工作？

Answer 1

问题是 ListTile 小部件会尽可能地水平扩展，因此您应该为父小部件添加一个限制宽度。

在您的情况下，您应该为 Positioned 小部件定义宽度。

        Positioned(
          bottom: 0,
          width: MediaQuery.of(context).size.width, //give positioned a max width
          child: const ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage('https://image_sample.jpg'),
            ),
            title: Text("Sample Text"),
            subtitle: Text('@user1'),
          ),
        ),

Flutter：ListTile 定位在图像上 - 抛出异常 - BoxConstraints 强制无限宽度

Flutter: ListTile Positioned over an image - throws exception - BoxConstraints forces an infinite width

dart

flutter

flutter-layout