dart - 如何使用一个动态高度行创建 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
      ],
    ),
  );

标签： dartflutterflutter-layout

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