我在布局中使用行和列,并从互联网加载一些数据以在行和列中显示信息。
我想设计一个动态加载页面,使每个加载的数据都使特定的小部件通过动画可见(通过平滑地移动其他小部件)。
我目前在布局中使用 if 子句,并在检索新数据时调用
setState()
。
Column(
children: [
SomeWidget(),
if (data != null)
DataWidget(),
AnotherWidget(),
],
),
在检索到一些数据后,如何在带有动画的行/列中的其他小部件之间插入小部件?
Flutter 已经拥有大量有用的小部件,您可以将其用于此实现。我相信
AnimatedList
小部件可以解决您的问题。我添加了本周视频的小部件和下面的基本示例。
示例:
import 'package:flutter/material.dart';
class PageOne extends StatefulWidget {
@override
_PageOneState createState() => _PageOneState();
}
class _PageOneState extends State<PageOne> {
/// The global key to access the animated list.
final _animatedListKey = GlobalKey<AnimatedListState>();
List<String> _items = [];
@override
void initState() {
// Set the items that should be display.
_items = ['A', 'B', 'D', 'E', 'F'];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Example')),
body: AnimatedList(
key: _animatedListKey,
initialItemCount: _items.length,
itemBuilder: (context, index, animation) {
return SlideTransition(
position: animation.drive(
// Tween that slides from right to left.
Tween(begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0)),
),
// Simply display the letter.
child: ListTile(title: Text(_items[index])),
);
},
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
// The item to insert.
final _item = 'C';
// Add, sort, and retrieve the index of the inserted item.
List<String> _temp = _items..add(_item);
_temp.sort();
final _index = _temp.indexOf(_item);
// Update the state and start the animated list animation.
setState(() {
_items.insert(_index, _item);
_animatedListKey.currentState?.insertItem(_index);
});
},
),
);
}
}
您可以将
AnimatedSize
与 SizeBox
一起使用。这是您的示例中的样子:
Column(
children: [
SomeWidget(),
AnimatedSize(
duration: Duration(seconds: 1),
child: SizeBox(
height: data == null ? 0 : null,
child: DataWidget()
)
),
AnotherWidget(),
],
),
重要:如果你没有在 SizeBox 中指定高度,动画只会延伸到宽度。
P.s.这就是我使用 SizeBox 的原因:)
您始终可以使用 AnimatedSwitcher 在小部件之间设置动画,只需 setState 并更改 _widget:
AnimatedSwitcher(
duration: Duration(milliseconds: 200),
transitionBuilder: (Widget child, Animation<double> animation) {
var tween=Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
return SlideTransition(
child: child,
position: tween.animate(animation),
);
},
child: _widget,
)
或使用 flutter_staggered_animations 并通过列和行显示动画
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: AnimationLimiter(
child: Column(
children: AnimationConfiguration.toStaggeredList(
duration: const Duration(milliseconds: 375),
childAnimationBuilder: (widget) => SlideAnimation(
horizontalOffset: 50.0,
child: FadeInAnimation(
child: widget,
),
),
children: YourColumnChildren(),
),
),
),
),
);
}