В настоящее время у меня проблемы с созданием базового 3-рядного макета страницы во Flutter.
Две строки должны иметь фиксированную высоту, а оставшаяся должна занимать остальную часть высоты страницы.
Какова будет подходящая структура виджета?Я предполагаю, что 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
],
),
);