Question

我有一个图像滑块。在图像滑块的顶部，应显示三个点以更改图像。点应在图像底部居中。另外，我还需要一个按钮作为覆盖。该按钮应显示在垂直居中的右侧。我使用堆栈，但无法对齐控件元素。

Stack(children: [
        CarouselSlider(
          items: children,
          options: CarouselOptions(
              autoPlay: false,
              viewportFraction: 1.0,
              aspectRatio: 2.0,
              enableInfiniteScroll: false,
              onPageChanged: (newIndex, reason) {
                setState(() {
                  currentImage = newIndex;
                });
              }),
        ),
        // This row should be at the bottom of the image slider
        Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: children.map((url) {
            index++;
            return Container(
              width: 8.0,
              height: 8.0,
              margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: currentImage == index - 1
                    ? Color.fromRGBO(255, 255, 255, 0.9)
                    : Color.fromRGBO(255, 255, 255, 0.4),
              ),
            );
          }).toList(),
        ),
        // This row should be centered on the right
        Align(alignment: Alignment.centerRight,child: PhotoButtons(eventId: widget.event.id, preview: true))
      ]),

Answer 1

您可以使用Stack属性在alignment中对齐子窗口小部件。

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    // Your widgets
  ],
),

这将使所有子项在底部居中对齐，但是我们不希望这样，对吧？

因此，我们将使用另一个名为Positioned的小部件。我们可以从top，left，right或bottom指定窗口小部件的确切位置。通过使用MediaQuery，您可以轻松地将其显示在右中位置。

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    // Your widgets
    Positioned(
      top: MediaQuery.of(context).size.height * 0.45,
      right: 0, // the position from the right           
    ),
  ],
),

请注意，Positioned小部件只能在Stack小部件中使用。

Answer 2

使用定位的小部件而不是对齐take a look this example

Answer 3

在堆栈中添加align小部件，然后将其对齐方式更改为您希望该小部件在该堆栈空间中显示的位置

css

如何在颤动中对齐堆栈中的元素？

3 个答案: