flutter 堆栈是否有类似主轴对齐的东西?

qxsslcnc  于 2023-02-20  发布在  Flutter
关注(0)|答案(1)|浏览(97)

是否有办法将蓝色条形图底部而不是顶部对齐?

下面是代码,蓝色条是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属性,但似乎不起作用。似乎我只能使用子对象堆叠的顺序,而不能使用位置。我尝试用一个列将其 Package ,但这破坏了整个过程。

vktxenjb

vktxenjb1#

大多数情况下,我们需要用Aling/Positioned这样的定位小部件 Package 堆栈子对象。

child: Stack(
  alignment: Alignment.bottomCenter,//default is 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),
      ),
    ),
  ),
),

相关问题