it-roy-ru.com

Как растянуть изображение, чтобы оно соответствовало всему фону (100% высоты x 100% ширины) в Flutter?

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

CSS имеет концепцию процентов, поэтому я мог бы просто установить высоту и ширину на 100%. Но не похоже, что у Flutter есть такая концепция, и плохо просто кодировать высоту и ширину, поэтому я застрял.

Вот что у меня есть (я использую стек, так как у меня есть что-то на переднем плане изображения):

Widget background = new Container(
  height: // Not sure what to put here!
  width: // Not sure what to put here!
  child: new Image.asset(
    asset.background,
    fit: BoxFit.fill, // I thought this would fill up my Container but it doesn't
  ),
);

return new Stack(
  children: <Widget>[
    background,
    foreground,
  ],
);
7
Mary

Неправильный подход здесь.

Вместо этого используйте DecoratedBox. Или атрибут художественного оформления/foregroundDecoration Контейнера (который тогда использует DecoratedBox).

return new Container(
  decoration: const BoxDecoration(
    image: const DecorationImage(
      fit: BoxFit.fill,
      image: const AssetImage("images/common/toto.png"),
    ),
  ),
  child: new Text("Hello"),
);
14
Rémi Rousselet

Внутри вашего стека вы должны обернуть свой виджет background в Positioned.fill .

return new Stack(
  children: <Widget>[
    new Positioned.fill(
      child: background,
    ),
    foreground,
  ],
);
5
Mary

Следующее будет соответствовать изображению до 100% ширины контейнера, в то время как высота постоянна. Для локальных ресурсов используйте AssetImage

Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://picsum.photos/250?image=9"),
    ),
  ),
)

Режимы заполнения изображения:

  • Fill - изображение растянуто

    fit: BoxFit.fill
    

     enter image description here


  • Fit Height - изображение сохраняется пропорциональным, при этом отображается полная высота изображения (возможно переполнение)

    fit: BoxFit.fitHeight
    

     enter image description here


  • Fit Width - изображение остается пропорциональным, при этом отображается полная ширина изображения (возможно переполнение)

    fit: BoxFit.fitWidth
    

     enter image description here


  • Cover - изображение сохраняется пропорциональным, обеспечивает максимальное покрытие контейнера (может переполниться)

    fit: BoxFit.cover
    

     enter image description here


  • Contain - изображение остается пропорциональным, минимально возможным, уменьшит его размер, если необходимо отобразить все изображение

    fit: BoxFit.contain
    

     enter image description here

5
Jossef Harush

Я думаю, что для вашей цели Flex может работать лучше, чем Container ():

new Flex(
    direction: Axis.vertical,
    children: <Widget>[
      Image.asset(asset.background)
    ],
   )
1
M_Lude

Для заполнения я иногда использую SizedBox.expand

0
KnightsForce