flutter_canteen/lib/ui/home_page.dart

import 'package:canteen/ui/food_list_page.dart';
import 'package:canteen/widget/chzn_expansion_panel_list.dart';
import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  @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();
                        //跳转至搜索页面
                        // Navigator.push(context, route);
                      }
                    });
                    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 FoodListPage();
                  }));
                },
              )
            ]),
            CampusListView()
          ],
        ),
      ),
    );
  }
}

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