如何根据 flutter 屏幕的分数高度在堆栈中定位 Column？

Question

我想将 Column 放置在 Stack 内，这样它就占据了屏幕的 60%，并且位于屏幕底部。

////////
|
|
|40%
////////
|column
|
|
|
|60%
////////

目前我正在尝试用 Positioned 和 MediaQuery 来做，但它不起作用。

      new Positioned(
        top: MediaQuery.of(context).size.height * .4,
        height: MediaQuery.of(context).size.height * .6,

        child: new Column(

我知道有一些分数小部件应该会有所帮助。

Answer 1

您可以使用 Column 小部件（它是 Flex 小部件的子类）和带有 flex 属性的 Expanded children 来做到这一点。

Stack(
  fit: StackFit.expand,
  children: [
    Column(
      children: <Widget>[
        Expanded(
            flex: 4,
            child: Container() 
            ),
        Expanded(
          flex: 6,
          child: Column(
            children: <Widget>[],
          ),
        )
      ],
    )
  ],
)

如何根据 flutter 屏幕的分数高度在堆栈中定位 Column？

How to position a Column inside the stack based on the fractional height of screen in flutter?

flutter

flutter-layout