Как сделать так, чтобы контейнер соответствовал его дочернему флаттеру
Я пытаюсь воспроизвести функцию, которая мне нравится в твиттере.
Как вы можете видеть на изображениях выше, изображения Twitter всегда имеют одинаковую ширину, но высота зависит от изображения. Я смог частично воспроизвести эту идею, используя BoxFit.contain, но Container не соответствует изображению.
Что я реализовал]
Container(
width: 290.0,
// height: 400,
constraints: const BoxConstraints(
maxHeight: 350,
minHeight: 150,
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(27.5),
image: DecorationImage(
image: AssetImage(image[itemIndex]),
fit: BoxFit.fitWidth,
),
boxShadow: const [
BoxShadow(
color: Color(0x80000000),
offset: Offset(0, 2.5),
blurRadius: 5,
),
],
),
),
Я пробовал FittedBox без везения. Я попытался использовать FractionallySizedBox, но продолжал получать сообщение об ошибке! Если бы кто-нибудь мог привести меня в правильном направлении, я был бы признателен!
вместо изменения разрешения изображения... сделайте контейнер динамическим... размер в соответствии с изображением с минимальной и максимальной шириной, высотой.... или просто используйте fit: BoxFit.cover; в image объекте
@Nikhil Я думаю, что это шаг в правильном направлении с созданием динамического контейнера.
Ответы 3
Вы можете попробовать фиксированную ширину в контейнере. Но самое главное — использовать fit: BoxFit.cover,
Container(
width: 290.0,
// height: 400,
constraints: const BoxConstraints(
maxHeight: 350,
minHeight: 150,
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(27.5),
image: DecorationImage(
image: AssetImage(image[itemIndex]),
fit: BoxFit.cover, //
),
boxShadow: const [
BoxShadow(
color: Color(0x80000000),
offset: Offset(0, 2.5),
blurRadius: 5,
),
],
),
),
BoxFit.cover не дает нужного эффекта. Я хочу, чтобы красный контейнер сжимался, чтобы соответствовать изображению.
Можете ли вы удалить ограничения
когда я удаляю ограничения, изображение не будет отображаться, потому что высоты нет. Я хочу, чтобы высота была динамической, и я подумал, что BoxConstraints — правильный путь!
Я думаю, я буду использовать Image.asset("", width:imageWidth,fit:Boxfit.cover)
Ограничения снижаются. Размеры увеличиваются. Родитель устанавливает положение.
Вместо того, чтобы использовать изображение в качестве фонового изображения контейнера, используйте его в качестве свойства child контейнера.
Container(
width: 290,
constraints: const BoxConstraints(
maxHeight: 350,
minHeight: 150,
),
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
margin: const EdgeInsets.all(12),
child: Image.asset(
image[itemIndex],
fit: BoxFit.cover,
),
),
);
Ссылка: Flutter — Понимание ограничений
Фрагмент кода: см. результат здесь.
Это конфигурация, которая работала для меня. Это комбинация из 2.
ClipRRect(
borderRadius:
BorderRadius.circular(27.5),
child: Container(
//width: 290.0,
constraints: const BoxConstraints(
maxHeight: 350,
minHeight: 150,
),
decoration: const BoxDecoration(
color: Colors.red,
/*image: DecorationImage(
image: AssetImage(image[itemIndex]),
fit: BoxFit.cover,
),*/
boxShadow: [
BoxShadow(
color: Color(0x80000000),
offset: Offset(0, 2.5),
blurRadius: 5,
),
],
),
child: Image.asset(
image[itemIndex],
width: 290,
fit: BoxFit.cover,
),
),
),
попробуй
fit: BoxFit.cover,