Как создать 3-рядный макет Flutter с одной динамической строкой высоты - PullRequest
0 голосов
/ 14 декабря 2018

В настоящее время у меня проблемы с созданием базового 3-рядного макета страницы во Flutter.

Две строки должны иметь фиксированную высоту, а оставшаяся должна занимать остальную часть высоты страницы.

Какова будет подходящая структура виджета?Я предполагаю, что Expanded должен быть частью этого?

Псевдо XAML

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

Каркас

Wireframe

Текущее состояние

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

enter image description here

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

enter image description here

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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
0 голосов
/ 14 декабря 2018
 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
       ],
     )
...