我正在尝试实现背景菜单导航,已经成功实现了backLayer
widgeclass中的导航项列表,但是我完全坚持如何根据单击的项来更改frontLayer
在后层。
Panel.class
class PanelClass extends StatefulWidget {
Animation controller;
final Widget frontLayer;
final Widget backLayer;
PanelClass(
{this.controller, this.frontLayer, this.backLayer});
_PanelClassState createState() => _PanelClassState();
}
class _PanelClassState extends State<PanelClass> {
Animation<RelativeRect> getPanelAnimation(BoxConstraints constraints) {
final height = constraints.biggest.height;
final backpanel_height = height - header_height;
final frontpanel_height = -header_height;
return RelativeRectTween(
begin: RelativeRect.fromLTRB(
0.0, backpanel_height, 0.0, frontpanel_height),
end: RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0))
.animate(
CurvedAnimation(parent: widget.controller, curve: Curves.linear),
);
}
static const header_height = 32.0;
Widget buildBothPanels(BuildContext context, BoxConstraints constraints) {
return Container(
child: Stack(
children: <Widget>[
Container(
child: BackLayer(
controller: widget.controller,
)),
PositionedTransition(
rect: getPanelAnimation(constraints),
child: Material(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0),
),
child: Column(
children: <Widget>[
Container(
height: header_height,
child: Text('Front Panels AppBar'),
),
Expanded(
child: FrontLayer()),
],
),
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: buildBothPanels,
);
下面是 backlayer.dart ,我在其中实现了操作项列表。 backlayer.dart
class BackLayer extends StatefulWidget {
AnimationController controller;
Widget child;
BackLayer({this.controller});
_BackLayerState createState() => _BackLayerState();
}
class _BackLayerState extends State<BackLayer> {
List<String> navlist = ['Home', 'About', 'Contact Us'];
bool get isPanelVisible {
final AnimationStatus status = widget.controller.status;
return status == AnimationStatus.completed ||
status == AnimationStatus.forward;
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: navlist.length,
itemBuilder: (BuildContext context, int index) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ListTile(
onTap: () {
print(navlist[index].toString());
widget.controller
.fling(velocity: isPanelVisible ? -1.0 : 1.0);
},
title: Text(
navlist[index],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black87, fontWeight: FontWeight.bold),
),
)