如何在可用高度上绘制小部件

Question

我有一个小部件需要在剩余高度上绘制，该小部件需要在顶部和底部小部件之间绘制（使用底部中心属性绘制的底部小部件）。

例如：

Container() -- 第一个容器几乎占了半个屏幕

Container() -- 在屏幕底部绘制的第二个容器例如：将小部件视为 Button

Container() -- 需要在两个容器之间绘制第三个容器。

Answer 1

如果您有类似 Column 的东西，您可能想使用 Expanded 小部件。

试试这个代码

Column(
  children: [
    Container(color: Colors.red, height: 100),
    Expanded(
      child: Container(color: Colors.yellow, height: 100),
    ),
    Container(color: Colors.red, height: 100),
  ],
)

来自 Expanded-class 文档：

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Answer 2

扩展小部件 适用于我们需要用它包裹中间小部件的场景。

例如：

Expanded(
        child: Container(
              ...         
            ),
         ),

如何在可用高度上绘制小部件

How to draw widget on available height in flutter

flutter

flutter-layout

flutter-widget