如何在点击操作中实现背景菜单?

时间:2018-11-27 08:39:25

标签: android dart flutter flutter-layout flutter-animation

我正在尝试实现背景菜单导航,已经成功实现了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),
              ),
            )

0 个答案:

没有答案