为什么我不能在Flutter中水平居中一列SizeTransition？
请检查以下代码。不管我怎么尝试，SizeTransition在列中都不是水平居中的。我尝试将列包装在容器中，然后提供无限宽度。我试着把SizeTransition包装在一个中心里。我尝试将SizeTransition包装在一个具有中心对齐属性的容器中。我试着把它包装在一个堆栈中。我尝试给具有对齐中心属性的容器子级...但它们都不起作用。
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: AnimatedBox(),
);
}
}
class AnimatedBox extends StatefulWidget {
@override
createState() => _AnimatedBoxState();
}
class _AnimatedBoxState extends State<AnimatedBox> with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 400),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RaisedButton(
child: Text('animate forward'),
onPressed: () {_controller.forward();},
),
RaisedButton(
child: Text('animate reverse'),
onPressed: () {_controller.reverse();},
),
const SizedBox(height: 100.0,),
SizeTransition(
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
),
sizeFactor: CurvedAnimation(
curve: Curves.fastOutSlowIn,
parent: _controller,
),
),
],
);
}
}例如，以下代码不适用于SizeTransition，但适用于ScaleTransition。我不知道SizeTransition出了什么问题。
return Container(
width: double.infinity,
child: Column(回答 2
Stack Overflow用户
发布于 2019-05-27 02:04:25
尽管我之前的回答在一定程度上解决了这个问题，但我也想解决SizeTransition小部件的局限性以及如何解决这个问题。
SizeTransition提供了“展开”其内容的效果，通过重写对齐设置在水平或垂直轴上运行动画。
为了在不违反对齐规则的情况下达到相同的效果，同时避免使用ScaleTransition小部件，因为我们需要“展开/显示”动画，而不是“放大”--这是我的建议：
@override
Widget build(BuildContext context) {
final _animation = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
return Column(
children: <Widget>[
// ...,
AnimatedBuilder(
animation: _animation,
builder: (_, child) => ClipRect(
child: Align(
alignment: Alignment.center,
heightFactor: _animation.value,
widthFactor: null,
child: child,
),
),
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
child: Text("test"),
),
)
]
);
}这基本上是一个AnimatedBuilder小部件，它使用与SizeTransition中相同的ClipRect & Align，只是它将对齐限制为只有一个轴。
如果您希望动画同时在水平轴和垂直轴上运行-将相同的_animation.value分配给widthFactor属性：
Align(
alignment: Alignment.center,
heightFactor: _animation.value,
widthFactor: _animation.value,
child: child,
),这将帮助您实现“从中心显示”的效果，而无需放大和缩小小部件的内容。
Stack Overflow用户
发布于 2019-05-27 00:52:29
我可以看到你已经尝试了很多东西，下面是我的一些想法：
#1
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: // ...
)或
#2
Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // critical
children: <Widget>[
// ...,
Container(
alignment: Alignment.center, // critical
child: SizeTransition(
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
),
sizeFactor: CurvedAnimation(
curve: Curves.fastOutSlowIn,
parent: _controller,
),
),
),
]
)更新
SizeTransition小部件确实有一个独特的方面。
它具有默认设置为Axis.vetical的axis属性，该属性会覆盖小部件的水平对齐到-1.0 (开始)和垂直对齐到0.0 (中心)。
如果将该属性更改为Axis.horizontal，则会出现相反的情况:将小部件水平对齐到0.0 (居中)，垂直对齐到-1.0 (开始)。
解决方案：
SizeTransition(
axis: Axis.horizontal,
// ...,
)请让我知道这是否有帮助。
https://stackoverflow.com/questions/56315392
复制相似问题