huixiang_app/lib/order/logistics_information_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:huixiang/generated/l10n.dart';

class LogisticsInformationPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LogisticsInformationPage();
  }
}

class _LogisticsInformationPage extends State<LogisticsInformationPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFFF7F7F7),
        elevation: 0,
        title: Text(
          S.of(context).wuliuxinxi,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: false,
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.black,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Column(
            children: [
              _orderInformation(),
              SizedBox(
                height: 16,
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      bottomLeft: Radius.circular(4),
                      topRight: Radius.circular(8),
                      bottomRight: Radius.circular(4),
                    ),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black.withAlpha(12),
                          offset: Offset(0, 2),
                          blurRadius: 14,
                          spreadRadius: 0)
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(bottom: 32),
                        child: Text(
                          "订单跟踪",
                          style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff353535)),
                        ),
                      ),
                      ListView.builder(
                        itemCount: 8,
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        physics: BouncingScrollPhysics(),
                        itemBuilder: (context, position) {
                          return Container(
                            child: orderTrackItem(position),
                          );
                        },
                      ),
                    ],
                  ),
                ),
                flex: 1,
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _orderInformation() {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(4),
        boxShadow: [
          BoxShadow(
              color: Colors.black.withAlpha(12),
              offset: Offset(0, 2),
              blurRadius: 14,
              spreadRadius: 0)
        ],
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  Image.network(
                    "https://t7.baidu.com/it/u=810585695,3039658333&fm=193&f=GIF",
                    width: 95,
                    height: 95,
                    fit: BoxFit.cover,
                  ),
                  Container(
                    padding:
                        EdgeInsets.only(left: 32, right: 32, top: 5, bottom: 5),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(0),
                        bottomLeft: Radius.circular(4),
                        topRight: Radius.circular(0),
                        bottomRight: Radius.circular(4),
                      ),
                      color: Color(0x53000000),
                    ),
                    child: Text(
                      "共3件",
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                width: 12,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 95,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Text(
                            "物流状态:",
                            style: TextStyle(
                              color: Color(0xff353535),
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            "已发货",
                            style: TextStyle(
                                color: Color(0xFF32A060),
                                fontSize: 14,
                                fontWeight: FontWeight.bold),
                          )
                        ],
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      Row(
                        children: [
                          Text(
                            "物流公司:",
                            style: TextStyle(
                              color: Color(0xff353535),
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            "圆通快递",
                            style: TextStyle(
                              color: Colors.black,
                              fontSize: 14,
                            ),
                          )
                        ],
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      Row(
                        children: [
                          Text(
                            "物流单号:",
                            style: TextStyle(
                              color: Color(0xff353535),
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            "1234567890412",
                            style: TextStyle(
                              color: Colors.black,
                              fontSize: 14,
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  Widget orderTrackItem(var position) {
    return Container(
      width: double.infinity,
      height: 50,
      child: Row(
        children: [
          Column(
            children: [
              Text(
                "11-27",
                style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: Color(0xff353535)),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                "12:23",
                style: TextStyle(fontSize: 12, color: Color(0xff868686)),
              ),
            ],
          ),
          SizedBox(
            width: 28,
          ),
          Column(
            children: [
              Image.asset(
                "assets/image/icon_sign.png",
                width: 24,
                height: 24,
              ),
              Container(
                width: 1,
                height: 30,
                decoration: new BoxDecoration(
                  color: position < 7 ? Colors.black : Colors.white,
                ),
              )
            ],
          ),
          SizedBox(
            width: 28,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "已签收",
                style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: Colors.black),
              ),
              SizedBox(
                height: 10,
              ),
              Row(
                children: [
                  Expanded(
                    child: Text(
                      "快件已在泉州市签收",
                      style: TextStyle(fontSize: 12, color: Color(0xff353535)),
                    ),
                    flex: 1,
                  ),
                  SizedBox(
                    width: 9,
                  ),
                  Text(
                    "签收人 张三",
                    style: TextStyle(fontSize: 12, color: Color(0xff353535)),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}