flutter - 如何保持小部件的位置

Question

我正在尝试为字母添加动画，如下所示。我面临的问题是，当我更改所选字母的大小时，其他元素正在移动。我找不到保持其他字母位置的方法。有任何想法吗？

return Container(
        color: Colors.orange,
        padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
        child: RowSuper(
            alignment: Alignment.center,
            innerDistance: -20,
            children: [
              nodes[0],
              ColumnSuper(
                alignment: Alignment.center,
                innerDistance: -5,
                children: [
                  nodes[1],
                  nodes[2],
                ],
              ),
              nodes[3],
            ]));

return TweenAnimationBuilder(
        tween: Tween<double>(begin: 0, end: 1),
        duration: Duration(milliseconds: 2000),
        builder: (BuildContext context, double _val, Widget child) {
          return Opacity(
            opacity: _val,
            child: HiveNode(
                index: index,
                child: Container(
                    height: _val * size,
                    width: _val * size,
                    decoration: ShapeDecoration(
                      color: nodeColor,
                      shape: PolygonBorder(
                          sides: 6,
                          rotate: 90.0,
                          borderRadius: 8.0,
                          border: BorderSide(color: Colors.grey, width: 0.1)),
                      shadows: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.6),
                          spreadRadius: 0,
                          blurRadius: 7,
                          offset: Offset(-3, 6), // changes position of shadow
                        ),
                      ],
                    ),
                    child: Center(
                      child: Text(char,
                          style: TextStyle(
                              fontSize: 34,
                              fontWeight: FontWeight.bold,
                              color: textColor)),
                    ))),
          );
        });

标签： flutterflutter-layoutflutter-animation

Answer 1

我可以用 Stack 方法解决。如果将来有人需要类似的东西，这就是答案。

return Container(
        color: Colors.orange,
        width: 360,
        height: 400,
        child: Stack(
          alignment: Alignment.center,
            children: [
              Positioned(left:0, top:80, child:  nodes[0]),
              Positioned(left:0, bottom:80, child: nodes[1]),

              Positioned(top:20, child: nodes[2]),
              Positioned(left:120, top:140, child: nodes[3]),
              Positioned(bottom:20, child: nodes[4]),

              Positioned(right:0, top:80, child: nodes[5]),
              Positioned(right:0, bottom:80, child: nodes[6]),
            ],
        )
    );