Align Alignment.bottomCenter在行中没有帮助。

Posted 2021-03-19

android Studio 2.6Flutter插件。

我需要4个点放在图片的底部和中心。

我尝试使用Align widget这样的。

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 没有帮助？

答案

你应该使用 Positioned Widget 里面 Stack Widget 而不是 Align

对齐 Widget 在底部中心用 Positioned 使用

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(),
                  ))
            ])));
  }

另一答案

以下是我的解决方案（通过 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(),
                  ))
            ])));
  }

现在点在BOTTOM和CENTER.这里的结果。