我想要一个按钮,当我单击它时,listView
随animation
一起消失,就像一个“向上”动画。我成功地通过列表视图的代码在没有animation
的情况下实现了这一目标:
Visibility(
// O valor aqui e o inicial
visible: isExpanded,
child: ListView.builder(
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 2,
itemBuilder: (BuildContext context, int index) {
return Column(
children: <Widget>[
SizedBox(height: 30),
GameCard(locale: widget.locale)
],
);
}),
)
然后按钮执行此操作:
onTapHeader() {
setState(() {
if (isExpanded) {
_controller.forward();
} else {
_controller.reverse();
}
isExpanded = !isExpanded;
});
}
有没有办法对此进行动画处理?
似乎没有一种不滥用ExpansionPanel
小部件或做自己的事情的本地方法。我的解决方案是使用expandable库,因为它基本上就是您要做的事情所要做的。
这是我的代码。调整并做您想做的就足够了。
import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
theme: ThemeData(accentColor: Colors.black87),
home: ListExpansion(),
));
}
List<String> generateItems(int numberOfItems) {
return List.generate(numberOfItems, (int index) {
return 'Item $index';
});
}
class ListExpansion extends StatefulWidget {
@override
_ListExpansionState createState() => _ListExpansionState();
}
class _ListExpansionState extends State<ListExpansion> {
ExpandableController _controller;
List<String> _data = generateItems(8);
@override
void initState() {
super.initState();
_controller = ExpandableController();
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("List Expansion"),
actions: <Widget>[
IconButton(
tooltip: _controller.expanded ? "Collapse" : "Expand",
icon: _controller.expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
onPressed: () {
setState(() {
_controller.toggle();
});
},
),
],
),
body: ExpandablePanel(
controller: _controller,
hasIcon: false,
tapHeaderToExpand: false,
tapBodyToCollapse: false,
collapsed: ListTile(
title: Text("I am currently collapsed. Tap the button to expand me and see a list"),
),
expanded: ListView.builder(
itemCount: _data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(_data[index]),
);
},
),
),
),
);
}
}
确保像这样添加发布依赖项:
dependencies:
flutter:
sdk: flutter
expandable: ^3.0.1
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2