如何根据其children动态调整Container高度？

Question

当我想到这个问题时，我正在为聊天应用程序设计 UI。

问题很简单。 我想要一个或两个东西

1.我想根据网格视图子项动态调整容器高度。（以确保没有剩余空白） ()

2.我想将网格视图的子视图放置在固定的容器高度内（以避免子图像被截断） ()

这是具体片段

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,
        )
      ],
    );
  }
}

到目前为止我尝试过的事情

1. 我尝试从容器中删除高度属性 - 没有用！ （抛出了一些渲染布局异常，我不知道如何处理）

2. 我尝试为图像赋予高度和宽度属性 - 没有用！ （没有抛出错误，但没有改变任何事情）

3. 我尝试设置 mainAxisExtent 属性 - 在一定程度上有效，但并不完美，不是动态的

4. 我尝试设置childrenAspect属性 - 结果与上面相同

Answer 1

用

GridView.builder

小部件包裹

Expanded

可以让它占据父级

Column

中的所有可用空间，确保它根据父级

Container

的高度调整其高度。

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: Column(
      children: [
        Expanded(
          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,
                ),
              );
            },
          ),
        ),
      ],
    ),
  ),
),