如何保持小部件的位置
How to keep position of widget
我正在尝试为字母添加动画,如下所示。我面临的问题是,当我更改所选字母的大小时,其他元素也在移动。我找不到保持其他字母位置的方法。有什么想法吗?
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)),
))),
);
});
我可以用 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]),
],
)
);
我正在尝试为字母添加动画,如下所示。我面临的问题是,当我更改所选字母的大小时,其他元素也在移动。我找不到保持其他字母位置的方法。有什么想法吗?
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)),
))),
);
});
我可以用 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]),
],
)
);