在 Stack Widget 中展开小部件

Question

我有一个带有两个小部件的堆栈窗口小部件。 其中之一绘制背景，另一个在其上绘制。 我希望这两个小部件具有相同的大小。

我希望顶部小部件（列）可以垂直扩展和填充堆栈，以达到由背景小部件设置的大小。 我尝试设置MainAxis mainAxisSize：MainAxisSize.max，但它没有起作用。

我该如何使其工作？

- Arash

---

你能稍微添加一下你的源代码吗？ - HeavenOSK

没有一个答案对我有用。 - Arash

如果您添加了您的代码，我很可能可以帮助您。 - HeavenOSK

Answer 1

使用 Positioned.fill

    Stack(
      children: [
        Positioned.fill(
          child: Column(
            children: [
              //...
            ],
          ),
        ),
        //...
      ],
    );

了解有关在Flutter Widget of the Week中的Positioned的更多信息，请参阅此处

它是如何工作的？

这全部都与约束有关。约束是从父级传递给其子级的最小/最大宽度/高度值。对于Stack，它传递给其子级的约束表明它们可以自我大小调整为它们想要的尺寸，对于某些小部件，这意味着它们将是它们的“自然”大小。被调整大小后，Stack将把其子元素放置在左上角。
Positioned.fill从Stack获取相同的约束，但将不同的约束传递给其子级，说明它(子级)必须是确切的大小(即填充Stack)。

Positioned.fill()与以下内容相同：

Positioned(
  top: 0,
  right: 0,
  left: 0,
  bottom:0,
  child: //...
)

获取更多示例和信息： 如何填充堆栈小部件以及原因?和了解约束。

- Alex.F

---

节省了我很多时间。在搜索之前，我一直在进行试错。 - xbadal

Answer 2

你可以尝试使用一个positioned小部件来包装该列。将top设置为0，将bottom设置为0。这将使该列在竖直方向上充满堆栈。 示例代码：

Stack(
      children: <Widget>[
        // Background widget rep
        Container(
          color: Colors.pink,
        ),
        Positioned(
          top: 0,
          bottom: 0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('madonna'),
              Text('flutter'),
            ],
          ),
        )
      ],
    )

- nonybrighto

Answer 3

我认为你可以像这样将你的列包装在容器中：

 Container(
   height: double.infinity,
   width: double.infinity,
   child: Column()
 ),

- Alex Moran

Answer 4

在我的情况下，我认为我需要用一个扩展的小部件来扩展浅蓝色容器内的堆叠小部件。问题出现了，特别是因为我正在将堆叠小部件添加到列小部件中，而使容器具有double.infinity尺寸的方法，我肯定会在垂直轴上遇到问题。

最后，我设法像这张照片一样展示它...

Column(
    children: [
      //filter
      Container(
        color: orange,
        height: 50,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                  child: Text(
                    'All',
                    style: getRegular(color: white.withOpacity(.6)),
                  ),
                ),
                Container(
                  color: white.withOpacity(.6),
                  width: 1,
                  height: 50,
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(20, 0, 10, 0),
                  child: Text(
                    'Ready',
                    style: getRegular(color: white.withOpacity(.6)),
                  ),
                ),
                freeh(),
                Container(
                  color: white.withOpacity(.6),
                  width: 1,
                  height: 50,
                ),
              ],
            ),
            Row(
              children: [
                Icon(
                  filter,
                  color: white.withOpacity(.7),
                  size: 20,
                ),
                Text(
                  'FILTER',
                  style: getLight(
                    color: white.withOpacity(.7),
                  ),
                ),
                freeh(),
              ],
            ),
          ],
        ),
      ),
      Expanded(
        child: Stack(
          alignment: Alignment.topLeft,
          children: [
            Container(
              color: lightBlue, //here to use map>>>>
            ),
            Container(
              height: 35,
              width: 120,
              margin: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: primary,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(
                    FontAwesomeIcons.listUl,
                    color: white.withOpacity(.8),
                    size: 20,
                  ),
                  Text(
                    'List View',
                    style: getRegular(color: white.withOpacity(.8)),
                  )
                ],
              ),
            ),
          ],
        ),
      )
    ],
  ),

- Marim mohamed

Answer 5

被接受的答案并没有完全回答我的问题。因此，我在这里放置了我的代码，以防您遇到类似的问题。

class NoContentView extends StatelessWidget {
  const NoContentView({Key? key, required this.message}) : super(key: key);

  final String message;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Stack(
        children: [
          Positioned.fill(
            child: FittedBox(
              child: const Image(image: AssetImage(AppImages.noReceiptsWeb), fit: BoxFit.fitWidth),
            ),
          ),
          MessageView(message: message),
        ],
      ),
    );
  }
}

- Hesam

---

这不是一个好的答案。你可能会在发布模式下遇到问题。 - Hassan El khalifte