logistics-client-flutter/lib/pages/order_taking_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class OrderTakingPage extends StatefulWidget {

  OrderTakingPage({
    Key key
  }): super(key: key);

  _OrderTakingPageState createState() => _OrderTakingPageState();
}

class _OrderTakingPageState extends State < OrderTakingPage >  with AutomaticKeepAliveClientMixin {
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("重绘页面");
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('接单', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(36)), ),
          centerTitle: true,
          backgroundColor: Color.fromRGBO(64, 98, 254, 1),
          actions: < Widget > [
            Container(
              child: PopupMenuButton<String>(
              icon: Icon(Icons.add_circle_outline),
              offset: Offset(0, 60),
              padding: EdgeInsets.zero,
              //child: IconButton(icon: Image.asset('lib/images/icon_shaixuan.png', scale: 1.8, ),onPressed: (){},),
              itemBuilder: (BuildContext context)=><PopupMenuEntry<String>>[
                PopupMenuItem<String>(
                  child:Text("hahahahahh"),
                ),
                PopupMenuDivider(height: 1.0),
                PopupMenuItem<String>(
                  child:Text("hahahahahh"),
                ),
                PopupMenuDivider(height: 1.0),
                PopupMenuItem<String>(
                  child:Text("hahahahahh"),
                ),
                PopupMenuDivider(height: 1.0),
              ]
            )
            ),
          ],
        ),
        body: Container(
         padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setWidth(20), ScreenUtil.getInstance().setWidth(20), ScreenUtil.getInstance().setWidth(20), 0),
          decoration: BoxDecoration(
            color: Color.fromRGBO(246, 246, 254, 1)
          ),
          child: ListView(
            children: < Widget > [
              OrderCard(),
              OrderCard(),
              OrderCard(),
               OrderCard(),
            ],
          ),
        )
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}



class OrderCard extends StatefulWidget {
  final Widget child;

  OrderCard({
    Key key,
    this.child
  }): super(key: key);

  _OrderCardState createState() => _OrderCardState();
}

class _OrderCardState extends State < OrderCard > {


  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      elevation: 3.0,
      child: Column(
        children: < Widget > [
          OrderCardContainer()
        ],
      ),
    );
  }
}

class OrderCardContainer extends StatefulWidget {
  final Widget child;

  OrderCardContainer({
    Key key,
    this.child
  }): super(key: key);

  _OrderCardContainerState createState() => _OrderCardContainerState();
}

class _OrderCardContainerState extends State < OrderCardContainer > with SingleTickerProviderStateMixin {
  Animation < double > animation;
  AnimationController controller;
  String str="联系方式";
  bool animationStatus =true;
  @override
  initState() {
    super.initState();
    controller = new AnimationController(
    duration: const Duration(milliseconds: 200), vsync: this);
    animation = new Tween(begin: 0.0, end: 230.0).animate(controller);
    animation.addStatusListener((status){
      if (status == AnimationStatus.completed) {
        //动画执行结束时反向执行动画
       setState(() {
         animationStatus = false;
         str="收起";
       });
      } else if (status == AnimationStatus.dismissed) {
        //动画恢复到初始状态时执行动画（正向）
       setState(() {
         animationStatus=true;
         str="联系方式";
       });
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setWidth(30), ScreenUtil.getInstance().setWidth(30), ScreenUtil.getInstance().setWidth(30), 0),
      child: Column(
        children: < Widget > [
          orderNoRow(),
          orderAddress(),
          orderItem('货物名称', '汽车轮胎', 15),
          orderItem('货物件数', '2件', 30),
          orderCutLine(),
          orderBtn(animationStatus,controller,str),
          AnimatedOpen(animation: animation)
        ],
      ),
    );
  }
   dispose() {
    //路由销毁时需要释放动画资源
    controller.dispose();
    super.dispose();
  }
}

Widget orderBtn(bool animationStatus,AnimationController controller,String str){
   return Container(
    margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(20)),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: < Widget > [
        GestureDetector(
          child: Container(
            width: ScreenUtil.getInstance().setWidth(100),
            height: ScreenUtil.getInstance().setHeight(48),
            color: Colors.white,
            child: Center(
              child: Text(str, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(24), color: Color.fromRGBO(64, 98, 254, 1)), ),
            )
          ),
          onTap: () {
              if (animationStatus) {
                //动画恢复到初始状态时执行动画（正向）
                controller.forward();
              } else{
                //动画执行结束时反向执行动画
                controller.reverse();
              }
          },
        ),
        GestureDetector(
          child: Container(
            width: ScreenUtil.getInstance().setWidth(94),
            height: ScreenUtil.getInstance().setWidth(48),
            decoration: BoxDecoration(
              color: Color.fromRGBO(252, 97, 128, 1),
              borderRadius: BorderRadius.all(Radius.circular(4.0))
            ),
            child: Center(
              child: Text("接单", style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(24), color: Colors.white), ),
            ),
          ),
          onTap: () {
            print("22222");
          },
        )
      ],
    )
  );
}

class AnimatedOpen extends AnimatedWidget {
  AnimatedOpen({
    Key key,
    Animation < double > animation
  }): super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final Animation < double > animation = listenable;
    return Container(
      height: ScreenUtil.getInstance().setHeight(animation.value),
      child: orderDetailInfo(),
    );
  }
}
Widget orderNoRow() { //订单号及时间
  return Container(
    margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(30)),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: < Widget > [
        Text("订单号：10893477897899", style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1), fontSize: ScreenUtil.getInstance().setSp(24)), ),
        Text("2019/02/24 14:23", style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1), fontSize: ScreenUtil.getInstance().setSp(24)), ),
      ],
    ),
  );
}

Widget orderAddress() { //运送路线
  return Container(
    margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(20)),
    child: Row(children: < Widget > [
      Text('朝阳门大阳汽贸 ---> 朝阳门大阳汽贸', style: TextStyle(color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(30)), ),
    ], )
  );
}

Widget orderItem(String key, String value, int marginBottom) {
  return Container(
    margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(marginBottom)),
    child: Row(children: < Widget > [
      Text('${key}：${value}', style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1), fontSize: ScreenUtil.getInstance().setSp(24)), ),
    ], )
  );
}

Widget orderPhone(String key, String value, int marginBottom) {
  return Container(
    margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(marginBottom)),
    child: Row(children: < Widget > [
      Text('${key}：', style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1), fontSize: ScreenUtil.getInstance().setSp(24)), ),
      Text('${value}', style: TextStyle(color: Color.fromRGBO(64, 98, 254, 1), fontSize: ScreenUtil.getInstance().setSp(24)), ),
    ], )
  );
}

Widget orderCutLine() { //分割线
  return Container(
    margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(20)),
    height: ScreenUtil.getInstance().setHeight(1),
    color: Color.fromRGBO(223, 223, 223, 1),
  );
}


Widget orderDetailInfo() {//卡片展开信息
  return Container(
    child: Wrap(
      children: < Widget > [
        orderCutLine(),
        orderPhone('发件电话', '010-8788 6890', 15),
        orderItem('发件地址', '北京市朝阳区朝阳门外大街28号', 30),
        orderPhone('收件电话', '010-8788 6890', 15),
        orderItem('收件地址', '河北省廊坊市香河县东大街29号院18', 30),
      ],
    )
  );
}