有类似于堆叠中的主轴对齐(mainaxisaligment)的东西吗?

huangapple go评论60阅读模式
英文:

Is there something like mainaxisaligment for a stack?

问题

有没有办法将蓝色的图表条与底部对齐,而不是顶部?

有类似于堆叠中的主轴对齐(mainaxisaligment)的东西吗?

这是代码,蓝色条是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?

有类似于堆叠中的主轴对齐(mainaxisaligment)的东西吗?

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),
      ),
    ),
  ),
),

huangapple
  • 本文由 发表于 2023年2月18日 04:11:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75488853.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定