英文:
Is there something like mainaxisaligment for a stack?
问题
有没有办法将蓝色的图表条与底部对齐，而不是顶部？
这是代码，蓝色条是FractionallySizedBox：
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 20,
child: FittedBox(
child: Text('$${getShortForm(spendingAmount)}'),
),
),
SizedBox(
height: 4,
),
Container(
height: 64,
width: 10,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 1),
color: Color.fromRGBO(220, 220, 220, 1),
borderRadius: BorderRadius.circular(10),
),
),
FractionallySizedBox(
heightFactor: spendingPctOfTotal,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
),
),
),
],
),
),
SizedBox(
height: 4,
),
Text(label)
],
);
}
我尝试使用Stack的alignment属性，但似乎不起作用。看来我只能处理子项叠放的顺序，而无法调整位置。我还尝试将它包装在一个Column中，但这破坏了整个布局。
英文:
Is there a way to align the blue chart bars to the bottom instead of the top?
Here's the code, the blue bar is the FractionallySizedBox:
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
height: 20,
child: FittedBox(
child: Text('$${getShortForm(spendingAmount)}'),
),
),
SizedBox(
height: 4,
),
Container(
height: 64,
width: 10,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 1),
color: Color.fromRGBO(220, 220, 220, 1),
borderRadius: BorderRadius.circular(10),
),
),
FractionallySizedBox(
heightFactor: spendingPctOfTotal,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
),
),
),
],
),
),
SizedBox(
height: 4,
),
Text(label)
],
);
}
}
I tried working with the Stack's alignment attribute but that didn't seem to work. It seems I can only work with the order in which the children are stacked, not position. I tried wrapping it with a column but that broke the entire thing.
答案1
得分: 1
大多数情况下，我们需要使用Aling/Positioned等定位小部件来包装堆栈子项。对于您的情况：
child: Stack(
alignment: Alignment.bottomCenter,//默认是topStart
children: [
或者
Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(
heightFactor: .3,
child: Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
),
),
),
),
英文:
Mostly we need to wrap stack children with positioned widget like Aling/Positioned. For your case
child: Stack(
alignment: Alignment.bottomCenter,//default is topStart
children: [
Or
Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(
heightFactor: .3,
child: Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
),
),
),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论