flutter_canteen/lib/views/campus_listview.dart

import 'package:canteen/views/chzn_expansion_panel_list.dart';
import 'package:flutter/material.dart';

/// Description: 首页-校区列表
/// Time       : 07/25/2022 Monday
/// Author     : liuyuqi.gov@msn.cn
class CampusListView extends StatefulWidget {
  static const campus = ["中心", "软件园", "洪家楼", "趵突泉", "千佛山", "兴隆山", "青岛", "威海"];
  static const campusImage = [
    "zhongxin",
    "ruanjian",
    "honglou",
    "baottu",
    "qianfo",
    "xinglong",
    "qianfo",
    "zhongxin"
  ];
  late final _campusList;

  @override
  State<CampusListView> createState() {
    _campusList = _createCampus(campus, campusImage);
    return _CampusListViewState();
  }

  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)))),
                      ],
                    ),
                  ),
                ))),
      );
    });
  }
}

class _CampusListViewState extends State<CampusListView> {
  int select = -1;
  int _selectCampus = -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});
}