Сожмите детей, чтобы вписаться в ряд - PullRequest
Новая
       21

Сожмите детей, чтобы вписаться в ряд

0 голосов
/ 16 мая 2019

Я сделал несколько простых пользовательских виджетов во флаттере, которые имеют только ограничение соотношения сторон, что-то вроде этого: 

Container(
  child: AspectRatio(
    aspectRation: 1.0,
    child: item != null
              ? Image.asset("assets/...")
              : Container(),
  ),
)

Этот виджет пуст, если нет элемента, и загружает изображение, если элемент установлен. Я просто хочу, чтобы он был квадратным, и чтобы родитель ограничивал его размер.

Затем я кладу от 3 до 5 из них в ряд, который находится в контейнере. Я ограничиваю высоту Контейнеров, чтобы она стала панелью в верхней части моего приложения. Это делает виджеты внутри ограничены моим ростом, и это прекрасно работает, если у меня есть 3 виджета в ряду. Но если я поставлю 5, мой ряд будет переполнен (в ширину). Это, конечно, потому что он делает их также 100 в ширину из-за соотношения сторон и 5 раз 100 слишком много для моего пользовательского интерфейса. Я действительно хотел бы, чтобы высота моих виджетов составляла МАКСИМАЛЬНЫЕ 100 пикселей, но только если они все еще соответствуют ширине моей строки. В противном случае я хочу, чтобы они сократились, но при этом сохраняли соотношение сторон. Как я могу это сделать?

Вот небольшой пример кода, если я помещу элементы в 5, они заполняют весь ряд и остаются квадратными. Но с 3, как сейчас, границы элементов растягиваются и заполняют всю строку (без учета соотношения сторон): 

  Widget _buildCompBar(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        height: 100,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List<Widget>.filled(
            3,
            Expanded(
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(width: 2),
                    borderRadius: new BorderRadius.all(Radius.circular(5.0)),
                  ),
                  child:
                      Image.asset("assets/images/mons/unit_icon_0000_0_0.png"),
                ),
              ),
            ),
          ),
        ));
  }

Короче говоря, в примере, если элементов достаточно, они уменьшаются до размеров. Но если для заполнения строки слишком мало элементов, пустое пространство добавляется ВНУТРИ элементов, а не между ними ...

Также пробовал с изображением в качестве украшения, а затем пока изображение заполняет весь ряд. Невозможно заставить его сохранять свою квадратную форму ни с AspectRatio, ни с FittedBox: 

  Widget _buildCompBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      height: 100,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,

        children: <Widget>[
          Expanded(
            child: AspectRatio(
              aspectRatio: 1.0,
              child:
                  Container(
                      decoration: new BoxDecoration(
                          border: Border.all(width: 2),
                          borderRadius:
                              new BorderRadius.all(Radius.circular(5.0)),
                          shape: BoxShape.rectangle,
                          image: new DecorationImage(
                            fit: BoxFit.cover,
                            image: AssetImage("assets/images/mons/unit_icon_0000_0_0.png"),
                          ))),
            ),
          ),
        ],
      ),
    );
  }

Я чувствую, что с изображением в качестве украшения он ведет себя очень по-разному, я думаю, что для этого контейнера вообще нет никаких ограничений. Однако граница выглядит намного лучше (без пробелов вокруг изображения), поэтому мне бы очень хотелось решить ее с помощью декоративного изображения.

...