如何创建具有一个动态高度行的 3 行 Flutter 布局

Question

我目前在 Flutter 中创建基本的 3 行页面布局时遇到问题。

其中两行应具有固定高度，其余行应占据页面的其余高度。

合适的 Widget 结构是什么？我想 Expanded 应该是其中的一部分？

伪XAML

<RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition Height="*" />
    <RowDefinition Height="75" />
</RowDefinition>

线框

当前状态

  // Gets the fixed top column.
  static Row _topBackgroundColumn = new Row(
    children: <Widget>[
      Padding(
        padding: EdgeInsets.all(20),
        child: Image(
            image: AssetImage("assets/animation-bird-1.png"),
            height: 50,
            alignment: AlignmentDirectional.topStart,
        )
      )
    ],
  );

  static Container _contentContainer = new Container(
    alignment: Alignment.center,
    child: Center(
      child: Text("bla")
    ),
  );

  // Gets the fixed, image-heavy bottom column.
  static Container _bottomBackgroundColumn = new Container(
    child:
      Image(
        image: AssetImage("assets/background-bottom.png"),
        repeat: ImageRepeat.repeatX,
        height: 50,
        alignment: Alignment.bottomCenter,
      )
  );
  static Container _pageContainer = new Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      verticalDirection: VerticalDirection.down,
      children: <Widget>[
        _topBackgroundColumn, // Container with an image
        _contentContainer, // Container with a label
        _bottomBackgroundColumn, // Container with an image
      ],
    ),
  );

Answer 1

 Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       verticalDirection: VerticalDirection.down,
       children: <Widget>[
         _topBackgroundColumn, // Container with an image
         Expanded(child: _contentContainer), // Container with a label
         _bottomBackgroundColumn, // Container with an image
       ],
     )

Answer 2

class MyColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              alignment: Alignment.center,
              height: 50.0,
              width: double.infinity,
              color: Colors.yellow,
              child: Text(
                'Anything want on top',
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              color: Colors.red,
              child: Text(
                'Anything want in the middle',
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              alignment: Alignment.center,
              height: 75.0,
              width: double.infinity,
              color: Colors.blue,
              child: Text(
                'Anything want in the bottom',
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如何创建具有一个动态高度行的 3 行 Flutter 布局

How to create a 3 row Flutter layout with one dynamic height row

dart

flutter

flutter-layout