huixiang_app/lib/setting/help_feedback_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/round_button.dart';

class HelpFeedbackPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HelpFeedbackPage();
  }
}

class _HelpFeedbackPage extends State<HelpFeedbackPage>{
  var _isExpanded = [false,false,false];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).bangzhuyufankui,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: false,
        backgroundColor: Color(0xFFF7F7F7),
        elevation: 0,
        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(
        decoration: new BoxDecoration(
          border: Border(
              bottom: BorderSide(
                  color: Color(0xffF7F7F7), width: 0.0)),
          color: Color(0xffF7F7F7),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(
              height: 24,
            ),
            Container(
              margin: EdgeInsets.only(left: 16),
              child: Text(
                S.of(context).fankui,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF353535),
                  fontSize: 16,
                ),
              ),
            ),
            _feedback(),
            Container(
              margin: EdgeInsets.only(left: 16),
              child: Text(
                S.of(context).lianxishoujihao,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF353535),
                  fontSize: 16,
                ),
              ),
            ),
            _contactPhoneNumber(),
            Container(
              margin: EdgeInsets.only(left: 16,bottom: 20),
              child: Text(
                S.of(context).changjianwenti,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF353535),
                  fontSize: 16,
                ),
              ),
            ),
              _commonProblem('如何领取优惠券?',"点击我的，进入我页面后，点击下方的领劵中心，进入后即可领取优惠券哦~",0),
              _commonProblem('如何兑换积分?',"点击净币，进入积分商城，点击你想兑换的领商品，进入商品详情后点击下方兑换，即可兑换哦~",1),
              _commonProblem('如何签到?',"1.点击净币，进入首页，点击上方的去签到。\n2.点击我的，进入我的页面，点击上方的积分详情，进入后即可签到。",2),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    height: 54,
                    alignment: Alignment.center,
                    color: Color(0xFF32A060),
                    child: RoundButton(
                      text:S.of(context).tijiao,
                      backgroup: Color(0xFF32A060),
                      textColor: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  )
                ],
              ),
              flex: 1,
            )
          ],
        ),),
    );
  }

  _feedback(){
    return Container(
      width: double.infinity,
      height: 186,
      margin: const EdgeInsets.all(16),
      decoration: new BoxDecoration(
          color: Color(0xffffffff),
          borderRadius: BorderRadius.circular(4.0)
      ),
      child: Column(
        children: [
          Container(
            margin: const EdgeInsets.fromLTRB(20.0,0,20.0,20.0),
            alignment: Alignment.topLeft,
            child: TextField(
              maxLines: 5,
              decoration: InputDecoration(
                border: InputBorder.none,
                  hintText: "您可以在这里输入反馈内容,例如产品建议，功能异常等",
                hintStyle: TextStyle(fontSize: 14,color: Color(0xffA29E9E),),
              ),
            ),
          ),
          Container(
            alignment: Alignment.bottomRight,
              child:Padding(padding: EdgeInsets.only(right: 20),child: Text("0/50",style: TextStyle(
                fontSize: 14,color: Color(0xffA29E9E),
              ),)),
          ),
        ],
      ),
    );
  }

  _contactPhoneNumber(){
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.all(16),
      decoration: new BoxDecoration(
          color: Color(0xffffffff),
          borderRadius: BorderRadius.circular(4.0)
      ),
      child: Column(
        children: [
          Container(
            margin: const EdgeInsets.fromLTRB(20.0,0,20.0,0),
            alignment: Alignment.topLeft,
            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "请输入您的有效手机号",
                hintStyle: TextStyle(fontSize: 14,color: Color(0xffA29E9E),),
              ),
            ),
          ),
        ],
      ),
    );
  }

  _commonProblem(var title,var cnt,var index){
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(left: 16,right: 16),
      child: Column(
        children: <Widget>[
          ExpansionPanelList(
            children : <ExpansionPanel>[
              ExpansionPanel(
                headerBuilder:(context, isExpanded){
                  return ListTile(
                    title: Text(title),
                  );
                },
                body: Padding(
                  padding: EdgeInsets.fromLTRB(15, 0, 8, 8),
                  child: Text(cnt,style:
                  TextStyle(fontSize: 14,color: Color(0xff8B8B8B)),),
                ),
                isExpanded: _isExpanded[index],
                canTapOnHeader: true,
              ),

            ],
            expansionCallback:(panelIndex, isExpanded){
              setState(() {
                _isExpanded[index] = !isExpanded;
              });
            },
            animationDuration : kThemeAnimationDuration,
          ),
        ],
      ),
    );
    // bool isExpanded;
    // return Container(
    //   width: double.infinity,
    //   height: 186,
    //   margin: const EdgeInsets.all(16),
    //   decoration: new BoxDecoration(
    //       color: Color(0xffffffff),
    //       borderRadius: BorderRadius.circular(4.0)
    //   ),
    //   child: Container(
    //     margin:EdgeInsets.only(left: 20,top: 20,bottom: 8,right: 20) ,
    //     alignment: Alignment.topLeft,
    //     child:Column(
    //       children: [
    //         Row(
    //           mainAxisAlignment: MainAxisAlignment.spaceBetween,
    //           crossAxisAlignment: CrossAxisAlignment.center,
    //           children: [
    //             Padding(padding: EdgeInsets.only(bottom: 8),child:
    //             Text("如何领取优惠券?",style: TextStyle(
    //               fontSize: 16,color: Color(0xff353535),
    //             ),),),
    //             Container(
    //               alignment: Alignment.centerRight,
    //               padding: EdgeInsets.all(6),
    //               margin: EdgeInsets.only(bottom: 8),
    //               child: Icon(
    //                 Icons.arrow_forward_ios,
    //                 color: Colors.black,
    //                 size: 20,
    //               ),
    //             ),
    //           ],
    //         ),
    //         Text("点击我的，进入我页面后，点击下方的领劵中心，进入后即可领取优惠券哦~",style:
    //           TextStyle(fontSize: 14,color: Color(0xff8B8B8B)),)
    //       ],
    //       ),
    //   ),
    // );
  }

}