Ярлык (текст) внизу изображения в трепещущем виде - PullRequest
Новая
       9

Ярлык (текст) внизу изображения в трепещущем виде

0 голосов
/ 17 июня 2020

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

if (image != null) ...[
                    Container(
                      margin: EdgeInsets.only(top:150.0),
                    ),
                   ] else ...[
                    child  ?? Container(),
                   ],
                  Text('$label',
                  style: TextStyle(
                    color: AppColors.lightBlue,
                    fontSize: 20,
                  ),),

enter image description here

1 Ответ

2 голосов
/ 18 июня 2020

Если я правильно понимаю вашу проблему, то решение состоит в том, чтобы использовать Flutter класса выравнивания в Container. Что это будет делать, так это то, что это позволит выровнять child из Container так, как мы хотим выровнять его. Поскольку ваше требование - выровнять текст по центру внизу, мы будем использовать свойство Alignment Alignment.bottomCenter.

Обратите внимание: Это расскажет вам, как выровнять контент, который не будет нарушен в соответствии с размером устройства, с фоновым изображением

РЕШЕНИЕ 1 [ЭФФЕКТИВНО] 

Container(
   height: MediaQuery.of(context).size.height * 0.3, // ignore this, cos I am giving height to the container
   width: MediaQuery.of(context).size.width * 0.5, // ignore this, cos I am giving width to the container
   decoration: BoxDecoration(
      image: DecorationImage(
         fit: BoxFit.cover,
         image: NetworkImage('https://i.pinimg.com/originals/0c/96/b1/0c96b19dc89ffdaa7ff737cfc04a095f.png')
      )
   ),
   alignment: Alignment.bottomCenter, // This aligns the child of the container
   child: Padding(
      padding: EdgeInsets.only(bottom: 10.0), //some spacing to the child from bottom
      child: Text('Hello', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
   )
)

Теперь результат будет выглядеть так:

Resultant Image

Вы можете проверить этот фрагмент кода на любом устройстве, и он будет отображаться нормально.

РЕШЕНИЕ 2 [НЕ РЕКОМЕНДУЕТСЯ]

Теперь, если вам действительно нужна маржа, есть более чистый способ сделать это, используя MediaQuery , как вы можете видеть в приведенном выше коде, также для выдачи высоты и ширины.

Теперь возникает вопрос, что такое MediaQuery, его можно найти здесь , или, проще говоря, он заботится о размере устройства. Теперь, когда нас беспокоит размер устройства с выравниванием содержимого, мы можем использовать MediaQuery, и то, что он делает, это , он будет регулировать поля / высоту / ширину / заполнение и c в соответствии с Размер устройства и везде будет выглядеть одинаково

Как мы можем это сделать, я буду использовать только ваш код, а поскольку вы хотите, чтобы текст шел внизу с использованием маржа . Вот как это сделать 

Container(
   height: MediaQuery.of(context).size.height * 0.3,
   width: MediaQuery.of(context).size.width * 0.5,
   decoration: BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.cover,
        image: NetworkImage('https://i.pinimg.com/originals/0c/96/b1/0c96b19dc89ffdaa7ff737cfc04a095f.png')
      )
   ),
   child: Container(
      margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.25),
      child: Text('Hello', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
   )
)

ВЫХОД

Solution 2 Result

MediaQuery.of(context).size.height = device height и когда мы умножаем, он выполняет вычисления в соответствии с устройством и выравнивает содержимое. Точно так же для MediaQuery.of(context).size.width= device width

я бы предложил только РЕШЕНИЕ 1 , поскольку оно чистое и не позволит вам сделать много в nested child. Надеюсь, это развеивает ваши сомнения. Дай мне знать. Спасибо :)

...