我目前在 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
],
),
);
最佳答案
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
],
)
关于dart - 如何创建具有一个动态高度行的 3 行 Flutter 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53780700/