flutter_canteen/lib/ui/CanteenMain.dart

import 'package:canteen/ui/listviewexample.dart';
import 'package:canteen/widget/ChznExpansionPanelList.dart';
import 'package:flutter/material.dart';

class CanteenMain extends StatefulWidget {
  const CanteenMain({Key? key}) : super(key: key);

  @override
  State<CanteenMain> createState() => CanteenMainState();
}

class CanteenMainState extends State<CanteenMain> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("食堂菜谱"),
        leading: Builder(
          builder: (context) {
            return IconButton(
              icon: const Icon(Icons.arrow_back, color: Colors.white),
              onPressed: () {
                Navigator.pop(context);
              },
            );
          },
        ),
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            Row(children: [
              Expanded(
                  child: Container(
                margin: const EdgeInsets.fromLTRB(15, 10, 15, 10),
                padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
                child: TextField(
                  decoration: InputDecoration(
                      hintText: "请输入查询内容",
                      prefixIcon: Row(children: [
                        Icon(Icons.search,
                            color: Theme.of(context).primaryColor),
                        Icon(Icons.keyboard_arrow_down,
                            color: Theme.of(context).primaryColor)
                      ]),
                      border: InputBorder.none),
                  focusNode: () {
                    var focusNode = FocusNode();
                    focusNode.addListener(() {
                      if (focusNode.hasFocus) {
                        focusNode.unfocus();

                        //跳转至搜索页面

                      }
                    });
                    return focusNode;
                  }(),
                ),
                decoration: const BoxDecoration(
                  color: Color(0xFFF0F0F0),
                  borderRadius: BorderRadius.all(Radius.circular(1e18)),
                ),
              )),
              IconButton(
                icon: Icon(Icons.star_border,
                    color: Theme.of(context).primaryColor),
                onPressed: () {
                  //此处应当跳转至收藏页面
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (context) {
                    return listviewexpamle();
                  }));
                },
              )
            ]),
            _CampusListView()
          ],
        ),
      ),
    );
  }
}

class _CampusListView extends StatefulWidget {
  static const campus = ["中心", "软件园", "洪家楼", "趵突泉", "千佛山", "兴隆山", "青岛", "威海"];
  static const campusImage = [
    "zhongxin",
    "ruanjian",
    "honglou",
    "baottu",
    "qianfo",
    "xinglong",
    "qianfo",
    "zhongxin"
  ];
  final _campusList = _createCampus(campus, campusImage);

  @override
  State<_CampusListView> createState() => _CampusListViewState();
}

int _selectCampus = -1;

class _CampusListViewState extends State<_CampusListView> {
  int select = -1;

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: SingleChildScrollView(
            child: ChznExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          if (!isExpanded) {
            if (select != -1) widget._campusList[select].isExpanded = false;
            select = index;
            widget._campusList[select].isExpanded = true;
          } else {
            widget._campusList[index].isExpanded = false;
            select = -1;
          }
          _selectCampus = select;
        });
      },
      children: widget._campusList.map<ExpansionPanel>((_CampusViewItem item) {
        return ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return item.header;
            },
            body: item.body,
            isExpanded: item.isExpanded,
            canTapOnHeader: true,
            backgroundColor:
                item.isExpanded ? const Color(0xFFF0F0F0) : Colors.white);
      }).toList(),
      expandedHeaderPadding: const EdgeInsets.all(0),
      elevation: 0,
    )));
  }
}

class _CampusViewItem {
  Widget body;
  Widget header;
  bool isExpanded;
  int id;

  _CampusViewItem(
      {required this.body,
      required this.header,
      this.isExpanded = false,
      this.id = 0});
}

List<_CampusViewItem> _createCampus(
    List<String> campus, List<String> campusImage) {
  return List.generate(campus.length, (index) {
    return _CampusViewItem(
      header: ListTile(
        leading: ClipOval(
            child: Image.asset(
          "assets/location_${campusImage[index]}.png",
          width: 30,
          height: 30,
        )),
        title: Text('${campus[index]}校区'),
      ),
      body: Container(
          color: Colors.white,
          child: Padding(
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10.0),
                    boxShadow: const [
                      BoxShadow(color: Colors.black12, blurRadius: 8.0)
                    ]),
                child: Center(
                  child: Column(
                    children: [
                      ElevatedButton(
                        onPressed: () {
                          //跳转到相应界面 传参_selectCampus
                        },
                        child: const Text("　当日菜品（固定）　"), //这里对齐太难处理,我偷懒用全角空格对齐
                        style: ButtonStyle(
                          shape: MaterialStateProperty.all(
                              const StadiumBorder(side: BorderSide.none)),
                        ),
                      ),
                      ElevatedButton(
                          onPressed: () {},
                          child: const Text("　　　特色菜品　　　"),
                          style: ButtonStyle(
                              shape: MaterialStateProperty.all(
                                  const StadiumBorder(side: BorderSide.none)))),
                      ElevatedButton(
                          onPressed: () {},
                          child: const Text("　　　当日新菜　　　"),
                          style: ButtonStyle(
                              shape: MaterialStateProperty.all(
                                  const StadiumBorder(side: BorderSide.none)))),
                    ],
                  ),
                ),
              ))),
    );
  });
}