Как динамически регулировать высоту контейнера в соответствии с его дочерними элементами? ⇐ Android

[Anonymous]

Я разрабатывал пользовательский интерфейс для приложения чата, когда столкнулся с этой проблемой.
Проблема довольно проста.
Мне нужна одна или две вещи p>
1.Я хочу динамически регулировать высоту контейнеров в соответствии с сеткой. Просмотреть дочерние элементы. (Чтобы убедиться, что не осталось пустого пространства)
(https://i.stack.imgur .com/1mDGg.jpg)
2.Я хочу разместить дочерние элементы представления сетки внутри фиксированной высоты контейнера (чтобы избежать обрезки дочерних изображений)
(https ://i.stack.imgur.com/TG2Bz.jpg)
Это конкретный фрагмент

Код: Выделить всё

Container(
height: screenHeight * 0.3,
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.only(
bottomEnd: Radius.circular(chatBubbleRadius),
topEnd: Radius.circular(chatBubbleRadius),
bottomStart: Radius.circular(chatBubbleRadius),
),
shape: BoxShape.rectangle,
color: Colors.white),

child: Padding(
padding: const EdgeInsets.all(10.0),
child: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // Number of columns
crossAxisSpacing: 5.0, // Spacing between columns
mainAxisSpacing: 5.0, // Spacing between rows
mainAxisExtent: screenHeight * 0.15,
),
itemCount: 4, // Total number of items
itemBuilder: (BuildContext context, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: const Image(
image: AssetImage('assets/image-3.jpg'),
fit: BoxFit.cover,
),
);
},
),
),
),

Это полный виджет

Код: Выделить всё

class ChatBubbleSenderImage extends StatelessWidget {
const ChatBubbleSenderImage({super.key});

@override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(context).size.height;
double screenWidth = MediaQuery.of(context).size.width;
double toolBarheight = screenHeight * 0.15;
double chatBubbleRadius = 15;

return Column(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const CircleAvatar(
radius: 20,
backgroundImage: AssetImage('assets/profile-1.jpg'),
),
SizedBox(
width: toolBarheight * 0.1,
),
const Text(
"Mark Williams",
style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
),
SizedBox(
width: toolBarheight * 0.1,
),
const Text(
"8:16 PM",
style: TextStyle(fontSize: 12, color: Colors.grey),
),
],
),
SizedBox(
height: toolBarheight * 0.05,
),
Container(
height: screenHeight * 0.3,
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.only(
bottomEnd: Radius.circular(chatBubbleRadius),
topEnd: Radius.circular(chatBubbleRadius),
bottomStart: Radius.circular(chatBubbleRadius),
),
shape: BoxShape.rectangle,
color: Colors.white),

child: Padding(
padding: const EdgeInsets.all(10.0),
child: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // Number of columns
crossAxisSpacing: 5.0, // Spacing between columns
mainAxisSpacing: 5.0, // Spacing between rows
mainAxisExtent: screenHeight * 0.15,
),
itemCount: 4, // Total number of items
itemBuilder: (BuildContext context, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: const Image(
image: AssetImage('assets/image-3.jpg'),
fit: BoxFit.cover,
),
);
},
),
),
),
SizedBox(
height:  toolBarheight * 0.15,
)
],
);
}
}

Что я уже пробовал

[*]Я пробовал удалить свойство высоты из контейнера — сделал не работа ! (Выбросили некоторые исключения макета рендеринга, с которыми я не знаю, как справиться)

[*]Я попробовал задать свойство высоты и ширины для изображения — Не работает ! (Ошибок не возникало, но ничего не изменилось)

[*]Я попробовал установить свойство mainAxisExtent — работает в определенной степени, но не идеально, не динамический

[*]Я попробовал установить свойство ChildrenAspect — результаты те же, что и выше



Подробнее здесь: https://stackoverflow.com/questions/783 ... s-children