在行中对齐Alignment.bottomCenter无帮助

Question

Android Studio 2.6 Flutter插件。

我需要4个点把底部和中心的图像。

我尝试这样使用Align小部件：

Align(alignment: Alignment.bottomCenter,

但这无济于事。小圆点位于顶部。

代码如下：

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:intl/intl.dart';
import 'package:logger/logger.dart';
import '../constants.dart' as Constants;

  Widget _createCarouselContainer() {
    final List<String> imagesFullPathList = [
      'assets/images/campaign1.png'
    ];
    int _current = 0;
    return Container(
        decoration: new BoxDecoration(boxShadow: [_createBoxShadow()]),
        child: new ClipRRect(
            borderRadius: BorderRadius.all(
                Radius.circular(Constants.ROUNDED_CORNER_RADIUS)),
            child: new Stack(children: [
              CarouselSlider(
                  options: CarouselOptions(
                      onPageChanged: (index, reason) {
                        _current = index;
                        _logger.d(
                            "_createCarouselContainer: _current = $_current");
                      },
                      autoPlay: true,
                      viewportFraction: 1.0, // page fills 100% of the carousel
                      height: Constants.CARD_VIEW_HEIGHT),
                  items: imagesFullPathList
                      .map((imageName) => Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage(imageName),
                              ),
                            ),
                          ))
                      .toList()),
              Align(
                  alignment: Alignment.bottomCenter,
                  child: Row(
                    children: imagesFullPathList.map((url) {
                      int index = imagesFullPathList.indexOf(url);
                      _logger.d("_createCarouselContainer: index =  $index");
                      return Container(
                        width: 10.0,
                        height: 10.0,
                        margin: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 2.0),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: _current == index
                              ? Color.fromRGBO(255, 255, 255, 1)
                              : Color.fromRGBO(0, 0, 0, 1),
                        ),
                      );
                    }).toList(),
                  ))
            ])));
  }

这里的结果是：

​

​

为什么Align不能提供帮助？

Answer 1

您应该在Stack Widget中使用Positioned Widget，而不是Align

要使用Positioned在底部居中对齐Widget，请使用

bottom: 0,
left: 0,
right: 0,

示例代码

Widget _createCarouselContainer() {
    final List<String> imagesFullPathList = [
      'assets/images/campaign1.png'
    ];
    int _current = 0;
    return Container(
        decoration: new BoxDecoration(boxShadow: [_createBoxShadow()]),
        child: new ClipRRect(
            borderRadius: BorderRadius.all(
                Radius.circular(Constants.ROUNDED_CORNER_RADIUS)),
            child: new Stack(children: [
              CarouselSlider(
                  options: CarouselOptions(
                      onPageChanged: (index, reason) {
                        _current = index;
                        _logger.d(
                            "_createCarouselContainer: _current = $_current");
                      },
                      autoPlay: true,
                      viewportFraction: 1.0, // page fills 100% of the carousel
                      height: Constants.CARD_VIEW_HEIGHT),
                  items: imagesFullPathList
                      .map((imageName) => Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage(imageName),
                              ),
                            ),
                          ))
                      .toList()),
              Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Row(
                    children: imagesFullPathList.map((url) {
                      int index = imagesFullPathList.indexOf(url);
                      _logger.d("_createCarouselContainer: index =  $index");
                      return Container(
                        width: 10.0,
                        height: 10.0,
                        margin: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 2.0),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: _current == index
                              ? Color.fromRGBO(255, 255, 255, 1)
                              : Color.fromRGBO(0, 0, 0, 1),
                        ),
                      );
                    }).toList(),
                  ))
            ])));
  }

Answer 2

这是我的解决方案(由MediaQuery和Positioned提供)。

Widget _createCarouselContainer(BuildContext context) {
    final List<String> imagesFullPathList = [
      'assets/images/campaign1.png',
    ];
    double dotContainerWidth = 12.0;
    double dotContainerHeight = 12.0;
    double dotHorizontalInsets = 2.0;
    int _current = 0;
    double allDotsContainerWidth =
        dotContainerWidth * imagesFullPathList.length +
            ((imagesFullPathList.length - 1) * dotHorizontalInsets);
    final double screenWidth = MediaQuery.of(context).size.width;
    return Container(
        decoration: new BoxDecoration(boxShadow: [_createBoxShadow()]),
        child: new ClipRRect(
            borderRadius: BorderRadius.all(
                Radius.circular(Constants.ROUNDED_CORNER_RADIUS)),
            child: new Stack(children: [
              CarouselSlider(
                  options: CarouselOptions(
                      onPageChanged: (index, reason) {
                        _current = index;
                        _logger.d(
                            "_createCarouselContainer: _current = $_current");
                      },
                      autoPlay: true,
                      viewportFraction: 1.0, // page fills 100% of the carousel
                      height: Constants.CARD_VIEW_HEIGHT),
                  items: imagesFullPathList
                      .map((imageName) => Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage(imageName),
                              ),
                            ),
                          ))
                      .toList()),
              Positioned(
                  // in Stack to align widget must use "Positioned"
                  bottom: Constants.DEFAULT_MARGIN,
                  left: screenWidth / 2 - allDotsContainerWidth / 2,
                  child: Row(
                    children: imagesFullPathList.map((url) {
                      int index = imagesFullPathList.indexOf(url);
                      return Container(
                        width: dotContainerWidth,
                        height: dotContainerHeight,
                        margin: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: dotHorizontalInsets),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: _current == index
                              ? Color.fromRGBO(255, 255, 255, 1)
                              : Color.fromRGBO(0, 0, 0, 1),
                        ),
                      );
                    }).toList(),
                  ))
            ])));
  }

现在圆点在底部和中心。下面是结果：

​