Question

尝试将我的一个容器拉伸到最大屏幕高度时遇到问题，

  home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: double.infinity,
                width: 100,
                color: Colors.red,
              )
            ],
          ),
        ),
      ),

我认为通过将高度值设置为无穷大，可以将红色容器拉伸到整个安全区域。尽管除非我将高度值设置为容器，否则容器是不可见的。

Answer 1

将容器包装为展开后，其最大尺寸如下：

home: Scaffold(
    backgroundColor: Colors.teal,
    body: SafeArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
        Expanded(
         child: Container(
            width: 100,
            color: Colors.red,
          )
         )
        ],
      ),
    ),
  ),

Answer 2

您应该使用Expanded小部件。

根据官方文档，Expanded小部件是一种小部件，可扩展行，列或Flex的子级，以便该子级填充可用空间。

在此处详细了解Expanded小部件：Expanded Widget

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Container(
                width: 100,
                color: Colors.red,
              ),
            )
          ],
        ),
      ),
    );
  }
}

输出

如何将容器高度扩展到最大？

2 个答案: