英文:
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),
      ),
    ),
  ),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。



评论