在 ListView 中使用时，Flutter Stack 小部件的大小不正确答案

【问题标题】：Flutter Stack widget not sizing correctly when used in a ListView在 ListView 中使用时，Flutter Stack 小部件的大小不正确
【发布时间】：2019-11-21 12:17:12
【问题描述】：

我正在尝试构建一个包含 Stack 小部件的卡片列表，卡片 + 堆栈小部件可以正常工作，直到我将其设置为列表视图的子视图，然后堆栈不再自动调整为其最大的孩子.这导致我应该与右下角对齐的视图只右对齐，因为堆栈底部的大小不正确。

我已经尝试使用 Align 来包装 Stack 的所有子项，但这也无济于事。 Positioned 与 Align 的结果相同。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        body: ListView(
          children: <Widget>[
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
            _buildCard(context),
          ],
        ),
      );

  Widget _buildCard(BuildContext context) => Card(
        child: Stack(
          children: <Widget>[
            SizedBox(
              height: 200,
              child: Container(
                color: Colors.black,
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: SizedBox(
                height: 50,
                width: 50,
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      );
}

我希望发生的情况是，堆栈的大小会正确地围绕黑色容器，从而允许红色容器位于卡片的右下角。

【问题讨论】：

用您为 Stack 定义的高度将您的 Stack 包装在一个 Container 中，让我知道它是否有效？
很遗憾，这行不通。黑匣子需要自动调整大小并填充堆栈。我最终将黑色视图作为盒子装饰，因为它适用于我的用例。我正在从网络加载图像。

标签： flutter flutter-layout

【解决方案1】：

也尝试在堆栈上设置对齐方式

alignment: AlignmentDirectional.bottomEnd,

喜欢这个

Widget _buildCard(BuildContext context) => Card(
    child: Stack(
      alignment: AlignmentDirectional.bottomEnd,
      children: <Widget>[
        SizedBox(
          height: 200,
          child: Container(
            color: Colors.black,
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: SizedBox(
            height: 50,
            width: 50,
            child: Container(
              color: Colors.red,
            ),
          ),
        ),
      ],
    ),
  );

screenshot

【讨论】：

这个工作直到我将第三个项目添加到堆栈中，然后它的对齐似乎失败了。似乎问题是 Stack 不知道如何在 ListView 内扩展，导致它保持原来的大小。我最终废弃了堆栈并使用带有列作为卡片前景的背景装饰。在我的用例中，那个 SizedBox->Container 实际上是一个 Image。