Flutter用ListData的里面的数据简单的生成列表菜单来检索内容


Flutter新手,从网上高手学到了不少的技术,因为搜索网络没有这样的高手来分享这个小功能,所以自己做了一份,也来分享一下小经验,算是回报各位码农高手新手:

 

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'countmodle.dart'; import 'package:provider/provider.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MultiProvider(         providers: [           ChangeNotifierProvider(create: (BuildContext context) {             return CountModle();           }),         ],         child: MaterialApp(           title: 'Welcome to Flutter',           home: new Scaffold(             appBar: new AppBar(               title: new Text('Welcome to Flutter'),             ),             body: new MenuWidget(),           ),         ));   } }
int groupValue = 0; int i = 0; int keyvalue = 0; int keyvalue2 = 0;
List menuList = [   {     "title1": "黄帝",     "title2":         "黄帝,中国古代部落联盟首领,五帝之首。黄帝被尊祀为“人文初祖”。 在《山海经》里“黄帝”只是诸帝之一,直到春秋战国时期才被定于一尊。  据说他是少典与附宝之子,本姓公孙,后改姬姓 ,也有说巳姓。 名轩辕,一说名轩。 建都于有熊,亦称有熊氏。也有人称之为“帝鸿氏”。 史载黄帝因有土德之瑞,故号黄帝。黄帝在位期间,播百谷草木,大力发展生产,始制衣冠、建舟车、制音律、作《黄帝内经》等。 黄帝的出生地古代文献记载有河南新郑、山东寿丘  、甘肃天水三地;近代学术界推测黄帝的发源地有陕西黄陵说、辽河说等。",     "type": 0,   },   {     "title1": "神农",     "title2":         "炎帝,是中国上古时期姜姓部落的首领尊称,号神农氏,又号魁隗氏、连山氏、列山氏,别号朱襄。(尚有争议,也有说朱襄氏部落曾有三代首领尊号炎帝 )。 传说姜姓部落的首领由于懂得用火而得到王位,所以称为炎帝。从神农起姜姓部落共有九代炎帝,神农生帝魁,魁生帝承,承生帝明,明生帝直,直生帝氂,氂生帝哀,哀生帝克,克生帝榆罔,传位五百三十年。 炎帝所处时代为新石器时代,炎帝故里目前有六地之争,分别是:陕西宝鸡、湖南会同县连山、湖南株洲炎陵县、湖北的随州、山西高平、河南柘城 。炎帝部落的活动范围在黄河中下游,在姜水(一说是今宝鸡市渭滨区的清姜河,一说是今宝鸡市岐山县的岐水。)一带时部落开始兴盛,最初定都在陈地,后来又将都城迁移到曲阜。 相传炎帝牛首人身,他亲尝百草,发展用草药治病;他发明刀耕火种创造了两种翻土农具,教民垦荒种植粮食作物;他还领导部落人民制造出了饮食用的陶器和炊具。 传说炎帝部落后来和黄帝部落结盟,共同击败了蚩尤。 华人自称炎黄子孙,将炎帝与黄帝共同尊奉为中华民族人文初祖,成为中华民族团结、奋斗的精神动力。 炎帝被道教尊为神农大帝,也称五榖神农大帝。",     "type": 1   },   {"title1": "雷公", "title2": "远古,黄帝内经里面的主人公", "type": 2},   {"title1": "歧伯", "title2": "远古,黄帝内经里面的主人公", "type": 3},   {"title1": "扁鹊", "title2": "春秋战国,名医", "type": 4},   {"title1": "华佗", "title2": "三国时期,不幸遇上曹操这个蠢货", "type": 5},   {"title1": "张仲景", "title2": "东汉,医祖。高人", "type": 6},   {"title1": "孙思邈", "title2": "唐朝,寿长140岁,高人中的高人", "type": 7},   {"title1": "皇浦谧", "title2": "说明", "type": 8},   {"title1": "公孙和", "title2": "说明", "type": 9},   {"title1": "菜单一", "title2": "说明", "type": 10},   {"title1": "菜单四", "title2": "说明", "type": 11},   {"title1": "菜单五", "title2": "说明", "type": 12},   {"title1": "菜单六", "title2": "说明", "type": 13},   {"title1": "菜单七", "title2": "说明", "type": 14}, ];
class MenuWidget extends StatefulWidget {   @override   _MenuWidgetState createState() => _MenuWidgetState(); }
class _MenuWidgetState extends State<MenuWidget>     with SingleTickerProviderStateMixin {   @override   void initState() {     super.initState();   }
  @override   Widget build(BuildContext context) {     return Stack(children: <Widget>[       Align(         alignment: Alignment.topLeft,         child: Container(           width: 90,           color: Colors.blue[100],           padding: EdgeInsets.only(left: 5, top: 0, right: 5, bottom: 0),           child: Container(             child: getDataListY(),           ),         ),       ),       Align(         alignment: Alignment.topRight,         child: Container(           height: MediaQuery.of(context).size.height,           margin: EdgeInsets.only(left: 92, top: 0, right: 2, bottom: 0),           padding: EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 0),
          child: getDataListZ(             keyvalue2: keyvalue,           ),
          // ],           // ),         ),       ),     ]);   } }
class getDataListY extends StatefulWidget {   getDataListY({Key? key}) : super(key: key);
  @override   _getDataListYState createState() => _getDataListYState(); }
class _getDataListYState extends State<getDataListY> {   List<Widget> _getDataListY() {     var datalist = menuList.map((value) {       return Stack(         children: [           //isThreeLine: true,           TextButton(             onPressed: () {               updateGroupValue(value['type']);               context.read<CountModle>().add();             },             child: Text(value['title1']),           ),         ],       );     });
    return datalist.toList();   }
  @override   Widget build(BuildContext context) {     return GridView.count(       mainAxisSpacing: 0.0,       crossAxisSpacing: 0.0,       crossAxisCount: 1,       children: _getDataListY(),     );   }
  void updateGroupValue(int v) {     setState(() {       groupValue = v;     });   } }
class getDataListZ extends StatefulWidget {   var keyvalue2;
  getDataListZ({Key? key, required this.keyvalue2});
  @override   _getDataListZState createState() => _getDataListZState(); }
class _getDataListZState extends State<getDataListZ> {   @override   Widget build(BuildContext context) {     return Container(         child: Column(       children: [         Text(menuList[groupValue]['title2'] +             "Count ${context.watch<CountModle>().count}"),         Visibility(           child: Text("Count ${context.watch<CountModle>().count}"),           visible: true,         ),       ],     ));   } }

//================================================   以下是Countmodel.dart文件的内容,拷贝存储即可:         import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'main.dart';
class CountModle with ChangeNotifier {   //int keyvalue = updatakey(keyvalue2);   int _count = 0;   // int _keyvalue = 0;   int get count => _count;
  void add() {     _count++;     notifyListeners();   } }

//==========================   以下 是PuBSPEC.YAML里面添加provider的内容:   dependencies:   flutter:     sdk: flutter   provider: ^6.0.1